Frontend vs. Backend: Was ist der Unterschied?
Das Frontend ist der Teil einer App, der im Browser des Nutzers läuft: die Seiten, Schaltflächen, Formulare und Animationen, die er sieht und anklickt. Das Backend ist der Teil, der auf einem Server läuft, den der Nutzer nie sieht. Es speichert und lädt Daten, wendet die Geschäftsregeln an, prüft, wer was tun darf, und spricht mit anderen Diensten wie Zahlungsanbietern und E-Mail. Beide Teile kommunizieren über eine API und bilden zusammen mit einer Datenbank eine „Full-Stack“-App.
Warum das beim Bauen mit KI wichtig ist
Wenn Sie einem KI-Builder eine App beschreiben, beschreiben Sie beide Hälften gleichzeitig, ob Ihnen das bewusst ist oder nicht. „Kunden können einen Termin buchen“ bedeutet ein Buchungsformular (Frontend), Regeln darüber, welche Termine frei sind (Backend), und einen Ort, an dem Buchungen gespeichert werden (Datenbank).
Die Trennung zu kennen, hilft in drei praktischen Punkten:
- Sicherheit. Alles im Frontend kann der Nutzer sehen und verändern. Regeln und Geheimnisse müssen im Backend liegen.
- Fehlersuche. „Die Schaltfläche reagiert nicht“ und „die Schaltfläche reagiert, aber nichts wird gespeichert“ weisen auf unterschiedliche Hälften hin. Wenn Sie sagen, was Sie sehen, findet die KI die Ursache schneller.
- Hosting und Kosten. Eine reine Frontend-Website ist günstig und einfach zu hosten. Ein Backend muss irgendwo laufen, was beeinflusst, was Sie zahlen und wie sich Ihre App im Leerlauf verhält.
Eine alltägliche Analogie
Stellen Sie sich ein Restaurant vor.
Das Frontend ist der Gastraum: die Speisekarte, die Tische, die Einrichtung, der Kellner, der die Bestellung aufnimmt. Er ist für Gäste gemacht, und sie können alles davon sehen und anfassen.
Das Backend ist die Küche und das Büro: die Köche, die Vorratskammer, die Kasse, die Regeln der Geschäftsleitung, wer einen Rabatt bekommt. Gäste gehen dort nicht hinein, und sie sollten es auch nicht können.
Die API ist die Durchreiche zwischen beiden: der Tresen, an dem Bestellungen hineingehen und Gerichte herauskommen, in einem vereinbarten Format. Die Datenbank ist die Vorratskammer und das Bestellbuch.
Ein Gast kann seinen Bestellzettel umschreiben (das Frontend liegt in seiner Hand), aber die Küche entscheidet trotzdem, was sie kocht und was sie berechnet. Deshalb gehören die wichtigen Prüfungen nach hinten.
Was jede Seite tut
| Frontend | Backend | |
|---|---|---|
| Läuft auf | Gerät des Nutzers, im Browser | Server, den Sie (oder Ihr Hoster) kontrollieren |
| Hauptaufgabe | Dinge anzeigen, Eingaben annehmen, auf Klicks reagieren | Daten speichern, Regeln anwenden, Berechtigungen durchsetzen, andere Dienste aufrufen |
| Können Nutzer den Code sehen und ändern? | Ja, er wird in deren Browser geladen | Nein |
| Kann es geheime API-Schlüssel enthalten? | Nein | Ja, in Umgebungsvariablen |
| Übliche Technologien | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Was schiefgehen kann | Layout bricht auf dem Handy, Schaltfläche tut nichts, langsame Seite | Daten werden nicht gespeichert, falsche Daten angezeigt, Fehler, Sicherheitslücken |
Manche Frameworks verwischen die Grenze. Next.js zum Beispiel erlaubt, dass ein Projekt sowohl Browser-Code als auch Server-Code enthält. Das Prinzip bleibt gleich: Die Frage lautet immer, wo läuft dieses Stück?
Ein Beispiel: eine Yoga-Stunde buchen
So läuft es ab, wenn jemand eine Yoga-Stunde bucht, Schritt für Schritt.
| Schritt | Wo | Was passiert |
|---|---|---|
| 1 | Frontend | Die Kursseite lädt und fragt das Backend nach den Stunden dieser Woche. |
| 2 | Backend | Liest Stunden und Buchungen aus der Datenbank, berechnet die freien Plätze und gibt die Liste als JSON zurück. |
| 3 | Frontend | Zeigt jede Stunde mit Uhrzeit, Lehrer und freien Plätzen an. |
| 4 | Frontend | Der Nutzer wählt eine Stunde und trägt Name und E-Mail ein. Das Formular prüft, ob die E-Mail gültig aussieht (als Service, keine Garantie). |
| 5 | Frontend → Backend | Sendet eine POST /api/bookings-Anfrage über die API. |
| 6 | Backend | Prüft die Eingaben erneut, kontrolliert, ob die Stunde noch frei ist, speichert die Buchung und lässt den E-Mail-Dienst mit einem geheimen Schlüssel eine Bestätigung senden. |
| 7 | Backend → Frontend | Gibt „gebucht“ oder „leider ausgebucht“ zurück. |
| 8 | Frontend | Zeigt den Bestätigungsbildschirm. |
Beachten Sie die Schritte 4 und 6: Die Eingabe wird zweimal geprüft. Die Prüfung im Frontend gibt sofort Rückmeldung; die Prüfung im Backend zählt wirklich, weil ein entschlossener Nutzer das Frontend komplett umgehen kann.
Häufige Begriffe erklärt
| Begriff | Bedeutung |
|---|---|
| Client / Server | Der Client ist der Browser (oder die App), der Anfragen stellt; der Server beantwortet sie. |
| UI | User Interface, also die Bildschirme und Bedienelemente. |
| API | Die vereinbarte Art, wie das Frontend das Backend um Daten oder Aktionen bittet. |
| Endpoint | Eine bestimmte URL der API, etwa /api/bookings. |
| Full Stack | Frontend, Backend und Datenbank zusammen. Siehe was eine Full-Stack-App ist. |
| Statische Website | Ein Frontend ohne eigenes Backend; für alle dieselben Dateien. |
| SPA | Single-Page-Application: ein Frontend, das die Seite im Browser aktualisiert, statt neue Seiten zu laden. |
| Server-Side Rendering (SSR) | Der Server erstellt das HTML der Seite, bevor er es sendet, was Geschwindigkeit und SEO helfen kann. |
| Umgebungsvariablen | Einstellungen und Geheimnisse, die dem Backend zur Laufzeit übergeben werden und nicht im Code stehen. |
Braucht Ihre App ein Backend?
| Wenn Ihre App … | Backend nötig? |
|---|---|
| Informationen zeigt, die für alle gleich sind | Nein |
| ein Kontaktformular hat, das nur eine E-Mail an Sie schickt | Meist ein kleines, oder ein Formulardienst |
| Daten speichert, die andere sehen | Ja |
| Logins und private Daten hat | Ja |
| Zahlungen annimmt | Ja, mindestens um Checkouts zu erstellen und Zahlungs-Webhooks zu empfangen |
| eine kostenpflichtige KI- oder andere API mit geheimem Schlüssel nutzt | Ja, damit der Schlüssel aus dem Browser herausbleibt |
Häufige Fehler und Missverständnisse
- Geheime Schlüssel im Frontend ablegen. Sie sind für jeden sichtbar, der die Entwicklerwerkzeuge des Browsers öffnet. Das ist der häufigste ernsthafte Fehler bei mit KI gebauten Apps.
- Regeln nur im Frontend durchsetzen. Eine Löschen-Schaltfläche für Nicht-Admins zu verstecken, schützt nicht; das Backend muss die Anfrage ablehnen.
- Annehmen, das Backend sei „nur die Datenbank“. Die Datenbank speichert Daten. Das Backend entscheidet, wer sie lesen und ändern darf und wie.
- Glauben, JavaScript bedeute Frontend. JavaScript und TypeScript laufen mit Node.js auch auf Servern.
- Die falsche Hälfte verdächtigen. Wenn die Seite richtig aussieht, die Daten aber falsch sind, liegt das Problem meist im Backend oder in der Datenbank, nicht im Design.
- Überbauen. Ein Portfolio braucht kein eigenes Backend. Eines hinzuzufügen, kostet Geld und bringt bewegliche Teile mit sich.
Was Sie Ihren KI-Builder fragen sollten
- „Welche Teile dieser App laufen im Browser und welche auf dem Server?“
- „Verschiebe alle API-Schlüssel ins Backend und lies sie aus Umgebungsvariablen.“
- „Prüfe jedes Formular auf dem Server und im Browser.“
- „Stelle im Backend sicher, dass nur Admins Buchungen löschen können.“
- „Die Seite sieht gut aus, aber die Daten werden nicht gespeichert. Prüfe die Backend-Logs für diese Anfrage.“
- „Das ist eine einfache Marketing-Website; halte sie rein im Frontend, solange wir kein Backend brauchen.“
Frontend und Backend in Mythex
Ein neues Mythex-Projekt startet mit einem Frontend aus Vite, React, TypeScript und Tailwind, und der Agent ergänzt ein Backend, wenn Ihre App es braucht. Sie können auch eine eigene API in Node, Python (FastAPI), C# oder Java verlangen, die im selben Projekt neben dem Frontend läuft. In der Vorschau wechseln Sie zwischen Website und API-Server, und beim Veröffentlichen werden beide bereitgestellt, mit Datenbank und Dateispeicher, wenn nötig. Die Dokumentation erklärt Apps mit mehreren Diensten, der Leitfaden zu Webhosting zeigt, wo jede Hälfte im Live-Betrieb läuft, und die App-Vorlagen sind ein schneller Weg, Full-Stack-Beispiele zu sehen.
Fragen
Was ist der Unterschied zwischen Frontend und Backend?
Das Frontend ist der Teil einer App, der im Browser des Nutzers läuft: die Seiten, Schaltflächen und Formulare, die er sieht. Das Backend läuft auf einem Server, den der Nutzer nie sieht. Es speichert Daten, wendet Geschäftsregeln an, prüft Berechtigungen und kommuniziert mit anderen Diensten.
Braucht jede App ein Backend?
Nein. Eine Marketing-Website, ein Portfolio oder eine einfache Landingpage kann rein aus einem Frontend bestehen. Sobald eine App gemeinsame Daten speichern, Nutzer anmelden, Zahlungen abwickeln oder geheime API-Schlüssel verwenden muss, braucht sie irgendeine Form von Backend.
Gehört HTML zum Frontend oder zum Backend?
HTML, CSS und JavaScript, die im Browser laufen, gehören zum Frontend. JavaScript kann mit Node.js auch auf einem Server laufen, dann ist es Backend-Code. Nicht die Sprache entscheidet, sondern der Ort, an dem der Code läuft.
Was bedeutet Full Stack?
Full Stack heißt, Frontend und Backend (und meist die Datenbank) gleichermaßen abzudecken. Eine Full-Stack-App hat alle drei Teile, und ein Full-Stack-Entwickler arbeitet an allen dreien.