Was ist eine Single-Page-Application (SPA)?

Single-Page-Application: Definition und Funkti­ons­weise

Bei einer klassischen Website fordert der Browser bei jedem Klick eine neue HTML-Seite vom Server an. Eine SPA lädt dagegen beim ersten Besuch eine Grundseite samt JavaScript und baut danach die Ansichten im Browser selbst auf. Nur Daten werden bei Bedarf über eine Schnittstelle (API) nachgeladen, meist im Format JSON.

Für die Navigation innerhalb der Anwendung nutzt eine SPA clientseitiges Routing: Die Adresszeile ändert sich, ohne dass die Seite neu geladen wird. Verbreitete Frameworks dafür sind React, Vue und Angular. Nutzer merken davon vor allem, dass Übergänge flüssig sind. Der Zurück-Button des Browsers muss dennoch wie gewohnt funktionieren – das muss die Anwendung ausdrücklich sicherstellen.

Vorteile und Grenzen einer SPA

Der Hauptvorteil liegt im Bedienkomfort: Wechsel zwischen Ansichten sind schnell, Zustände wie ein ausgefüllter Warenkorb oder ein Filter bleiben erhalten, und die Anwendung wirkt wie ein installiertes Programm. Dem stehen Nachteile gegenüber – vor allem bei Inhalten, die über Suchmaschinen auffindbar sein sollen.

• Flüssige Bedienung ohne Seitenneuladen
• Dieselbe Schnittstelle lässt sich für Web, App und weitere Kanäle nutzen
• Längere erste Ladezeit, weil mehr JavaScript geladen wird
• Suchmaschinen müssen Inhalte erst per Skript sichtbar machen
• Barrierefreiheit erfordert zusätzliche Sorgfalt, etwa beim Fokus nach Seitenwechseln

Praxis­bei­spiel: Terminportal einer Werkstatt

Eine Kfz-Werkstatt bietet ein Kundenportal an, in dem Kunden Termine buchen, Fahrzeugdaten pflegen und Rechnungen abrufen. Weil sich Inhalte oft ändern und nach dem Login nichts für Suchmaschinen sichtbar sein muss, ist eine SPA hier eine gute Wahl: Die Bedienung ist schnell, und Funktionen wie Erinnerungen lassen sich später ergänzen, ohne das Portal neu zu bauen.

Die öffentliche Werbeseite der Werkstatt mit Leistungen, Öffnungszeiten und Anfahrt sollte dagegen klassisch oder serverseitig gerendert ausgeliefert werden, damit sie bei Google gut gefunden wird, sofort lädt und auch auf schwachen Mobilgeräten ohne Wartezeit erscheint. Beide Teile lassen sich unter einer Domain kombinieren.

SEO, Performance und Umsetzung

Google kann JavaScript ausführen, doch das kostet zusätzliche Zeit, und nicht jeder Crawler tut es zuverlässig. Für Seiten, die gefunden werden sollen, setzt man deshalb auf serverseitiges Rendering oder statische Vorabgenerierung, etwa mit Next.js. Diese Mischformen laden schneller und liefern fertigen HTML-Inhalt aus, den Suchmaschinen und KI-Dienste sofort lesen können. Der Browser macht anschließend daraus eine interaktive Anwendung.

Nano Concepts entwickelt Web-Anwendungen und Kundenportale als SPA und berät, wann stattdessen serverseitiges Rendering oder eine klassische Website besser passt. Entscheidend sind Ziel, Zielgruppe und die Frage, ob Inhalte über Suchmaschinen gefunden werden sollen. Das klären wir vor dem Projektstart gemeinsam.