Was ist Rendering?
In der Web-Entwicklung bedeutet "Rendering", das finale HTML zu produzieren, das ein Browser anzeigt. Dieselbe React- oder Vue-Komponente kann auf dem Server (SSR), im Browser (CSR), zur Build-Zeit (SSG) oder hybrid gerendert werden.
Moderne Frameworks (Next.js, Nuxt, SvelteKit, Astro, Remix) erlauben Mischung von Rendering-Strategien pro Route oder sogar pro Komponente.
Die fünf Haupt-Rendering-Strategien
| Strategie | HTML produziert wann? | Wo? | Am besten für |
|---|---|---|---|
| Static Site Generation (SSG) | Build-Zeit | Build-Server | Marketing, Blogs, Docs |
| Server-Side Rendering (SSR) | Pro Request | Server | Personalisierte Seiten |
| Client-Side Rendering (CSR) | Im Browser | User-Device | SaaS-Dashboards |
| Incremental Static Regeneration (ISR) | Build + on-demand Re-build | Build-Server | E-Commerce |
| Edge Rendering | Pro Request at CDN-Edge | Cloudflare/Vercel-Edge | Geo-personalisierter Content |
Static Site Generation (SSG)
HTML wird einmal zur Build-Zeit generiert und als statische Dateien von CDN serviert.
Pros: Schnellste mögliche Delivery, billigstes Hosting, kein Server zur Runtime nötig.
Cons: Re-Build nötig für Content-Updates.
Tools: Astro, Hugo, Jekyll, Gatsby, Next.js, 11ty.
Server-Side Rendering (SSR)
HTML wird auf dem Server für jeden Request generiert.
Pros: Immer frischer Content; großartig für personalisierte Seiten; SEO-friendly.
Cons: Langsamere TTFB als SSG; braucht laufenden Server; teuer at Scale.
Tools: Next.js, Nuxt, Remix, SvelteKit, Astro.
Client-Side Rendering (CSR)
Der Server returnt minimales HTML; JavaScript rendert die Seite im Browser.
Pros: Hochinteraktiv; billig zu servieren; gut für app-like Erfahrungen.
Cons: Langsames First-Paint; schlecht für SEO; hohe JS-Payload.
Tools: Plain React/Vue/Angular SPA.
Incremental Static Regeneration (ISR)
Kombiniert SSG und SSR: Seiten werden statisch generiert, können aber on-demand oder schedule re-generiert werden.
Tools: Next.js, Astro, Vercel.
Edge Rendering
SSR passiert at CDN-Edge-Nodes (Cloudflare Workers, Vercel Edge), nah an Usern global.
Tools: Cloudflare Workers, Vercel Edge Functions, Netlify Edge, Deno Deploy.
Hydration: wo CSR auf SSR/SSG trifft
SSR und SSG produzieren HTML, aber interaktive Komponenten brauchen JavaScript. Hydration ist der Prozess, bei dem das client-side JS sich an das server-rendered HTML "anhängt".
- Partial Hydration (Astro Islands)
- Streaming SSR (React 18)
- Progressive Hydration
- Resumability (Qwik)
- HTMX / Server Components
Vergleich: Rendering-Strategie-Tradeoffs
| Metric | SSG | SSR | CSR | ISR |
|---|---|---|---|---|
| TTFB | Schnellste | Langsam | Schnell | Schnell |
| FCP | Schnell | Medium | Langsam | Schnell |
| SEO | Exzellent | Exzellent | Braucht Hydration | Exzellent |
| Personalisierung | Nein | Ja | Ja | Limitiert |
| Hosting-Kosten | Billigstes | Teuer | Billig | Billig |
Rendering-Strategie wählen
- Marketing-Site, Blog, Docs → SSG.
- E-Commerce-Katalog → ISR.
- SaaS-Dashboard → CSR oder SSR.
- News-Site → SSR oder ISR.
- Geo-lokalisierte Landing-Pages → Edge Rendering.
Rendering und Core Web Vitals
- LCP — am besten mit SSG/SSR.
- INP — schwere Hydration killt INP.
- CLS — server-rendered Seiten sind stabiler.
FAQ: Web-Rendering
SSR oder SSG: was ist besser?
SSG wenn Content sich nicht oft ändert. SSR wenn Content hoch-dynamisch ist.
Ist CSR tot?
Nein — immer noch ideal für eingeloggte App-Dashboards.
Was ist der Unterschied zwischen SSR und SSG?
Timing. SSR generiert HTML pro Request; SSG zur Build-Zeit.
Was ist React Server Components?
Ein React-Feature, bei dem manche Komponenten nur server-seitig laufen.
Wie beeinflusst Rendering SEO?
Crawler bevorzugen pre-rendered HTML. SSG/SSR sind ideal.
Rendering-Performance mit LoadFocus testen
LoadFocus läuft Lighthouse-Audits aus 25+ Regionen und load-testet dynamische Seiten mit k6/JMeter. Registrieren bei loadfocus.com/signup.
Verwandte LoadFocus-Tools
Setze dieses Konzept mit LoadFocus in die Praxis um — derselben Plattform, die alles antreibt, was du gerade gelesen hast.