CSR kontra SSR kontra SSG kontra streaming: performance-afvejningerne?

Question

IT Interview Practice · Accepted Answer

Rendering-strategien afgør, *hvor og hvornår* HTML bygges, hvilket driver indlæsnings-metrics. Der findes ingen universel bedste — match den til, hvor dynamisk og personaliseret indholdet er.

## Strategierne

```text
CSR      Server sends near-empty HTML + JS ──▶ browser fetches data ──▶ renders   (slow first paint)
SSR      Server renders full HTML per request ──▶ browser shows it ──▶ hydrates   (fresh, TTFB cost)
SSG      HTML built ONCE at deploy ──▶ served from CDN ──▶ hydrates               (fastest, static)
Stream   Server flushes HTML in chunks as ready ──▶ shell first, data fills in    (fast TTFB + fresh)
```

- **CSR (client-side)** — send en tom shell + JS; browseren henter data og renderer. Billig at hoste, men dårlig LCP og SEO, fordi indhold venter på JS.
- **SSR (server-side)** — render fuld HTML per request. Hurtig, SEO-venlig first paint og altid frisk, men tilføjer TTFB (serverarbejde per request) og har stadig brug for hydration.
- **SSG (statisk)** — render på build-tidspunktet, server fra en CDN. Bedste TTFB/LCP, men indholdet er kun så frisk som dit sidste build; **ISR** tilføjer periodiske/on-demand-genopbygninger.
- **Streaming SSR** — flush HTML-shellen øjeblikkeligt, og stream langsommere dele (React Suspense / `renderToPipeableStream`), så brugere ser indhold, mens data indlæses.

## At vælge

| Indhold | Bedste match |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personaliseret, per-request | SSR / streaming |
| Meget interaktiv app bag auth | CSR eller SSR + islands |

## Hydration-omkostningen (delt faldgrube)

SSR/SSG painter hurtigt, men siden er ikke interaktiv, før JS **hydrerer** — et gab, hvor INP lider. Partial/progressive hydration og React Server Components findes for at sende mindre client-JS og formindske det gab.

## Hvorfor det betyder noget

Seniorer forventes at ræsonnere om denne afvejning per surface, ikke dogmatisk vælge én. Den skarpe indsigt: hurtig paint (SSR/SSG) betyder ikke hurtig interaktivitet — hydration er den skjulte skat, og streaming + server components er det moderne svar på at få begge dele.

Indhold	Bedste match
Marketing, docs, blog	SSG (+ ISR)
Personaliseret, per-request	SSR / streaming
Meget interaktiv app bag auth	CSR eller SSR + islands

Strategierne

At vælge

Hydration-omkostningen (delt faldgrube)

Hvorfor det betyder noget

Relaterede spørgsmål