CSR بمقابلہ SSR بمقابلہ SSG بمقابلہ streaming: performance کے فوائد و نقصانات کیا ہیں؟

Question

IT Interview Practice · Accepted Answer

rendering strategy طے کرتی ہے کہ HTML *کہاں اور کب* بنتا ہے، جو loading metrics کو چلاتا ہے۔ کوئی عالمگیر بہترین نہیں — اسے اس بات سے match کریں کہ content کتنا dynamic اور personalized ہے۔

## Strategies

```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 پر پوری HTML render کریں۔ تیز، SEO-friendly first paint اور ہمیشہ تازہ، مگر TTFB بڑھاتا ہے (ہر request پر server کام) اور پھر بھی hydration درکار۔
- **SSG (static)** — build time پر render کریں، CDN سے serve کریں۔ بہترین TTFB/LCP، مگر content اتنا ہی تازہ ہوتا ہے جتنا آپ کا آخری build؛ **ISR** وقتاً فوقتاً/طلب پر rebuilds شامل کرتا ہے۔
- **Streaming SSR** — HTML shell فوراً flush کریں اور سست حصوں کو stream کریں (React Suspense / `renderToPipeableStream`) تاکہ صارفین data load ہوتے وقت content دیکھیں۔

## انتخاب

| Content | بہترین موزوں |
|---------|----------|
| Marketing، docs، blog | SSG (+ ISR) |
| Personalized، per-request | SSR / streaming |
| auth کے پیچھے انتہائی interactive app | CSR یا SSR + islands |

## Hydration کی لاگت (مشترکہ خامی)

SSR/SSG تیزی سے paint کرتے ہیں مگر page اس وقت تک interactive نہیں ہوتا جب تک JS **hydrate** نہ ہو جائے — ایک وقفہ جہاں INP متاثر ہوتا ہے۔ Partial/progressive hydration اور React Server Components اسی لیے موجود ہیں کہ کم client JS بھیجیں اور اس وقفے کو کم کریں۔

## یہ کیوں اہم ہے

Seniors سے توقع کی جاتی ہے کہ وہ اس trade-off پر ہر surface کے حساب سے دلیل دیں، نہ کہ عقیدے کی بنیاد پر کوئی ایک چن لیں۔ گہری بصیرت: تیز paint (SSR/SSG) کا مطلب تیز interactivity نہیں — hydration پوشیدہ ٹیکس ہے، اور streaming + server components دونوں کو حاصل کرنے کا جدید جواب ہیں۔

Content	بہترین موزوں
Marketing، docs، blog	SSG (+ ISR)
Personalized، per-request	SSR / streaming
auth کے پیچھے انتہائی interactive app	CSR یا SSR + islands

Strategies

انتخاب

Hydration کی لاگت (مشترکہ خامی)

یہ کیوں اہم ہے

متعلقہ سوالات