Eine Single Page Application ist eine Website, bei der der Browser ein einziges Dokument lädt und alle weiteren Ansichten selbst zusammensetzt. Beim Klick auf einen Menüpunkt holt JavaScript nur die benötigten Daten nach und tauscht den Inhaltsbereich aus. Gebaut werden SPAs mit Frameworks wie React, Vue oder Svelte. Für den Besucher wirkt das flüssiger, weil zwischen zwei Ansichten kein weißer Moment liegt.
- Single Page Application (SPA)
Website, die einmal geladen wird und danach jeden Ansichtswechsel im Browser selbst zusammensetzt, ohne ein neues Dokument zu holen.
Beispiel: „Das Buchungstool ist eine Single Page Application, die Seiten drumherum liefert das CMS ganz normal aus.“Kurzform: SPA. Der Gegenbegriff ist die Multi Page Application, bei der der Server für jede Adresse ein eigenes HTML-Dokument ausliefert.
Häufige Verwechslung: Ein Onepager ist etwas anderes. Er ist eine einzelne Seite mit allen Inhalten untereinander, während eine SPA beliebig viele Ansichten kennt und zwischen ihnen ohne neues Dokument wechselt.
Den Seitenaufbau übernimmt der Browser
Bei einer klassischen Website beantwortet der Server jede Adresse mit einem fertigen HTML-Dokument. Bei einer SPA schickt er einmal ein weitgehend leeres Grundgerüst und ein JavaScript-Bündel. Ab da entscheidet der Browser, was zu sehen ist, und fragt beim Server nur noch Daten an.
Das verschiebt Arbeit vom Server auf das Gerät. Der erste Aufruf dauert länger, weil das Bündel geladen und ausgeführt werden muss, jeder weitere Wechsel geht dafür schneller. Auf einem älteren Telefon fällt der erste Teil dieser Rechnung deutlicher aus als auf dem Entwicklungsrechner, weshalb wir SPAs grundsätzlich auf echter Hardware prüfen.
Was eine SPA für die Auffindbarkeit bedeutet
Google rendert JavaScript und indexiert auch Inhalte, die erst im Browser entstehen. Das passiert in einem zweiten Durchgang nach dem Crawling und dauert länger als bei fertig ausgeliefertem HTML. Andere Systeme lesen weniger zuverlässig: Die Vorschau-Bots sozialer Netzwerke und ein Teil der Crawler, die Sprachmodelle mit Inhalten versorgen, werten überwiegend das ausgelieferte Dokument aus.
Daraus folgen Anforderungen, die im Projekt gern untergehen. Jede Ansicht braucht eine eigene Adresse, die auch beim direkten Aufruf und nach einem Neuladen funktioniert. Titel und Meta-Beschreibung werden je Ansicht gesetzt, und eine unbekannte Adresse wird mit dem Statuscode 404 beantwortet. Für öffentliche Inhalte empfehlen wir Server-Side Rendering, wie es Next.js für React oder Nuxt für Vue mitbringen.
Wann sich der Aufbau rechnet
Die SPA ist das Werkzeug für Anwendungen: Konfiguratoren, Buchungsstrecken, Dashboards, alles hinter einem Login. Dort wechselt jemand häufig zwischen Ansichten, der Zustand soll dabei erhalten bleiben, und die Suchmaschine spielt keine Rolle.
Für Inhaltsseiten ist der Aufwand meist höher als der Gewinn. In unseren Projekten hat sich die Mischung bewährt: Der öffentliche Teil kommt als fertiges HTML aus dem CMS, der Anwendungsteil läuft als SPA darin. So bleiben die Inhalte schnell auffindbar, und das Werkzeug bedient sich wie ein Programm.