Next.js में SSR, SSG और ISR क्या हैं?

Question

Accepted Answer

ये पेज के HTML के *कब* बनाए जाने के लिए तीन मुख्य रणनीतियां हैं। प्रति पृष्ठ सही चुनना ताजापन, प्रदर्शन और सर्वर लागत को संतुलित करता है। ## SSG — Static Site Generation (बिल्ड समय पर) ```tsx // HTML generated ONCE during `next build`, then served from CDN export default async function Page() { const posts = await fetch("...", { cache: "force-cache" }).then(r => r.json()); return ; } ``` पेज को बिल्ड समय पर स्टेटिक HTML में पहले से रेंडर किया जाता है और CDN पर कैश किया जाता है। **सबसे तेज संभव** डिलीवरी, लेकिन सामग्री अगली बिल्ड तक फ्रीज़ रहती है। उस सामग्री के लिए सर्वोत्तम जो शायद ही कभी बदलती है: मार्केटिंग पेज, दस्तावेज़, ब्लॉग पोस्ट। ## SSR — Server-Side Rendering (प्रत्येक अनुरोध पर) ```tsx // HTML generated FRESH on every request export default async function Page() { const data = await fetch("...", { cache: "no-store" }).then(r => r.json()); return ; } ``` सर्वर हर अनुरोध पर पेज रेंडर करता है, इसलिए डेटा हमेशा वर्तमान होता है — धीमी प्रतिक्रिया और हर यात्रा पर सर्वर लोड की कीमत पर। व्यक्तिगत या हमेशा-ताज़े डेटा के लिए सर्वोत्तम: डैशबोर्ड, खाता पृष्ठ, खोज परिणाम। ## ISR — Incremental Static Regeneration (संकर) ```tsx // Static, but automatically rebuilt in the background every N seconds export const revalidate = 60; // regenerate at most once per 60s export default async function Page() { const products = await fetch("...", { next: { revalidate: 60 } }).then(r => r.json()); return ; } ``` ISR स्टेटिक HTML (तेज़, CDN-कैश्ड) देता है लेकिन एक शेड्यूल पर पृष्ठभूमि में **पुनः सत्यापित** करता है — तो आपको स्टेटिक प्रदर्शन मिलता है समय-समय पर ताज़े डेटा के साथ, पूरी साइट को फिर से बनाए बिना। उस सामग्री के लिए सर्वोत्तम जो कभी-कभी बदलती है: पणय सूचियां, समाचार, लीडरबोर्ड। ## तुलना ```text Speed Freshness Server cost Use for SSG fastest build-time only none docs, marketing SSR slower always fresh every request dashboards, personalized ISR fast every N seconds occasional catalogs, news ``` ## यह महत्वपूर्ण क्यों है App Router में आप कैश विकल्प (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) के माध्यम से प्रति-फेच पर इन्हें चुनते हैं विशेष कार्यों के बजाय। ट्रेड-ऑफ को समझना — स्टेटिक सबसे तेज़ है लेकिन पुरानी, SSR ताज़ी है लेकिन महंगी, ISR दोनों को संतुलित करती है — आपको प्रदर्शन और डेटा ताजापन के सही मिश्रण के लिए प्रत्येक पेज को अनुकूलित करने देता है।