Single-Page-Application (SPA)

Eintrag zuletzt aktualisiert am: 25.03.2023

Man unterscheidet heute Webarchitekturen zwischen (klassischen) Multi-Page-Application (MPA) und (modernen) Single-Page-Application (SPA).
Bei einer Multi-Page-Application (MPA) werden die HTML-Inhalte für komplette Webseiten bereits auf dem Webserver aus den verfügbaren Daten gerendert (man spricht von Server-Side-Rendering – SSR) und zum Webbrowser gesendet. Eine Multi-Page-Application muss bei einem Ansichtswechsel (z.B. durch einen Klick auf einen Hyperlink oder eine Schaltfläche) immer einen Rundgang (engl. Roundtrip) zwischen Webbrowser und Webserver durch eine neue HTTP-Anfrage durchführen. Mit dem Eingang der HTTP-Antwort vom Webserver wird die gesamte Seite im Webbrowser ausgetauscht. Der Benutzer nimmt dabei den Seitenaustausch wahr und landet in der Regel – unabhängig von der vorherigen Scrollbar-Position – landet wieder am Anfang der neuen Seiten

Im Gegensatz zu Multi-Page-Application kann eine Single-Page-Application (abgekürzt: SPA, alias Single-Page-Web-Application) Ansichtswechsel im Webbrowser eigenständig durch Austausch von Seitenelementen im Document Object Model (DOM) des Webbrowsers via JavaScript vollziehen – ohne den Webserver zu konsultieren. Das Rendering von Daten findet auf dem Client statt: Client-Side-Rendering (CSR).

Bei einer Single Page Application (SPA) wird nur initial eine komplette HTML-Seite oder zumindest das Grundgerüst einer Webseite in einem HTML-Dokument zusammen mit JavaScript-Code vom dem Webserver geladen. Danach kann die SPA autonom arbeiten. Oft braucht die SPA aber beim Ansichtswechsel weitere Daten. Die Daten können von dem Webserver, von dem das Grundgerüst stammt, oder einem anderen Webserver über Webservices (meist REST-basierte Dienste, alias Web-APIs) geladen werden. Das Datenaustauschformat mit dem Webservice ist meist JSON, XML ist aber möglich. Die SPA rendert dann die von dem Webservice erhaltenen Daten zu einer neuen Ansicht. Der Webservice kann auch fertige HTML-Fragmente liefern, die die SPA dann nur noch in die Webseite einsetzt.

SPAs unterstützten auch oft einen Rückkanal vom Server, d.h. Sie erhalten vom Server aktuelle Daten automatisch auch ohne Benutzerinteraktion. Manche Autoren sprechen hier von "Echtzeitfähigkeit", was aber im engeren Sinne eine falsche Verwendung dieses Begriffs ist. SPAs können auch offline-fähig programmiert werden.

Eine Mischform zwischen MPA und SPA entsteht durch Server-Side-Pre-Rendering.