Single Page Application (SPA)

Eine Single Page Application (SPA) lädt initial eine HTML-Seite und JavaScript-Bundle. Danach werden alle Interaktionen und Navigationen per JavaScript gehandelt, ohne vollständige Seiten-Reloads. Nur Daten werden vom Server geladen (meist via REST-APIs). SPAs bieten eine App-ähnliche User Experience mit flüssigen Übergängen und sofortigen Reaktionen.

Frameworks wie React, Vue und Angular sind für SPAs optimiert. Der größte Vorteil: Nach dem initialen Load ist die Navigation extrem schnell, da nur Daten geladen werden, kein HTML/CSS/JS. SPAs eignen sich perfekt für interaktive Anwendungen wie Dashboards, Admin-Panels, SaaS-Tools und Social-Media-Plattformen. Der Nachteil: Schlechteres SEO (wird durch SSR/Next.js gelöst) und größere initiale Bundle-Sizes.

Moderne SPAs nutzen Code-Splitting, um nur den Code zu laden, der für die aktuelle Seite benötigt wird. Lazy Loading reduziert die initiale Bundle-Size. State Management Libraries wie Redux oder Zustand verwalten den App-State. SPAs sind Standard für komplexe Web-Anwendungen, bei denen User Experience wichtiger ist als SEO.

Technisch simuliert eine SPA die Navigation über die History API des Browsers (pushState), die die URL ändert, ohne eine neue Seite zu laden - ein Client-seitiger Router wie React Router entscheidet dann, welche Komponente gerendert wird. Der oft zitierte SEO-Nachteil ist heute differenzierter zu sehen: Googlebot führt JavaScript aus und kann SPAs grundsätzlich indexieren, tut dies aber verzögert, ressourcenintensiv und weniger zuverlässig als bei fertigem HTML - andere Crawler und Social-Media-Bots (für Link-Vorschauen) rendern oft gar kein JavaScript. Deshalb ist das dynamische Setzen von Meta-Tags und Open-Graph-Daten in reinen SPAs notorisch fehleranfällig.

Der Architektur-Trend bewegt sich daher weg von der reinen Client-SPA. Meta-Frameworks wie Next.js oder Remix rendern die erste Ansicht serverseitig und verwandeln sie erst im Browser in eine App-artige Erfahrung - das Beste aus beiden Welten. Ansätze wie Islands Architecture (Astro) oder React Server Components liefern standardmäßig statisches HTML und laden interaktives JavaScript nur für die tatsächlich dynamischen Inseln nach. Die Faustregel: Für datenintensive, hochinteraktive Anwendungen hinter einem Login (Dashboards, SaaS-Tools) bleibt das SPA-Modell ideal; für inhaltsgetriebene, öffentliche Websites, bei denen SEO und schnelle Erstanzeige zählen, ist ein server-gerendertes Multi-Page- oder Hybrid-Modell die bessere Wahl.