Single Page Applications (SPA): Erklärung, Vorteile und Beispiele

So intuitiv wie Gmail, so interaktiv wie Facebook, so unterhaltsam wie Netflix: was davon können Sie über Ihre digitalen Angebote behaupten?

Mit einer Single Page Application (SPA) schaffen Unternehmen für ihre Kunden ähnlich großartige Digital Experiences wie die beliebten Webseiten, die wir jeden Tag nutzen – ohne millionenschwere Budgets und Teams mit dutzenden von Entwicklern!

Was ist eine Single Page Application? Welche Chancen bietet sie für Ihr Marketing? Was sind die technischen Vorteile und Herausforderungen? Und wie funktioniert das Content Management für diese Art Websites? Dieser Artikel führt Sie ins Thema ein.

Eine normale Webseite besteht aus vielen Einzelseiten. Bei jedem Klick eines Nutzers wird jeweils eine einzelne neue Seite vom Webserver geladen.

Bei einer Single Page Application (oder Single-Page-Webanwendung) dagegen wird die gesamte Anwendung im Browser des Nutzers auf einmal geladen. Führt der Nutzer eine Aktion aus, wird nur ein Teil der Website oder bestimmte Inhalte verändert: etwa die neuesten Tweets in Ihrem Twitter-Feed. Der Rest der Anwendung bleibt davon unberührt, er muss nicht neu geladen werden.

Single Page Applications eignen sich zum Beispiel für Community-Webseiten mit nutzergeneriertem Content oder für Webseiten mit großen Mengen an dynamischen Content, der sich laufend ändert, und mit vielen interaktiven Elementen. Sie sind sehr schnell und komfortabel und fühlen sich für Nutzer an wie eine richtige App.

Die Funktionsweise eine SPA verstehen Sie am besten im Vergleich mit einer normalen Website.

Wenn ein Nutzer eine normale Website besucht, sendet sein Browser eine Anfrage an den Server, auf der die Website liegt. Der Server generiert dann die betreffende einzelne Seite und sendet sie an den Browser des Nutzers, inklusive der gesamten HTML-Struktur und der Inhalte.

Navigiert der Nutzer auf eine andere Seite oder aktualisiert die Seite, wiederholt sich jedes Mal derselbe Prozess: Der Browser sendet (mindestens) eine Anfrage an den Server, und der liefert wieder eine komplette Seite.

Auf dieser Grafik wird der Ablauf dargestellt:

Der technische Nachteil: der Server ist permanent beschäftigt und bei vielen gleichzeitigen Nutzern wird er stark belastet. Er sendet wieder und wieder die gleichen Daten.

Bei einer SPA wird die gesamte Seite nur einmal vom Server in den Browser des Nutzers geladen: beim ersten Aufruf. Dabei werden unter Umständen auch Bereiche oder Funktionen geladen, die noch nicht sichtbar sind.

Navigiert der Nutzer nun auf eine andere Seite oder nutzt eine Funktion, wird nicht die komplette Seite neu geladen. Nur der Bereich oder die Inhalte, die sich ändern, werden neu geladen. Wenn diese Inhalte bereits beim ersten Aufruf im Hintergrund geladen wurden, stehen sie sofort zur Verfügung. Wenn nicht, werden diese einzelnen Inhalte neu vom Server angefordert – aber wie erwähnt nicht die komplette Seite.

Bereiche wie die Kopfzeile mit Logo, die Navigationsmenüs oder andere, sich nicht verändernde Elemente bleiben immer dieselben, wie etwa in einer lokal installierten Software.

Die folgende Grafik zeigt den Ablauf schematisch:

Der technische Vorteil: der Server wird viel weniger beansprucht, er muss seltener und weniger Daten senden. Die Seite reagiert deutlich schneller.

Single Page Apps werden mit Frontend JavaScript Frameworks wie React, Angular, Vue, Ember.js, Meteor.js oder Knockout.js entwickelt.

Was zunächst abstrakt und rein technisch klingt, hat für Marketer und Customer Experience Designer handfeste Vorteile.

Sie können es sich vorstellen: Nutzer lieben die einfache, intuitive Bedienung einer Single Page Application. Obwohl sie technisch gesehen eine Webseite ist, fühlt sie sich wie eine native Smartphone-App an. Jeder Button reagiert sofort und alle Inhalte sind in Sekundenbruchteilen verfügbar. Mit einer Single Page Application können Sie Web-Apps mit großartiger Usability erschaffen, die Ihre Kunden jeden Tag gerne benutzen.

Da die App aus einzelnen Komponenten besteht, ist ihr Layout sehr flexibel. Auf jedem Endgerät sieht der Nutzer ein optimiertes, responsives Layout. Sie können Zielgruppen festlegen oder Nutzern basierend auf deren bisheriger Nutzung oder geografischem Standort personalisierte Inhalte anzeigen.

Ein Beispiel: Ein Nutzer einer bestimmten Zielgruppe, der unterwegs mit dem Smartphone surft, sieht ein komplett anderes Layout und andere Inhalte als ein Nutzer, der zu Hause am Tablet sitzt – obwohl es dieselbe App ist, die auf denselben Pool an Inhalten zugreift.

Zusammengefasst: Mit einer Single Page Application schaffen Sie perfekte personalisierte Digital Experiences für Ihre Kunden, über alle digitale Kanäle und Touchpoints hinweg (Omnichannel-Experiences). Sie bekommen die kreative Freiheit und die Werkzeuge, um Ihre Content-Kampagnen eins zu eins umzusetzen.

Auch in der Entwicklung und im IT-Betrieb bieten Single-Page-Webanwendungen einige Vorteile gegenüber herkömmlichen Multi-Page-Websites.

Die SPA wird im Browser einmalig geladen. Wenn ein User eine Anfrage sendet, gibt der Server die angeforderten Daten in einem Format wie JSON zurück. Somit muss nicht jedes Mal die gesamte HTML-Struktur der Seite neu geladen werden.

Dadurch schonen SPAs die Bandbreite und Serverressourcen. Unter anderem deshalb werden Websites, die täglich millionenfach aufgerufen werden, als Single Page Application umgesetzt SPAs.

Anstatt Unmengen von serverseitigem Code zu durchsuchen, müssen Entwickler lediglich den im Browser gerenderten JavaScript-Code prüfen. Viele der JavaScript-Frameworks, mit denen SPAs ausgeführt werden, verfügen über eigene Tools zur Fehlerbehebung. Sie sind zum Beispiel als Plug-ins für den Chrome-Browser verfügbar – teure Software ist unnötig.

Anhand dieser Tools können die Entwickler relativ einfach analysieren, wie die Seitenelemente angezeigt werden, wie die Seite Daten vom Server abfragt und wie die Seite Daten zwischenspeichert.

Eine Single Page Anwendung lässt sich sehr einfach in eine native, mobile App verwandeln. Entwickler können dabei einen Großteil des vorhandenen Codes wiederverwenden. Da der gesamte Content auf einmal geladen wird, können SPAs ohne Nachladen gescrollt werden und eignen sich deshalb besonders für die Einbettung in mobile Apps eignen.

Aus SPAs werden auch häufig sogenannte Progressive Web Apps (PWA) gebaut: eine Mischung aus Website und mobiler App. Sie bieten Nutzern bestimmte zusätzliche Funktionen bieten, wie Push-Benachrichtigungen, Offline-Zugriff und lokales Caching.

Bei allen Vorzügen für Marketing und IT haben auch Single Page Apps ihre Nachteile und Herausforderungen:

Bei einer SPAs wird die gesamte Anwendung auf einmal geladen – auch Inhalte, die anfangs eventuell noch nicht sichtbar sind. Dadurch kann das Laden anfangs wesentlich länger dauern als bei einer vergleichbaren Website, bei der jeweils nur eine Seite geladen wird. Die Ladezeit hängt davon ab, wie komplex der JavaScript-Code ist, der zum Ausführen verwendet wird – manchmal ist etwas Geduld der Nutzer gefordert.

Da eine SPA technisch gesehen nur aus einer Seite besteht, gibt es auch nur eine URL (Webadresse). Unter dieser URL werden jedoch die verschiedensten Inhalte angezeigt, fast jeder Nutzer sieht etwas anderes.

Suchmaschinen wie Google lesen Websites jedoch basierend auf ihren URLs. Sie ermitteln etwa für jede URL die relevanten Keywords, oder analysieren, wie viele Links von anderen Websites auf diese URL zeigen.

Obwohl Google und andere Suchmaschinen ihre Indexierungsroutinen angepasst haben, können Entwickler und Marketer SPAs nur eingeschränkt oder über Umwege für bessere Rankings in den Suchergebnissen optimieren.

Single Page Applications werden mit client-seitigem JavaScript ausgeführt. Dadurch sind sie Anwendungen anfällig für Angriffe, einschließlich Cross-Site Scripting (XSS). Bei diesen Angriffen können Hacker schädliche Skripts in webbasierte Anwendungen einschleusen.

Ohne entsprechende Vorkehrungen können sich Hacker dadurch Zugang zu sensiblen Daten eines Websitebetreibers verschaffen, etwa zu Passwörtern oder Zahlungsdaten von Kunden.

SPAs eignen sich hervorragend für Websites,

Soziale Netzwerke wie Facebook und Twitter oder Anwendungen wie Gmail und Google Maps sind gute Beispiele dafür.

Entwickler können SPAs auch als Backbone (oder „Ausgangsversion“) für mobile Apps nutzen. Dank plattformübergreifender Frameworks, wie React Native, können SPAs schnell und einfach auf mobile Apps übertragen werden. Da alle Apps eine gemeinsame Basis haben, bekommen Nutzer auf allen Geräten und Betriebssystemen eine einheitliche Experience.

Wann ist eine SPA nicht die richtige Lösung? Kurz gesagt dann, wenn sie die oben genannten Kriterien nicht erfüllt. Wenn Ihre Website oder Anwendungen hauptsächlich aus statischem Content besteht, wie bei einem Blog, ist eine Single Page Application nicht zu empfehlen.

Die meisten Vorteile einer SPA kommen dann nicht zum Tragen und die aufwendigere Entwicklung würde sich nicht lohnen. Auch wenn SEO im Vordergrund steht, ist eine Mehrseiten-Website aus den oben beschriebenen Gründen die bessere Wahl.

Damit Ihr Marketing mit einer SPA effizent arbeiten kann, brauchen Sie ein geeignetes CMSbrauchen Sie ein geeignetes CMS (Content Management System). Bekannte CMS wie Typo3 oder WordPress eignen sich nicht dafür. Warum sind Single Page Applications eine Herausforderung ans Content-Management?

Auf jedem Kanal und für jeden Nutzer sehen das Layout der App und die Inhalte anders aus. Trotzdem möchten Sie jeden Inhalt nur einmal pflegen, und nicht für jeden möglichen Fall den gleichen Inhalt nochmals erstellen oder neue Layouts bauen. Außerdem können Sie den Content nicht auf Basis von „Seiten“ strukturieren, wie bei einer normalen Website.

Deswegen setzen Unternehmen auf sogenannte Headless CMS. Darin pflegen Sie Inhalte zentral und – das ist der Kern von Headless – unabhängig von einem Frontend. In vorher definierten Templates haben Sie die Frontend-Layouts für die einzelnen Kanäle festgelegt. Die Single Page Application (das Frontend) holt sich nun über Schnittstellen jeweils die benötigten Komponenten und Inhalte aus dem CMS und zeigt sie dem Nutzer an.

Dadurch können Sie Inhalte in Omnichannel-Szenarien sehr effektiv pflegen: Es können viele weitere Apps oder andere Kanäle an das CMS angebunden werden. Alle greifen auf dieselben Inhalte zu und können diese jeweils in einem ganz anderen Layout oder sogar personalisiert anzeigen.

Ebenso sind Sie mit einem Headless CMS sind nicht an eine bestimmte Frontend-Technologie oder an einen Hersteller gebunden. Warum ist das für Marketing wichtig?

Stellen Sie sich vor, Sie möchten Trends schnell aufnehmen, zum Beispiel Wearables als neue Touchpoints an Ihr CMS anbinden. Würden Sie warten wollen, bis der CMS-Hersteller dafür die nötige Unterstützung anbietet – und alle Wettbewerber auf den Zug aufspringen? Mit einem Headless CMS können Sie neue Technologien und Tools sofort anbinden – und sich an die Spitze eines Trends setzen.

Die IT spart sich dadurch ebenso eine Menge Arbeit. Statt eigene Erweiterungen für das CMS zu schreiben oder alle paar Jahre einen kompletten Relaunch durchzuführen, kann es neue Systeme, Kanäle und Apps einfach anbinden und wieder abschalten.

Für Content-Autoren ist die Arbeit mit reinen Headless CMS jedoch eher kein Vergnügen. Sie pflegen die Inhalte komplett getrennt vom Frontend. Die Inhalte geben sie in Formulare und vorgefertigte Templates ein, ohne den genauen Kontext zu kennen.

Sie bekommen lediglich eine ungefähre Vorschau der Inhalte: Die Single Page Application spielt im Frontend jedem Nutzer eine individuelle Ansicht aus. Das heißt, Marketer haben keine Chance, die Inhalte so zu sehen, wie 99 % der Nutzer sie sehen.

Anpassen können Sie die Frontend-Layouts ebenfalls nicht. Für jede Änderung brauchen Sie die IT, Wartezeiten und endlose Korrekturschleifen inklusive. Klingt nicht gerade verlockend, oder?

Ein Visual SPA Editor hebt diesen Nachteil auf. Marketer bearbeiten darin die Inhalte wie auf einer herkömmlichen Webseite. Sie sehen die Inhalte in einer Live-Vorschau exakt so, wie sie im Frontend aussehen, im jeweiligen Kontext: echtes WYSYWIG. („What you see is what you get.“)

Der Editor simuliert in der Vorschau personalisierte Ansichten der Single Page Application für verschiedene Zielgruppen, Touchpoints und Endgeräte – und zwar für jede denkbare Kombination! Die Content-Manager können Layouts selbst anpassen, Komponenten entfernen, hinzufügen und neu anordnen. Programmierkenntnisse brauchen sie dazu nicht. Nur bei größeren Änderungen müssen sie die IT ins Boot holen.

Möchten Sie erfahren, wie der Magnolia Visual SPA Editor im Detail funktioniert? Laden Sie sich kostenlos den Product Brief herunter.