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 दोन्हीमध्ये संतुलन राखते — आपल्याला प्रत्येक पृष्ठ कार्यक्षमता आणि डेटा ताजेपणाच्या योग्य मिश्रणासाठी ऑप्टिमाइজ करू देते.