CSR बनाम SSR बनाम SSG बनाम streaming: performance trade-off हरू?

Question

IT Interview Practice · Accepted Answer

Rendering रणनीतिले HTML *कहाँ र कहिले* बन्छ भन्ने निर्धारण गर्छ, जसले loading metric चलाउँछ। कुनै विश्वव्यापी उत्तम छैन — content कति dynamic र personalized छ त्यसअनुसार मिलाउनुहोस्।

## रणनीतिहरू

```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** ले आवधिक/on-demand rebuild थप्छ।
- **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 लागत (साझा pitfall)

SSR/SSG छिटो paint गर्छन् तर JS **hydrate** नभएसम्म page interactive हुँदैन — एउटा gap जहाँ INP बिग्रन्छ। Partial/progressive hydration र React Server Components ले कम client JS पठाएर त्यो gap घटाउन अस्तित्वमा छन्।

## यो किन महत्त्वपूर्ण छ

Senior हरूले हठधर्मी रूपमा एउटा छान्नुको सट्टा प्रति surface यो trade-off बारे तर्क गर्ने अपेक्षा गरिन्छ। तीक्ष्ण अन्तर्दृष्टि: छिटो 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

रणनीतिहरू

छनोट

Hydration लागत (साझा pitfall)

यो किन महत्त्वपूर्ण छ

सम्बन्धित प्रश्नहरू