CSR बनाम SSR बनाम SSG बनाम streaming: performance ट्रेड-ऑफ़ क्या हैं?

Question

IT Interview Practice · Accepted Answer

rendering strategy तय करती है कि HTML *कहाँ और कब* बनता है, जो loading metrics को संचालित करता है। कोई सार्वभौमिक सर्वश्रेष्ठ नहीं है — इसे इससे मिलाएँ कि 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-अनुकूल 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`) ताकि users 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 से अपेक्षा की जाती है कि वे इस ट्रेड-ऑफ़ पर प्रति 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 लागत (साझा सावधानी)

यह क्यों महत्वपूर्ण है

संबंधित प्रश्न