CSR vs SSR vs SSG vs streaming: kompromisi u performansama?

Question

IT Interview Practice · Accepted Answer

Strategija renderiranja odlučuje *gdje i kada* se HTML gradi, što pokreće metrike učitavanja. Nema univerzalno najboljeg — uskladite ga s time koliko je sadržaj dinamičan i personaliziran.

## Strategije

```text
CSR      Poslužitelj šalje gotovo prazan HTML + JS ──▶ preglednik dohvaća podatke ──▶ renderira   (sporo prvo iscrtavanje)
SSR      Poslužitelj renderira puni HTML po zahtjevu ──▶ preglednik ga prikazuje ──▶ hidrira   (svjež, trošak TTFB-a)
SSG      HTML izgrađen JEDNOM pri deployu ──▶ posluženo s CDN-a ──▶ hidrira               (najbrže, statično)
Stream   Poslužitelj ispire HTML u chunkovima kako su spremni ──▶ prvo ljuska, podaci pune   (brz TTFB + svjež)
```

- **CSR (klijentska strana)** — pošaljite praznu ljusku + JS; preglednik dohvaća podatke i renderira. Jeftino za hostati, ali loš LCP i SEO jer sadržaj čeka na JS.
- **SSR (poslužiteljska strana)** — renderirajte puni HTML po zahtjevu. Brzo, SEO-prijateljsko prvo iscrtavanje i uvijek svježe, ali dodaje TTFB (rad poslužitelja po zahtjevu) i i dalje treba hidraciju.
- **SSG (statično)** — renderirajte u vrijeme buildanja, poslužite s CDN-a. Najbolji TTFB/LCP, ali sadržaj je svjež samo koliko i vaš zadnji build; **ISR** dodaje periodične/na-zahtjev ponovne izgradnje.
- **Streaming SSR** — ispirite HTML ljusku odmah i streamajte sporije dijelove (React Suspense / `renderToPipeableStream`) tako da korisnici vide sadržaj dok se podaci učitavaju.

## Odabir

| Sadržaj | Najbolje odgovara |
|---------|----------|
| Marketing, dokumentacija, blog | SSG (+ ISR) |
| Personalizirano, po zahtjevu | SSR / streaming |
| Vrlo interaktivna aplikacija iza autentikacije | CSR ili SSR + islands |

## Trošak hidracije (zajednička zamka)

SSR/SSG iscrtavaju brzo, ali stranica nije interaktivna dok se JS ne **hidrira** — jaz u kojem INP trpi. Djelomična/progresivna hidracija i React Server Components postoje da bi poslali manje klijentskog JS-a i smanjili taj jaz.

## Zašto je to važno

Od seniora se očekuje da razmišljaju o ovom kompromisu po površini, a ne dogmatski biraju jednu. Oštar uvid: brzo iscrtavanje (SSR/SSG) ne znači brzu interaktivnost — hidracija je skriveni porez, a streaming + server components moderni su odgovor na postizanje oboje.

Sadržaj	Najbolje odgovara
Marketing, dokumentacija, blog	SSG (+ ISR)
Personalizirano, po zahtjevu	SSR / streaming
Vrlo interaktivna aplikacija iza autentikacije	CSR ili SSR + islands

Strategije

Odabir

Trošak hidracije (zajednička zamka)

Zašto je to važno

Povezana pitanja