Single Page Application (SPA)
Eine Single Page Application (SPA) ist eine Web-App, die alle Inhalte dynamisch in einer einzigen HTML-Seite nachlädt, statt bei jedem Klick eine neue Seite zu laden.
Eine Single Page Application (SPA) ist eine Webanwendung, die nur eine einzige HTML-Seite lädt und alle weiteren Inhalte dynamisch im Browser nachlädt. Statt bei jedem Klick eine neue Seite vom Server anzufordern, tauscht JavaScript nur die benötigten Teile aus. Die Bedienung ähnelt dadurch einer nativen App, ohne sichtbare Seitenwechsel und ohne weisse Ladepause. Bekannte Beispiele sind Gmail, Google Maps oder Trello. Technisch stecken meist Frameworks wie React, Vue oder Angular dahinter, die Routing und Rendering im Browser übernehmen.
Warum SPAs wichtig sind
Der grosse Vorteil ist die Geschwindigkeit nach dem ersten Laden. Ist die App einmal geladen, reagieren Klicks fast ohne Verzögerung, weil nur noch Daten (meist als JSON) über eine Schnittstelle nachgeladen werden und keine ganzen Seiten. Das ergibt eine flüssige Bedienung und eignet sich für interaktive Tools, Dashboards, Buchungssysteme oder Kundenportale.
Der Nachteil betrifft zwei Punkte, die für KMU zählen: SEO und die erste Ladezeit. Klassische SPAs liefern beim ersten Aufruf oft nur ein leeres HTML-Gerüst, das erst per JavaScript befüllt wird. Google kann das zwar rendern, tut es aber verzögert und nicht immer zuverlässig. Zudem lädt das grosse JavaScript-Paket anfangs langsamer, was den LCP und damit die Core Web Vitals verschlechtert.
Praxis: SPA, MPA oder Hybrid
In der Praxis wählt man heute meist einen Mittelweg:
- Reine SPA: Gut geeignet für eingeloggte Bereiche, Web-Apps und Tools, bei denen SEO keine Rolle spielt.
- MPA (Multi Page Application): Klassisch serverseitig, sehr gut für SEO, aber weniger interaktiv.
- SSR und SSG: Serverseitiges Rendering oder statische Generierung liefern fertiges HTML aus und verbinden die Bedienung einer SPA mit guter Auffindbarkeit.
- Hydration: Das ausgelieferte HTML wird im Browser nachträglich interaktiv gemacht und verhält sich danach wie eine SPA.
Frameworks wie Next.js (auf Basis von React) oder Nuxt verbinden beide Ansätze. Der erste Aufruf kommt fertig gerendert vom Server, danach navigiert die Seite wie eine SPA.
Bezug für Schweizer KMU
Für eine KMU-Website, die über Google gefunden werden soll, ist eine reine SPA selten die beste Wahl, weil Sichtbarkeit und schnelle erste Darstellung leiden. Sinnvoll ist sie für interaktive Bereiche wie Kundenlogins oder Konfiguratoren. Webtree baut Websites mit Next.js, das Seiten serverseitig oder statisch ausliefert und danach wie eine SPA navigiert.
Häufige Fragen
Eine normale Website (MPA) lädt für jeden Klick eine neue Seite vom Server. Eine SPA lädt nur einmal und tauscht danach Inhalte dynamisch per JavaScript aus. Das wirkt flüssiger, kann aber SEO und die erste Ladezeit erschweren, wenn nicht zusätzlich serverseitiges Rendering eingesetzt wird.
Reine SPAs sind für SEO eine Herausforderung, weil Inhalte erst per JavaScript erscheinen und Google sie verzögert rendert. Mit serverseitigem Rendering oder statischer Generierung, etwa über Next.js, lassen sich diese Nachteile weitgehend ausgleichen, ohne auf die Vorteile einer SPA zu verzichten.
Eine SPA lohnt sich vor allem für interaktive Anwendungen wie Kundenportale, Buchungssysteme oder Konfiguratoren. Für eine klassische Firmen- oder Marketing-Website, die über Google gefunden werden soll, ist ein hybrider Ansatz mit SSR oder SSG meist die bessere Wahl.
Passende Leistungen