CSR da SSR da SSG da streaming: menene fa'ida da hasarar performance?

Question

IT Interview Practice · Accepted Answer

Rendering strategy yana yanke shawara *inda da yaushe* ake gina HTML, wanda ke tuka loading metrics. Babu wanda ya fi kowa a duniya — daidaita shi da yadda abun ciki ke da dynamic da personalized.

## Dabarun

```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)** — ship empty shell + JS; browser ke fetch data ya render. Araha ga hosting, amma LCP da SEO marasa kyau saboda abun ciki na jira JS.
- **SSR (server-side)** — render full HTML kowane request. Sauri, first paint mai SEO-friendly kuma koyaushe sabo, amma yana ƙara TTFB (server work kowane request) kuma har yanzu yana bukatar hydration.
- **SSG (static)** — render a build time, yi sabis daga CDN. Mafi kyawun TTFB/LCP, amma abun ciki sabo ne kawai kamar build ɗinka na ƙarshe; **ISR** yana ƙara periodic/on-demand rebuilds.
- **Streaming SSR** — flush HTML shell nan take ka stream sassa masu jinkiri (React Suspense / `renderToPipeableStream`) don masu amfani su ga abun ciki yayin da data ke loading.

## Zaɓi

| Abun ciki | Mafi dacewa |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalized, per-request | SSR / streaming |
| Highly interactive app bayan auth | CSR ko SSR + islands |

## Kuɗin hydration (matsala ta gama-gari)

SSR/SSG suna paint da sauri amma page ba ta interactive ba har sai JS ya **hydrate** — wani gibi inda INP ke wahala. Partial/progressive hydration da React Server Components suna wanzuwa don ship ƙasa da client JS da rage wannan gibi.

## Me ya sa yake da muhimmanci

Ana sa ran seniors su yi tunani game da wannan fa'ida-da-hasara kowace surface, ba su zaɓi ɗaya cikin ƙeta ba. Fahimtar mai kaifi: fast paint (SSR/SSG) ba ya nufin fast interactivity — hydration shi ne ɓoyayyen haraji, kuma streaming + server components su ne amsar zamani don samun duka biyun.

Abun ciki	Mafi dacewa
Marketing, docs, blog	SSG (+ ISR)
Personalized, per-request	SSR / streaming
Highly interactive app bayan auth	CSR ko SSR + islands

Dabarun

Zaɓi

Kuɗin hydration (matsala ta gama-gari)

Me ya sa yake da muhimmanci

Tambayoyi masu alaƙa