Eine Single Page Application (SPA) ist eine Webanwendung, die aus genau einer HTML-Seite besteht. Beim Klick auf Links wird die Seite nicht neu geladen – stattdessen tauscht JavaScript die Inhalte direkt im Browser aus und holt nur die benoetigten Daten vom Server.
Wie funktioniert eine SPA?
Beim ersten Aufruf laedt der Browser die komplette Anwendung: HTML-Geruest, Styles und JavaScript. Danach kommuniziert die Seite per AJAX oder der Fetch-API mit dem Server und tauscht Teile der Oberflaeche aus – meist im Format JSON. Die Navigation innerhalb der App uebernimmt die History-API des Browsers, sodass Zurueck- und Vorwaerts-Buttons trotzdem funktionieren.
Bekannte Frameworks fuer SPAs sind React, Vue und Angular – sie organisieren die Oberflaeche in wiederverwendbaren Komponenten.
Vorteile
- Schnelle, fliessende Bedienung ohne staendige Seiten-Reloads
- Weniger Server-Last, weil das HTML nur einmal ausgeliefert wird
- App-artiges Gefuehl, kombinierbar mit PWA-Techniken
Nachteile und Grenzen
- Laengere Erste-Ladezeit, weil viel JavaScript uebertragen wird
- Suchmaschinen brauchen spezielles Rendering, damit Inhalte indexiert werden
- Ohne JavaScript laeuft die Anwendung nicht
Der klassische Gegensatz ist die Multi Page Application (MPA): Dort rendert der Server jede Seite komplett und der Browser laedt sie bei jedem Klick neu. Viele moderne Anwendungen kombinieren beide Ansaeze.
Verwandte Grundlagen: Frontend, Framework, REST, API, CORS, WebSocket.