Single Page Application (SPA)

TL;DR

Eine SPA lädt einmal und aktualisiert Inhalte dynamisch ohne Seitenwechsel. Vorteil: flüssige UX. Nachteil: große initiale Bundle-Größe.

Was ist eine SPA?

Eine Single Page Application (SPA) lädt das HTML-Gerüst einmal und aktualisiert Inhalte über JavaScript, ohne die Seite neu zu laden. React, Vue und Angular Apps sind typische SPAs.

Vorteile

• Flüssige Navigation ohne Neuladen
• App-ähnliche Erfahrung
• Schnelle Transitions zwischen Seiten
• Möglichkeit für Offline-Funktionalität

Nachteile

• Großes initiales JavaScript-Bundle
• SEO-Herausforderungen (ohne SSR)
• Lange initiale Ladezeit
• JavaScript-Abhängigkeit

SPAs nachhaltig gestalten

• Code Splitting: Nicht alles initial laden
• Lazy Loading: Routen bei Bedarf laden
• SSR/SSG: Server-Side Rendering für initiale Last
• Service Worker: Caching für wiederkehrende Nutzer

SPA vs. MPA

• SPA: Besser für interaktive Anwendungen
• MPA: Besser für Content-Seiten, SEO

Fazit

SPAs bieten hervorragende UX, müssen aber sorgfältig optimiert werden. Ohne Code Splitting und Caching können sie Performance-Probleme verursachen.