CSR vs SSR vs SSG vs streaming: performance trade-off શું છે?

Question

IT Interview Practice · Accepted Answer

Rendering strategy નક્કી કરે છે કે HTML *ક્યાં અને ક્યારે* બને છે, જે loading metric ને ચલાવે છે. કોઈ સાર્વત્રિક શ્રેષ્ઠ નથી — content કેટલું dynamic અને personalized છે તેની સાથે તેને મેળવો.

## strategy

```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)** — ખાલી shell + JS મોકલો; browser data fetch કરી render કરે. Host કરવા સસ્તું, પણ નબળો LCP અને SEO કારણ કે content JS પર રાહ જુએ છે.
- **SSR (server-side)** — request દીઠ full HTML render કરો. ઝડપી, SEO-friendly first paint અને હંમેશા fresh, પણ TTFB ઉમેરે છે (request દીઠ server કામ) અને હજુ hydration જોઈએ.
- **SSG (static)** — build time પર render કરો, CDN થી serve કરો. શ્રેષ્ઠ TTFB/LCP, પણ content તમારા છેલ્લા build જેટલું જ fresh; **ISR** સામયિક/on-demand rebuild ઉમેરે છે.
- **Streaming SSR** — HTML shell તરત flush કરો અને ધીમા ભાગ stream કરો (React Suspense / `renderToPipeableStream`) જેથી data load થાય તે દરમિયાન user content જુએ.

## પસંદગી

| Content | શ્રેષ્ઠ મેળ |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalized, per-request | SSR / streaming |
| Auth પાછળ ખૂબ interactive app | CSR અથવા SSR + islands |

## hydration cost (સહિયારી મુશ્કેલી)

SSR/SSG ઝડપથી paint કરે છે પણ JS **hydrate** ન થાય ત્યાં સુધી page interactive નથી — એ અંતરાલ જ્યાં INP બગડે છે. Partial/progressive hydration અને React Server Components ઓછું client JS મોકલવા અને એ અંતર ઘટાડવા અસ્તિત્વમાં છે.

## આ શા માટે મહત્વનું છે

Senior પાસેથી અપેક્ષા છે કે તેઓ dogmatically એક પસંદ કરવાને બદલે surface દીઠ આ trade-off વિશે તર્ક કરે. તીક્ષ્ણ સૂઝ: ઝડપી paint (SSR/SSG) નો અર્થ ઝડપી interactivity નથી — hydration એ છુપો કર છે, અને streaming + server component એ બંને મેળવવાનો આધુનિક જવાબ છે.

Content	શ્રેષ્ઠ મેળ
Marketing, docs, blog	SSG (+ ISR)
Personalized, per-request	SSR / streaming
Auth પાછળ ખૂબ interactive app	CSR અથવા SSR + islands

strategy

પસંદગી

hydration cost (સહિયારી મુશ્કેલી)

આ શા માટે મહત્વનું છે

સંબંધિત પ્રશ્નો