Defninition „Single-Page-Webanwendung“ Was ist eine Single Page App?

Eine Single Page App besteht nur aus einem einzigen HTML-Dokument und kann Inhalte dynamisch nachladen. Diese Form der Web-Architektur entlastet die Server, da die App vom Client ausgeführt wird. In der Praxis erlaubt dies noch weitere Features.

Eine klassische Webanwendung besteht aus mehreren HTML-Dokumenten, die untereinander verlinkt sind, im Gegensatz hierzu nutzt eine Single Page App nur eine einzige HTML-Seite als Grundlage für ihre Funktionalität. Dies bedeutet, dass die Kommunikationslast zwischen Client und Server reduziert wird.

In der praktischen Anwendung wird also darauf verzichtet, dass zwischen mehreren Webseiten navigiert werden muss. Für den Client bedeutet dies eine kürzere Wartezeit und eine Site, die dank Single Page App besser, schneller und flüssiger reagiert.

Statt auf das Neuladen einer Seite zu warten und den eigenen Browser Inhalte neu rendern zu lassen, werden Webinhalte sofort im gewünschten Framework dargestellt oder aber durch Übergänge miteinander verbunden. Doch auch für die Server bedeutet dies Entlastung, da weniger Daten ausgetauscht werden müssen. Zu den berühmten Beispielen der Single Page Apps zählen etwa G-Mail, Google Maps, Netflix, Facebook oder Twitter.

Mehr Geschwindigkeit mit einer Single Page App

Gerade weil die Single Page App ihr Interface behält und Inhalte dynamisch in die Seite nachlädt, haben User zu keinem Zeitpunkt das Gefühl, dass etwas hakt oder sie längere Zeit warten müssen. Daher werden Single Page Apps auch gerne eingesetzt, wenn Websites eine hohe Drop Off-Rate beklagen.

Der Workflow bleibt so flüssig und nahtlos, das ist beim Browsen der Filmauswahl eines Streaming-Dienstes bequem, für die Ausführung von webbasierter Textverarbeitung aber unerlässlich. Im Vergleich hierzu muss eine Multi Page App jedes Mal den gesamten Content neu laden, sobald der Client die Seite wechselt.

Dies funktioniert für Seiten mit vielen statischen Inhalten, die über viele Unterseiten verbunden sind. Vor allem die Größe der Web Apps ist hier ausschlaggebend, so nutzen Amazon oder eBay beispielsweise den Ansatz einer Multi Page App.

Weil bei der Single Page App die für den User wichtigsten Ressourcen so wie der HTML- oder CSS-Code bereits beim ersten Mal geladen werden und geladen bleiben, müssen nur neue Daten dynamisch nachgeladen werden. Am Beispiel des Facebook Feeds wäre dies etwa die Aktualisierung durch neue Posts.

Weil dieser Content aber nur stückchenweise nachgeladen werden muss, sinkt die Serverlast. Das hilft nicht nur großen Websites wie Google oder Facebook, auch KMUs und kleinere Online-Shops können dadurch die benötigten Server reduzieren.

Vorteile in der Entwicklung und Weiterentwicklung

Auch in der Entwicklung sind die Ressourcen, die für die Programmierung einer Single Page App benötigt werden, vergleichsweise gering. Es gibt eine Vielzahl verfügbarer JavaScript-Frameworks, die als Basist für eine Single Page App genutzt werden können. Zu den bekanntesten Beispielen zählen etwa React, Angular oder Vue.

Für die Entwicklung einer Mobile App kann außerdem das gleiche Backend wie in der Single Page App genutzt werden. Diese Implementierung ist wesentlich einfacher als dies bei einer Multi page App der Fall wäre. Im Design lässt sich das Frontend der SPA zudem vergleichsweise leicht anpassen.

Auf Client-Seite zeigen sich jedoch nicht nur die kürzeren Ladezeiten positiv, sondern auch Funktionen wie eine Offline-Nutzung. Daten können in der Single Page App einmal angefordert und dann lokal gespeichert werden, was die Weiternutzung auch bei einem Verbindungsverlust erlaubt. Wird die Verbindung wiederhergestellt, werden schlicht die lokalen und die serverseitigen Daten abgeglichen und neue Inhalte geladen.

Und weil sich auch der gesamte Code auf nur einer Seite befindet, wird auch der Debugging-Prozess enorm erleichtert. Das Debugging funktioniert beispielsweise ganz einfach in Chrome.

Grenzen einer Single Page App

All dies bedeutet aber nicht, dass auch Single Page Apps nicht ihre Schwächen hätten. So fällt es Crawlern etwa schwerer, diese zu indizieren, da sie zunächst das leere Framework ohne Inhalte sehen. Lösungen wie Isomorphic JavaScript können diese Lücke aber schließen.

Auch für formularbasierte Websites mit einfachen Eingabemasken ist der Umstieg auf eine Single Page App meist nicht weiter relevant. Validierungsmethoden wie serverseitig rendernde Frameworks führen hier zu einer schnelleren Umsetzung. Natürlich müssten bestehende Websites auch erst einmal migriert werden, was zusätzliche Ressourcen verlangt.

Die Vorteile einer Single Page App reichen oftmals nicht aus, um diesen Mehraufwand zu rechtfertigen. Die Skalierbarkeit stellt Single Page Apps ebenfalls häufig vor Probleme, da zu viele neue Features zulasten der initialen Ladezeit und der Übersichtlichkeit gehen. Dies führt oftmals zwangsweise zu einem kompletten Redesign.

(ID:46587114)