Definition: Was ist eine Single Page Application (SPA)?
Bei einer Single Page Application (SPA) wird die gesamte Anwendung beim ersten Aufruf im Browser (z. B. Google Chrome oder Edge) des Nutzers oder der Nutzerin geladen. Bei weiteren Interaktionen mit der Website verändert sich die Seite entsprechend des getätigten Nutzerbefehls. Inhalte müssen dann aber nicht erneut vom Server angefordert werden.
Bei "herkömmlichen" Seiten, sogenannten Multi-Page-Anwendungen, werden aufgerufene Seiten immer wieder vom Webserver abgerufen. Dieser Ablauf wiederholt sich immer dann, wenn eine neue Landingpage aufgerufen oder die bestehende Seite aktualisiert wird.
Beispiel: Das soziale Netzwerk Twitter ist eins der bekanntesten Beispiele für eine Single Page Application. Der Content ist hochdynamisch und kann über das Auslassen sich wiederholender Server-Anfragen schnell und effizient geladen werden. Weitere bekannte SPAs sind Google Maps und Gmail.
Funktionsweise: Was sind Java-Script Frameworks und warum sind sie für SPAs so wichtig?
Nur ein einziges HTML-Dokument ist notwendig, um eine Single Page Application anzeigen zu lassen. In diesem Dokument ist neben CSS-Darstellungselementen das DOM-Element (Document Object Model) hinterlegt. Dieses ist für die Strukturierung des zugrundeliegenden HTML-Dokuments zuständig und verbindet das dynamische JavaScript (JS) mit den statischen HTML-Elementen. Der JavaScript-Code ist hier oft in Form von sogenannten JS-Frameworks eingebunden.
JavaScript Frameworks bestehen aus JavaScript Bibliotheken. Der vorgeschriebene Code kann für die Manipulation des zuvor beschriebenen DOM-Elements genutzt werden. Während JS-Frameworks ganzheitliche Strukturen vorgeben, an die es sich im weiteren Verlauf der Programmierung zu halten gilt, tragen JS-Bibliotheken einzelnen Code-Anforderungen Rechnung.
Warum aber überhaupt JS-Frameworks benutzen? Das Prinzip der JS-Frameworks lässt sich anhand anderer und alltäglicher Lebensbereiche einfach erklären: Kochen zum Beispiel. Pizzabäcker greifen für ihren Belag auf fertig produzierten Käse zurück, anstatt Kühe zu melken, die Milch zu pasteurisieren und mehrere Monate auf die Reifung des Käses zu warten. Das spart einfach Zeit und bündelt Expertenwissen da, wo es gebraucht wird. Und so verhält es sich auch mit den JS-Frameworks. Natürlich könnten Entwickler:innen ihren JavaScript Code von Grund auf neu programmieren, aber geläufige Anwendungen können effizienter mit bereits geschriebenem Open-Source-Code abgebildet werden. Die gängigsten JavaScript-Bibliotheken und -Frameworks am Markt sind ...
Vorteile einer Single Page Application
Ein klarer Vorteil der Single Page Application liegt in ihrer Haupteigenschaft: Der verkürzten Ladezeit bei der Benutzung der Anwendung. Internetnutzer:innen gewöhnen sich an immer kürzere Reaktionszeiten. Logische Schlussfolgerung und gängige Praxis: Die Toleranz gegenüber langen Ladezeiten nimmt immer mehr ab, was dazu führen kann, dass Online-Käufe oder Informationssuchen im Falle von Verzögerungen vorzeitig abgebrochen werden. SPAs erfüllen damit die Erwartungen der Nutzer:innen im Rahmen des Page Speeds.
Durch die vielen Interaktionsmöglichkeiten einer Single Page Application, fühlt sich diese für Besucher:innen oft wie eine mobile App an. Die User Experience profitiert von der intuitiven Bedienung der Seite. Die SPA fühlt sich nicht nur so an: Ihr Code kann einfach für die Entwicklung einer nativen App weiterverwendet werden. Single Page Applications und App unterscheiden sich dann nur in der Darstellungsweise im Frontend, der Basiscode bleibt der gleiche. Diese technische Gegebenheit bringt eine Unabhängigkeit von Webbrowser, Endgerät und Betriebssystem mit sich.
Die einfache Fehlerbehebung ist ein weiterer Bonus der SPA: Entwickler:innen können sich beim Debuggen auf JavaScript-Code konzentrieren. Eine große Anzahl von JavaScript-Frameworks beinhalten Funktionen zur Fehlerbehebung. Diese werden z. B. als Plug-ins im Browser zur Verfügung gestellt. Die aufwendige Bearbeitung serverseitigen Codes fällt weg und Entwickler:innen sparen eine Menge Zeit.
Dadurch, dass die Website einmal vollständig geladen wird, kann sie auch offline weiter genutzt werden. Ist die Verbindung wieder hergestellt, werden die lokalen Daten einfach mit den serverseitigen Daten abgeglichen und synchronisiert. Das einmalige Caching (dt. Zwischenspeicherung) erlaubt die Nutzung der Website auch in Gebieten, die über eine schlechte Internetverbindung verfügen.
Nachteile einer Single Page Application
Wie jedes andere System, bietet die Single Page Application nicht nur Vorteile. Je nachdem, was die eigene Unternehmensstrategie vorgibt, muss entschieden werden, ob eine SPA überhaupt in Frage kommt. Ist z. B. die Suchmaschinenoptimierung ein wichtiger Baustein, um die Ziele des Unternehmens zu erreichen, würden wir von einer Single Page Application abraten.
- SEO kaum möglich: Single Page Applications verfügen über nur eine URL. Anders als bei herkömmlichen Websites, kann damit keine Indexierung von Unterseiten stattfinden, die auf das entsprechende Primär-Keyword optimiert werden sollten. Der Einsatz von SPAs macht damit also nur Sinn, wenn der Erfolg der Unternehmung nicht von SEO abhängig ist.
- Initiale Ladezeit: Dadurch, dass die Anwendung nur einmal geladen wird, kann dieser erste Ladevorgang länger dauern.
- Sicherheit: Durch den Einsatz von JavaScript auf der Seite des Clients, sind Single Page Applications anfälliger für Cyber-Angriffe als es Multi-Page-Anwendungen sind. Das einfache Debugging ist zwar ein großer Vorteil des Systems, vereinfacht Hackern aber gleichzeitig die Einbindung schädlicher Scripts.
- Nur eine URL bedeutet: keine Breadcrumb, kein Browserverlauf und damit keine Möglichkeit die vorherige Seite wieder aufzurufen.
Wann ist der Einsatz einer Single Page Application sinnvoll?
Die Programmierung von Single Page Applications ist in den meisten Fällen mit höheren Kosten verbunden als die von Multi-Page-Applications. Bevor diese Kosten in Kauf genommen werden, sollte klar abgewogen werden, welche Art von Inhalten dargestellt werden soll. Sind dynamischer Content und viele Interaktionen geplant, kann eine Single Page Application eine gute Lösung sein.
- Portale oder Community-Anwendungen: Web-Anwendungen, die hohe Interaktionsraten und Trafficzahlen mit sich bringen, profitieren von einer geringeren Belastung der Server.
- Computerspiele: Die hohe Interaktion macht den Einsatz einer SPA für Computerspiele sinnvoll.
- Einsatz einer Multi-Channel-Strategie (verschiedene Endgeräte): Ein Unternehmen möchte unterschiedliche Zielgruppen über verschiedene Endgeräte erreichen oder plant die Entwicklung einer nativen App.
- Bereitstellung von Zusatzfunktionen: Auch wenn Unternehmen bereits eine Multi-Page-Anwendung betreiben, können Anwendungen, die einen Zusatznutzen bieten, über eine SPA dargestellt werden und die User Experience verbessern.
Content Management: Single Page Applications und Headless CMS
Content Management Systeme wie WordPress oder Typo3 eignen sich nicht besonders für eine Single Page Application. Die gängigen CMS sind mit ihren Funktionen und Darstellungsoptionen auf Multi-Page-Anwendungen ausgelegt. Über Seitenbäume werden hier unterschiedliche Seiten gepflegt, Meta-Tags zugeordnet und sonstige SEO-Einstellungen vorgenommen – bei einer SPA alles nicht möglich.
Deswegen nutzen Unternehmen für die Inhaltspflege und -verwaltung sogenannte Headless CMS. Inhalte werden hier, unabhängig von der Darstellung im Frontend, eingebunden und dann auf den unterschiedlichen Endgeräten über die SPA ausgespielt. Das wird durch die besondere Schnittstellen-Architektur, die sogenannte REST-API, möglich gemacht.
Der große Vorteil dieses entkoppelten CMS liegt in der großen Flexibilität, die es einem bietet. Sollte die eigene Zielgruppe einem neuen Trend folgen und z. B. ein neues Endgerät nutzen, ist die Ausspielung auf diesem mit wenig Aufwand für die Entwickler:innen möglich.
Kontaktieren Sie uns, falls Sie die Umsetzung einer Single Page Application beabsichtigen. Wir beraten Sie gerne und unterstützen bei der Entwicklung.