Single Page Application (SPA)
Eine Single Page Application (SPA) ist eine Web-App, die alle Inhalte dynamisch in einer einzigen HTML-Seite nachlaedt, statt fuer jeden Klick neu zu laden.
Eine Single Page Application (SPA) ist eine Webanwendung, die nur eine einzige HTML-Seite laedt und danach alle weiteren Inhalte dynamisch im Browser nachlaedt. Statt bei jedem Klick eine komplett neue Seite vom Server anzufordern, tauscht JavaScript nur die benoetigten Teile aus. Das Ergebnis fuehlt sich an wie eine native App: keine sichtbaren Seitenwechsel, keine weisse Ladepause. Bekannte Beispiele sind Gmail, Google Maps oder Trello. Technisch stecken meist Frameworks wie React, Vue oder Angular dahinter, die das Routing und das Rendering im Browser uebernehmen.
Warum SPAs wichtig sind
Der grosse Vorteil ist die Geschwindigkeit nach dem ersten Laden. Ist die App einmal geladen, reagieren Klicks praktisch verzoegerungsfrei, weil nur noch Daten (meist als JSON) ueber eine Schnittstelle nachgeladen werden, nicht ganze Seiten. Das ergibt fluessige, app-aehnliche Bedienung und ist ideal fuer interaktive Tools, Dashboards, Buchungssysteme oder Kundenportale.
Der Nachteil betrifft genau das, was fuer KMU zaehlt: SEO und erste Ladezeit. Klassische SPAs liefern beim ersten Aufruf oft nur ein leeres HTML-Geruest, das erst per JavaScript befuellt wird. Google kann das zwar rendern, tut es aber verzoegert und nicht immer zuverlaessig. Ausserdem laedt das grosse JavaScript-Bundle anfangs langsamer, was den LCP und damit die Core Web Vitals belastet.
Praxis: SPA, MPA oder Hybrid
In der Praxis loest man das Dilemma heute meist mit einem Mittelweg:
- Reine SPA – stark fuer eingeloggte Bereiche, Web-Apps und Tools, wo SEO egal ist.
- MPA (Multi Page Application) – klassisch serverseitig, top fuer SEO, aber weniger interaktiv.
- SSR / SSG – serverseitiges Rendering oder statische Generierung liefern fertiges HTML aus und kombinieren SPA-Komfort mit SEO-Staerke.
- Hydration – das ausgelieferte HTML wird im Browser nachtraeglich «zum Leben erweckt» und verhaelt sich danach wie eine SPA.
Frameworks wie Next.js (auf React-Basis) oder Nuxt verbinden genau diese Welten: Der erste Aufruf kommt fertig gerendert vom Server, danach navigiert die Seite wie eine SPA weiter.
Bezug fuer Schweizer KMU
Fuer eine normale KMU-Website, die ueber Google gefunden werden soll, ist eine reine SPA selten die beste Wahl, weil Sichtbarkeit und schnelle Erstdarstellung leiden. Sinnvoll ist sie fuer interaktive Bereiche wie Kundenlogins oder Konfiguratoren. Die meisten Webtree-Projekte setzen deshalb auf einen Hybrid mit SSR/SSG: Du bekommst die fluessige Bedienung einer SPA, ohne bei Suchmaschinen-Sichtbarkeit oder Ladezeit Kompromisse einzugehen.