CSR vs. SSR vs. SSG vs. streaming: care sunt compromisurile de performanță?

Question

IT Interview Practice · Accepted Answer

Strategia de randare decide *unde și când* este construit HTML-ul, ceea ce determină metricile de încărcare. Nu există un cel-mai-bun universal — potrivește-l cu cât de dinamic și personalizat este conținutul.

## Strategiile

```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)** — trimite un shell gol + JS; browserul aduce datele și randează. Ieftin de găzduit, dar LCP și SEO slabe pentru că conținutul așteaptă după JS.
- **SSR (server-side)** — randează HTML complet per cerere. Prim paint rapid, prietenos cu SEO și mereu proaspăt, dar adaugă TTFB (muncă pe server per cerere) și tot are nevoie de hidratare.
- **SSG (static)** — randează la build time, servește de la un CDN. Cel mai bun TTFB/LCP, dar conținutul e proaspăt doar cât ultimul tău build; **ISR** adaugă rebuild-uri periodice/la cerere.
- **Streaming SSR** — trimite shell-ul HTML imediat și face streaming la părțile mai lente (React Suspense / `renderToPipeableStream`) ca utilizatorii să vadă conținut în timp ce datele se încarcă.

## Alegerea

| Conținut | Cea mai bună potrivire |
|---------|----------|
| Marketing, documentație, blog | SSG (+ ISR) |
| Personalizat, per cerere | SSR / streaming |
| Aplicație foarte interactivă în spatele autentificării | CSR sau SSR + islands |

## Costul hidratării (capcană comună)

SSR/SSG fac paint rapid, dar pagina nu este interactivă până când JS nu **hidratează** — un interval în care INP suferă. Hidratarea parțială/progresivă și React Server Components există pentru a trimite mai puțin JS de client și a micșora acel interval.

## De ce contează

De la seniori se așteaptă să raționeze despre acest compromis per suprafață, nu să aleagă dogmatic una. Perspectiva ascuțită: paint rapid (SSR/SSG) nu înseamnă interactivitate rapidă — hidratarea este taxa ascunsă, iar streaming + server components sunt răspunsul modern pentru a le obține pe ambele.

Conținut	Cea mai bună potrivire
Marketing, documentație, blog	SSG (+ ISR)
Personalizat, per cerere	SSR / streaming
Aplicație foarte interactivă în spatele autentificării	CSR sau SSR + islands

Strategiile

Alegerea

Costul hidratării (capcană comună)

De ce contează

Întrebări conexe