Single Page Application (SPA).
Eine Single Page Application (SPA) ist eine Webanwendung, die nur einmal ein HTML-Grundgerüst lädt und alle weiteren Ansichten per JavaScript im Browser erzeugt, ohne die Seite neu zu laden. Das fühlt sich an wie eine App, ist aber für Suchmaschinen und die erste Ladezeit anspruchsvoll. SPAs eignen sich gut für Anwendungen hinter einem Login, weniger für Websites, die gefunden werden sollen.
Single Page Application (SPA) — ausführlich erklärt
Bei einer klassischen Website lädt jeder Klick auf einen Link eine neue HTML-Seite vom Server. Eine Single Page Application funktioniert anders: Der Browser lädt einmal eine fast leere HTML-Hülle und ein grösseres JavaScript-Paket. Danach übernimmt das Framework, etwa React, Vue oder Angular. Es holt Daten über Schnittstellen, baut die Ansichten im Browser und ändert die Adresse in der Adresszeile, ohne die Seite neu zu laden. Für die Nutzerin wirkt das flüssig wie eine installierte App.
Die Stärken liegen bei Anwendungen mit viel Interaktion: Dashboards, Kundenportale, Buchungssysteme, Admin-Oberflächen, Werkzeuge, die man lange am Stück bedient. Dort zählt, dass Wechsel zwischen Ansichten sofort passieren und Zustände wie Filter oder Eingaben erhalten bleiben. Viele Web-Apps und Progressive Web Apps sind deshalb ganz oder teilweise als SPA gebaut.
Die Schwächen zeigen sich bei öffentlichen Websites. Weil der Inhalt erst im Browser entsteht, sieht ein Crawler zunächst nur die leere Hülle. Google kann JavaScript rendern, tut das aber in einem zweiten Schritt, mit Verzögerung und nicht immer vollständig; viele KI-Crawler führen gar kein JavaScript aus und sehen nichts. Dazu kommen typische Fehler: fehlende oder identische Title-Tags, Soft 404, weil der Server für jede Adresse Status 200 liefert, und interne Links, die nur als Klick-Handler und nicht als echte Links existieren. Das Thema JavaScript-SEO beschreibt diese Probleme ausführlich.
Auch die erste Ladezeit leidet: Bevor etwas Sinnvolles erscheint, muss das JavaScript geladen und ausgeführt werden, was sich in der Largest Contentful Paint zeigt. Moderne Frameworks lösen das, indem sie die erste Ansicht auf dem Server rendern und danach im Browser wie eine SPA weiterarbeiten. Next.js etwa liefert fertiges HTML aus und wechselt zwischen Seiten trotzdem ohne vollständiges Neuladen. Das ist für Websites, die gefunden werden sollen, meist die bessere Wahl als eine reine SPA.
SPA oder serverseitig gerenderte Website?
Die Faustregel ist einfach: Was hinter einem Login liegt und von Suchmaschinen nicht gefunden werden muss, darf eine SPA sein. Was öffentlich ist und ranken soll, also Startseite, Leistungsseiten, Blog und Shop, sollte als HTML vom Server oder aus dem Build kommen. Viele Projekte kombinieren beides: eine schnelle, serverseitig gerenderte Website und dahinter ein Kundenportal als SPA.
Diese Trennung legen wir zu Beginn jedes Projekts fest, sowohl wenn wir eine Web-App entwickeln als auch bei der Webentwicklung in Zürich. Bestehende SPAs mit Sichtbarkeitsproblemen prüfen wir im Website-Audit, meist mit dem Ergebnis, dass die öffentlichen Seiten serverseitig gerendert werden sollten.
Beispiel: Ein Immobilienportal ohne Rankings
Ein typischer Fall, als Beispiel beschrieben: Eine Liegenschaftsverwaltung lässt ihre Website mit Objektsuche als reine SPA bauen. Die Bedienung ist angenehm, aber in Google erscheinen fast keine Objektseiten, und in der Search Console tauchen viele Adressen als gecrawlt, aber nicht indexiert auf. Der Quelltext jeder Objektseite enthält nur ein leeres Element und einen Script-Verweis.
Die Lösung ist kein Neubau der gesamten Anwendung: Die Objektseiten und die Übersicht werden serverseitig gerendert und mit eigenen Titeln, Beschreibungen und strukturierten Daten ausgeliefert. Die Merkliste und das Mieterportal bleiben als interaktive Bereiche erhalten. So verbindet die Website Auffindbarkeit und App-Gefühl.
Weiterführende Seite
JavaScript SEOHäufige Fragen zu Single Page Application (SPA)
Reine SPAs, die ihren Inhalt nur im Browser erzeugen, sind für SEO schwierig. Google kann JavaScript zwar rendern, aber verzögert und nicht immer vollständig, und viele KI-Crawler gar nicht. Mit serverseitigem Rendering der ersten Ansicht lassen sich die Vorteile einer SPA ohne diese Nachteile nutzen.
Nicht im klassischen Sinn. Next.js liefert für jede Seite fertiges HTML vom Server oder aus dem Build und verhält sich danach beim Navigieren ähnlich wie eine SPA. Man spricht deshalb oft von einer hybriden Anwendung.
Bei Anwendungen hinter einem Login mit viel Interaktion, etwa Dashboards, Kundenportalen, internen Werkzeugen oder Buchungsoberflächen. Dort zählt die flüssige Bedienung, und Suchmaschinen müssen die Inhalte nicht finden.
Weitere Begriffe mit „S“
Schema Markup
Schema Markup (Schema.org) ist ein semantisches Vokabular zur Strukturierung von Website-Inhalten. E...
SEO (Suchmaschinenoptimierung)
SEO (Search Engine Optimization) ist die Gesamtheit aller Massnahmen, um eine Website in den organis...
Server-Side Rendering (SSR)
Server-Side Rendering (SSR) bedeutet, dass HTML-Seiten auf dem Server generiert und fertig gerendert...
Bereit für Ihr Projekt?
Wenden Sie dieses Wissen auf Ihre Website an — DLM Digital hilft Ihnen dabei.
Single Page Application (SPA) in der Praxis
Wie der Begriff im Alltag von Schweizer KMU auftaucht — vertieft in Artikeln aus dem DLM Magazin.