SPA (Single Page Application)

Was ist eine Single Page Application?

Eine Single Page Application lädt ein HTML-Dokument und schreibt dann den sichtbaren Inhalt mit JavaScript um, während der Nutzer navigiert. Der Browser lädt die Seite nie vollständig neu. Ein Klick auf einen Link tauscht die Ansicht aus, holt die benötigten Daten über eine API und aktualisiert den Bildschirm an Ort und Stelle. Das Ergebnis fühlt sich näher an einer Desktop-Anwendung an als an einer klassischen Website.

Das ist das Modell hinter Frameworks wie React, Vue und Angular. Der Kompromiss ist real. SPAs bieten nach dem ersten Laden eine schnelle, flüssige Navigation und eine saubere Trennung von Frontend und Backend, doch das anfängliche Bundle ist schwerer, und Suchmaschinen und Social-Crawler taten sich historisch schwer mit Inhalten, die erst existieren, nachdem JavaScript läuft. Genau dieses letzte Problem ist der Grund, warum serverseitiges Rendering und statische Generierung als Begleiter des SPA-Modells existieren. Ein Projektmanagement-Tool, in dem ein Nutzer Karten zwischen Spalten zieht, Aufgaben filtert und an Ort und Stelle bearbeitet, ohne dass die Seite je flackert, ist eine Lehrbuch-SPA.

Eine SPA steht im Gegensatz zu einer Multi-Page-Anwendung, bei der jede Route ein eigenes, vom Server ausgeliefertes Dokument ist. SPAs gewinnen bei der Interaktivität. Multi-Page-Apps gewinnen bei Einfachheit und Geschwindigkeit beim ersten Laden. Die meisten ernsthaften Produkte mischen am Ende beides.

SPAs bei Dallonses

Eine SPA ist die richtige Wahl, wenn die Oberfläche wirklich eine Anwendung ist: viel Interaktion, Live-Zustand, viel Bearbeitung an Ort und Stelle. Sie ist die falsche Wahl, wenn jemand aus Gewohnheit dazu greift für etwas, das eigentlich eine Content-Seite ist. Wir haben reichlich von der zweiten Sorte geerbt, bei der eine Marketingseite als Fünf-Megabyte-SPA ausgeliefert wurde und Google sie kaum sah. Teil unserer Arbeit an Webanwendungen ist zu wissen, welches Problem wir tatsächlich haben, bevor wir die Form wählen.

Wenn wir doch eine bauen, zählt die Architektur mehr als das Framework. Klares Data Fetching, sinnvolles Code Splitting, damit das erste Laden leicht bleibt, und eine Rendering-Strategie, die die App auffindbar hält. Wir verbinden die Entwicklung individueller Web-Apps mit dem API-Design dahinter, denn eine SPA ist nur so gut wie der Vertrag, mit dem sie spricht. Beides wird zusammen gebaut, nicht hinterher angeschraubt.

Bauen Sie etwas, das interaktiv genug ist, um eine SPA zu brauchen? Setzen wir die Architektur von Anfang an richtig auf.

Sprechen Sie mit uns über Ihre App