CSR vs SSR vs SSG vs streaming: apa trade-off performanya?

Question

IT Interview Practice · Accepted Answer

Strategi rendering menentukan *di mana dan kapan* HTML dibangun, yang menggerakkan metrik loading. Tidak ada yang terbaik secara universal — cocokkan dengan seberapa dinamis dan terpersonalisasi kontennya.

## Strateginya

```text
CSR      Server kirim HTML nyaris kosong + JS ──▶ browser fetch data ──▶ render   (paint pertama lambat)
SSR      Server render HTML penuh per request ──▶ browser tampilkan ──▶ hidrasi   (segar, biaya TTFB)
SSG      HTML dibangun SEKALI saat deploy ──▶ disajikan dari CDN ──▶ hidrasi       (tercepat, statis)
Stream   Server flush HTML per chunk saat siap ──▶ shell dulu, data mengisi       (TTFB cepat + segar)
```

- **CSR (client-side)** — kirim shell kosong + JS; browser mem-fetch data dan merender. Murah untuk di-host, tetapi LCP dan SEO buruk karena konten menunggu JS.
- **SSR (server-side)** — render HTML penuh per request. Paint pertama cepat, ramah SEO, dan selalu segar, tetapi menambah TTFB (pekerjaan server per request) dan masih butuh hidrasi.
- **SSG (static)** — render saat build time, sajikan dari CDN. TTFB/LCP terbaik, tetapi konten hanya sesegar build terakhirmu; **ISR** menambah rebuild berkala/sesuai-permintaan.
- **Streaming SSR** — flush shell HTML segera dan streaming bagian yang lebih lambat (React Suspense / `renderToPipeableStream`) sehingga pengguna melihat konten saat data termuat.

## Memilih

| Konten | Paling cocok |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Terpersonalisasi, per-request | SSR / streaming |
| Aplikasi sangat interaktif di balik auth | CSR atau SSR + islands |

## Biaya hidrasi (jebakan bersama)

SSR/SSG melakukan paint dengan cepat tetapi halaman belum interaktif hingga JS **melakukan hidrasi** — sebuah celah di mana INP menderita. Partial/progressive hydration dan React Server Components ada untuk mengirim lebih sedikit client JS dan mengecilkan celah itu.

## Mengapa ini penting

Senior diharapkan menalar trade-off ini per surface, bukan memilih salah satu secara dogmatis. Wawasan tajamnya: paint yang cepat (SSR/SSG) tidak berarti interaktivitas yang cepat — hidrasi adalah pajak tersembunyi, dan streaming + server components adalah jawaban modern untuk mendapatkan keduanya.

Konten	Paling cocok
Marketing, docs, blog	SSG (+ ISR)
Terpersonalisasi, per-request	SSR / streaming
Aplikasi sangat interaktif di balik auth	CSR atau SSR + islands

Strateginya

Memilih

Biaya hidrasi (jebakan bersama)

Mengapa ini penting

Pertanyaan terkait