Single Page Application (SPA): Definition, Pros, Beispiele

Q: Unterschied zwischen SPA und CSR?

CSR ist Rendering-Strategie. SPA ist Architektur.

Eine SPA lädt eine einzelne HTML-Seite und updated Content via JS ohne Full-Reloads. React, Vue, Angular SPAs fühlen sich app-like an.

Was ist eine Single Page Application (SPA)?

Eine Single Page Application (SPA) ist eine Web-App, die eine einzelne HTML-Seite lädt und Content dynamisch via JavaScript updated, während User interagieren — ohne Full-Page-Reloads. Navigation zwischen "Pages" passiert client-side.

SPAs fühlen sich snappy und app-like an (Gmail, Trello, Notion sind alle SPAs). Sie trade-offen zwei Dinge: langsamer Initial-Load und schwierigere SEO.

Wie SPAs funktionieren

Browser requested example.com
Server returnt minimales HTML + JS-Bundle
Browser lädt + executet JS-Bundle
JS rendert Home-View
User klickt Link → JS interceptet → updated URL + rendert neue View
Daten via API gefetcht

SPA vs MPA

Aspekt	SPA	MPA
Page-Navigation	JS-driven	Server returnt Full-HTML
Initial-Load	Langsam	Schnell
Subsequent Navigation	Instant	Langsamer
SEO out-of-box	Schlecht	Gut
Am besten für	App-like UIs	Content-Sites

Beliebte SPA-Frameworks

Framework	Notes
React + React Router	Beliebteste
Angular	Full Framework, opinionated
Vue + Vue Router	Approachable
Svelte (mit SvelteKit SPA-Mode)	Compile-time Framework
Solid	React-like
Ember	Convention-heavy

SPA Pros und Cons

Pros	Cons
App-like UX	Langsamer First-Load
Schnelle Subsequent-Navigation	SEO braucht Extra-Arbeit
Decoupled Frontend/Backend	Browser-Back/Forward braucht Handling
Reusable APIs	JS-Error breakt ganze App

Wann SPA nutzen

Logged-in Dashboards.
Real-time Apps.
Highly interactive UIs.
Mobile-like Web-Apps.

Wann NICHT SPA

Content-heavy Sites.
Sites die Instant First-Paint brauchen.
Low-Spec Target-Devices.
SEO-kritisch.

SPA-Probleme lösen

SEO: SSR oder Prerendering

Server rendert HTML für Crawler.

Initial-Load: Code-Splitting

const Settings = lazy(() => import('./Settings'));

Browser-Navigation: Router nutzen

<Route path="/users/:id" element={<UserPage />} />

Loading-States

Skeleton-Screens oder Spinner.

SPA Best Practices

Aggressiv Code-splitten.
Router nutzen.
State explicit managen.
API-Responses cachen.
Loading-States zeigen.
Errors graceful handeln.
Bundle-Size optimieren.
SSR/Prerender wenn SEO matters.
Service-Workers für Offline.

Häufige SPA-Fallstricke

Massive Bundles.
SEO-Afterthought.
Memory-Leaks.
Browser-History broken.
JS-only Navigation.
State-Management-Chaos.
Loading-Flicker.

FAQ: Single Page Application

SPA oder MPA: was ist besser?

Hängt davon ab.

Sind SPAs schlecht für SEO?

By default ja; mit SSR ok.

Indexed Google SPAs jetzt?

Googlebot läuft JavaScript, aber langsamer.

Was ist PWA vs SPA?

PWA = SPA + Offline-Support + Installable.

Wie groß sollte ein SPA-Bundle sein?

< 200KB Initial-JS gezippt.

Sterben SPAs mit dem Rise von SSR/RSC?

Nein.

Unterschied zwischen SPA und CSR?