CSR kontra SSR kontra SSG kontra streaming: ytelsesavveiningene?

Question

IT Interview Practice · Accepted Answer

Renderingsstrategien avgjør *hvor og når* HTML bygges, som driver lastemetrikkene. Det finnes ingen universell best — match den til hvor dynamisk og personalisert innholdet er.

## Strategiene

```text
CSR      Server sender nesten-tom HTML + JS ──▶ nettleser henter data ──▶ rendrer   (treg first paint)
SSR      Server rendrer full HTML per forespørsel ──▶ nettleser viser den ──▶ hydrerer   (ferskt, TTFB-kostnad)
SSG      HTML bygget ÉN GANG ved deploy ──▶ servert fra CDN ──▶ hydrerer               (raskest, statisk)
Stream   Server flusher HTML i chunks etter hvert ──▶ shell først, data fyller inn    (rask TTFB + ferskt)
```

- **CSR (client-side)** — send en tom shell + JS; nettleseren henter data og rendrer. Billig å hoste, men dårlig LCP og SEO fordi innholdet venter på JS.
- **SSR (server-side)** — rendre full HTML per forespørsel. Rask, SEO-vennlig first paint og alltid ferskt, men legger til TTFB (serverarbeid per forespørsel) og trenger fortsatt hydrering.
- **SSG (statisk)** — rendre på byggetidspunktet, server fra en CDN. Best TTFB/LCP, men innholdet er bare så ferskt som ditt siste bygg; **ISR** legger til periodiske/on-demand-ombygginger.
- **Streaming SSR** — flush HTML-shellen umiddelbart og stream tregere deler (React Suspense / `renderToPipeableStream`) så brukere ser innhold mens data lastes.

## Å velge

| Innhold | Best egnet |
|---------|----------|
| Markedsføring, dokumentasjon, blogg | SSG (+ ISR) |
| Personalisert, per-forespørsel | SSR / streaming |
| Svært interaktiv app bak innlogging | CSR eller SSR + islands |

## Hydreringskostnaden (felles fallgruve)

SSR/SSG maler raskt, men siden er ikke interaktiv før JS **hydrerer** — et gap der INP lider. Partiell/progressiv hydrering og React Server Components finnes for å sende mindre klient-JS og krympe det gapet.

## Hvorfor det er viktig

Seniorer forventes å resonnere om denne avveiningen per flate, ikke dogmatisk velge én. Den skarpe innsikten: rask paint (SSR/SSG) betyr ikke rask interaktivitet — hydrering er den skjulte avgiften, og streaming + server components er det moderne svaret på å få begge deler.

Innhold	Best egnet
Markedsføring, dokumentasjon, blogg	SSG (+ ISR)
Personalisert, per-forespørsel	SSR / streaming
Svært interaktiv app bak innlogging	CSR eller SSR + islands

Strategiene

Å velge

Hydreringskostnaden (felles fallgruve)

Hvorfor det er viktig

Relaterte spørsmål