Frontend und Backend.

Das Frontend ist der Teil einer Website oder App, den Nutzer sehen und bedienen — Layout, Texte, Formulare, Animationen. Das Backend ist der Teil im Hintergrund, der Daten speichert, Logik ausführt und mit anderen Systemen spricht — Server, Datenbank, Schnittstellen und Verwaltungsoberfläche.

Frontend und Backend — ausführlich erklärt

Ein Restaurant ist ein gutes Bild: Das Frontend ist der Gastraum mit Speisekarte, Tischen und Service. Das Backend ist die Küche mit Vorräten, Rezepten und Bestellsystem. Gäste sehen die Küche nie, merken aber sofort, wenn sie nicht funktioniert. Bei einer Website ist das Frontend alles, was im Browser passiert — HTML, CSS und JavaScript. Das Backend läuft auf dem Server: Es nimmt Formulareingaben entgegen, prüft Logins, rechnet Preise, speichert Daten und verschickt E-Mails.

Typische Frontend-Technologien sind HTML, CSS, JavaScript und Frameworks wie React oder Next.js. Im Backend kommen Programmiersprachen wie JavaScript (Node.js), PHP oder Python zum Einsatz, dazu Datenbanken wie PostgreSQL oder MySQL und APIs für die Verbindung zu anderen Systemen. Wer beide Seiten beherrscht, wird Full-Stack-Entwickler genannt. Moderne Frameworks verwischen die Grenze: Mit Next.js laufen Teile der Logik auf dem Server und Teile im Browser, im selben Projekt.

Für Auftraggeber ist die Unterscheidung vor allem bei Offerten wichtig. Eine reine Informationswebsite hat ein schlankes Backend — ein CMS oder gar keines, wenn die Inhalte im Code liegen. Ein Buchungssystem, ein Kundenportal oder eine Web-App hat dagegen ein umfangreiches Backend mit Benutzerverwaltung, Rechten, Datenbank, Benachrichtigungen und Auswertungen. Der sichtbare Teil kann in beiden Fällen ähnlich aussehen; der Aufwand dahinter unterscheidet sich um ein Vielfaches.

Die meisten Probleme entstehen an der Schnittstelle. Ein Frontend, das Eingaben nur im Browser prüft, ist unsicher, weil jede Prüfung im Browser umgangen werden kann — die verbindliche Validierung gehört ins Backend. Umgekehrt nützt das beste Backend wenig, wenn das Frontend langsam lädt oder auf dem Handy schlecht bedienbar ist. Gute Projekte planen beide Seiten gemeinsam, statt sie an getrennte Teams ohne Absprache zu vergeben.

Beispiel: Gleiche Oberfläche, anderes Backend

Zwei Restaurants wollen eine Reservationsmöglichkeit auf der Website. Das erste bettet ein Standard-Buchungstool per Widget ein — das Backend gehört dem Anbieter, die Website zeigt nur das Formular. Das zweite lässt eine eigene Lösung bauen: Reservationen landen in der eigenen Datenbank, das Team erhält Push-Nachrichten, plant die Belegung und exportiert Kundenlisten. Für Gäste sehen beide Formulare ähnlich aus. Im zweiten Fall ist das Backend ein eigenes Produkt, das gebaut, gehostet und gewartet wird.

Wie so etwas konkret aussieht, zeigt die Referenz Han Kitchen und die Seite Restaurant-Reservationssystem. Wann sich ein eigenes Backend lohnt, besprechen wir bei der Web-App-Entwicklung.

Weiterführende Seite

Webentwicklung Zürich

Im Blog vertieft

Web-App, Website, App: der Unterschied

Häufige Fragen zu Frontend und Backend

Ein Full-Stack-Entwickler arbeitet sowohl am Frontend als auch am Backend: an der Oberfläche im Browser, an der Logik auf dem Server und an der Datenbank. Bei kleineren Projekten ist das effizient, weil eine Person das Zusammenspiel überblickt.

Nicht im engeren Sinn. Eine statische Website kann ohne eigene Datenbank auskommen; Formulare werden dann über einen Dienst oder eine kleine Serverfunktion verarbeitet. Sobald Logins, Buchungen, Shops oder eigene Daten ins Spiel kommen, braucht es ein Backend.

Bei Headless sind Frontend und Backend vollständig getrennt und kommunizieren nur über eine API. Das Backend, etwa ein Headless-CMS, liefert Inhalte; das Frontend stellt sie dar. Mehr dazu im Eintrag Headless-Architektur.

Bereit für Ihr Projekt?

Wenden Sie dieses Wissen auf Ihre Website an — DLM Digital hilft Ihnen dabei.

Kosten berechnen Alle Begriffe