CSR vs SSR vs SSG vs streaming: trade-off performane?

Question

IT Interview Practice · Accepted Answer

Strategi rendering nemtokake *ing ngendi lan kapan* HTML dibangun, sing ngarahake metrik loading. Ora ana sing paling apik kanggo kabeh — cocogake karo sepira dinamis lan pribadine isi.

## Strategi-strategine

```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)** — ngirim shell kosong + JS; browser njupuk data lan nge-render. Murah kanggo di-host, nanging LCP lan SEO elek amarga isi ngenteni JS.
- **SSR (server-side)** — nge-render HTML lengkap saben request. Cepet, paint pisanan sing ramah SEO lan tansah seger, nanging nambah TTFB (gawean server saben request) lan isih butuh hidrasi.
- **SSG (static)** — nge-render nalika build time, disajekake saka CDN. TTFB/LCP paling apik, nanging isi mung seger nganti build pungkasan sampeyan; **ISR** nambah build ulang berkala/nalika dibutuhake.
- **Streaming SSR** — nyuntak shell HTML kanthi langsung lan nge-stream bagean sing luwih alon (React Suspense / `renderToPipeableStream`) supaya pangguna weruh isi nalika data dimuat.

## Milih

| Isi | Sing paling cocog |
|---------|----------|
| Marketing, dokumentasi, blog | SSG (+ ISR) |
| Pribadi, saben-request | SSR / streaming |
| App interaktif banget ing mburi auth | CSR utawa SSR + islands |

## Biaya hidrasi (jebakan bareng)

SSR/SSG nge-paint kanthi cepet nanging kaca ora interaktif nganti JS **nge-hidrasi** — celah sing ndadekake INP kena. Partial/progressive hydration lan React Server Components ana kanggo ngirim JS client luwih sithik lan ngecilake celah kasebut.

## Kenapa iki penting

Senior dikarepake nalar babagan trade-off iki saben permukaan, dudu asal milih siji kanthi dogmatis. Wawasan sing landhep: paint cepet (SSR/SSG) ora ateges interaktivitas cepet — hidrasi iku pajak sing didhelikake, lan streaming + server components iku jawaban modern kanggo entuk loro-lorone.

Isi	Sing paling cocog
Marketing, dokumentasi, blog	SSG (+ ISR)
Pribadi, saben-request	SSR / streaming
App interaktif banget ing mburi auth	CSR utawa SSR + islands

Strategi-strategine

Milih

Biaya hidrasi (jebakan bareng)

Kenapa iki penting

Pitakon sing gegandhengan