CSR proti SSR proti SSG proti streamingu: kakšni so kompromisi v zmogljivosti?

Question

IT Interview Practice · Accepted Answer

Strategija izrisa odloča, *kje in kdaj* se HTML zgradi, kar poganja metrike nalaganja. Univerzalno najboljše ne obstaja — uskladi jo s tem, kako dinamična in personalizirana je vsebina.

## Strategije

```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)** — pošlji prazno lupino + JS; brskalnik pridobi podatke in izriše. Poceni za gostovanje, a slab LCP in SEO, ker vsebina čaka na JS.
- **SSR (server-side)** — izriši celoten HTML na vsako zahtevo. Hiter, SEO prijazen prvi izris in vedno svež, a doda TTFB (delo strežnika na zahtevo) in še vedno potrebuje hidracijo.
- **SSG (static)** — izriši ob gradnji, postrezi s CDN. Najboljši TTFB/LCP, a je vsebina sveža le toliko kot tvoja zadnja gradnja; **ISR** doda periodične/na-zahtevo ponovne gradnje.
- **Streaming SSR** — takoj sprosti lupino HTML in pretoči počasnejše dele (React Suspense / `renderToPipeableStream`), tako da uporabniki vidijo vsebino, medtem ko se podatki nalagajo.

## Izbiranje

| Vsebina | Najboljša izbira |
|---------|----------|
| Marketing, dokumentacija, blog | SSG (+ ISR) |
| Personalizirano, na zahtevo | SSR / streaming |
| Zelo interaktivna aplikacija za prijavo | CSR ali SSR + islands |

## Strošek hidracije (skupna past)

SSR/SSG izrišeta hitro, a stran ni interaktivna, dokler JS ne **hidrira** — vrzel, kjer trpi INP. Delna/progresivna hidracija in React Server Components obstajata, da pošljeta manj klientskega JS in to vrzel skrčita.

## Zakaj je to pomembno

Od seniorjev se pričakuje, da o tem kompromisu razmišljajo za vsako površino posebej, ne dogmatično izberejo enega. Ostri uvid: hiter izris (SSR/SSG) ne pomeni hitre interaktivnosti — hidracija je skriti davek, streaming + server components pa so sodobni odgovor, kako dobiti oboje.

Vsebina	Najboljša izbira
Marketing, dokumentacija, blog	SSG (+ ISR)
Personalizirano, na zahtevo	SSR / streaming
Zelo interaktivna aplikacija za prijavo	CSR ali SSR + islands

Strategije

Izbiranje

Strošek hidracije (skupna past)

Zakaj je to pomembno

Povezana vprašanja