Worum es geht: Jede Webanwendung besteht aus denselben drei Schichten. Wer weiß, welche Schicht wofür zuständig ist, versteht sofort, wo ein Fehler liegen kann – und warum bestimmte Dinge niemals im Browser passieren dürfen.
1. Die drei Schichten
Alles, was der Besucher sieht und bedient. Läuft auf seinem Gerät – deshalb gilt: Was im Frontend steht, kann jeder lesen. Passwörter und Schlüssel haben dort nichts verloren.
HTML, CSS, JavaScript, React, Next.js
Die rote Linie ist die wichtigste Aussage des Bildes. Das Frontend spricht nie direkt mit der Datenbank. Jede Anfrage läuft über das Backend, weil dort geprüft wird, wer etwas darf – und weil die Zugangsdaten zur Datenbank sonst im Browser jedes Besuchers lägen.
2. Ein Beispiel von vorn bis hinten
Ein Interessent füllt das Anfrageformular aus und klickt auf Senden. Im Frontend prüft JavaScript, ob die Felder ausgefüllt sind, und schickt die Daten los. Das Backend nimmt sie entgegen, prüft sie noch einmal – dieser Schritt ist Pflicht, denn die Prüfung im Browser lässt sich umgehen –, speichert sie in der Datenbank und verschickt eine E-Mail. Zurück geht eine Antwort, die das Frontend in „Ihre Anfrage ist angekommen“ übersetzt.
3. Wo welche Fehler entstehen
| Symptom | Wahrscheinliche Schicht | Wie man es prüft |
|---|---|---|
| Knopf reagiert nicht | Frontend | Browser-Konsole öffnen, Fehlermeldung lesen |
| Formular abgeschickt, nichts passiert | Backend | Netzwerk-Tab: Welcher Statuscode kam zurück? |
| Daten sind weg oder doppelt | Datenbank | Direkt in der Datenbank nachsehen |
| Seite lädt sehr langsam | Meist Backend oder Datenbank | Antwortzeiten im Netzwerk-Tab vergleichen |
Diese Tabelle ist im Umgang mit KI-Agenten Gold wert. Wenn Sie sagen können „Die Anfrage geht raus, kommt aber mit Statuscode 500 zurück“, arbeitet der Agent gezielt – statt zehn Dateien zu ändern, weil „es nicht funktioniert“.
4. Wo läuft was?
Moderne Werkzeuge verwischen die Grenze bewusst. Bei Next.js – dem Rahmenwerk, auf dem auch diese Akademie läuft – liegen Frontend und Backend in einem Projekt, und einzelne Bausteine laufen mal auf dem Server, mal im Browser. Das ist bequem und erfordert Aufmerksamkeit: Ein Schlüssel, der versehentlich in einen Baustein gerät, der im Browser läuft, ist öffentlich.
Die Faustregel bleibt dieselbe: Alles, was geheim sein muss oder worauf Sie sich verlassen, läuft auf dem Server. Alles andere darf in den Browser.
5. Häufige Fragen
Braucht jede Website ein Backend? Nein. Eine reine Unternehmenswebsite ohne Formular und Anmeldung kommt als statische Seite aus – das ist schneller, billiger und sicherer. Sobald Daten entgegengenommen oder gespeichert werden, braucht es ein Backend.
Was ist ein Framework? Eine Sammlung fertiger Bausteine für wiederkehrende Aufgaben. React für Oberflächen, Next.js für ganze Anwendungen, Express oder FastAPI für Backends. Sie nehmen Arbeit ab und legen zugleich fest, wie das Projekt aufgebaut ist.
Muss man alle drei Schichten können? „Full Stack“ heißt nicht, in allen dreien Spezialist zu sein. Es heißt, überall zu verstehen, was passiert – und zu wissen, wen oder was man fragt, wenn es tiefer geht.
Stand: September 2026. Die Übungen laufen vollständig in Ihrem Browser – es wird nichts gespeichert oder übertragen.