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 ``` ## ఇది ఎందుకు ముఖ్యం অ్যাপ్ రూటర్‌లో ప్రత్యేక ఫంక్షన్‌ల కంటే ఎక్కువ ఆప్షన్‌ల (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) ద్వారా ప్రతి ఫెచ్ కోసం వీటిని ఎంచుకోండి. ట్రేడ్-ఆఫ్‌ను అర్థం చేసుకోవడం — స్టాటిక్ వేగవంతమైనది కానీ సేనేలో, SSR తాజా కానీ ఖరీదైనది, ISR రెండుసటీ సమతుల్యం — ప్రతి పేజీని పనితీరు మరియు డేటా సరిదిద్దటం యొక్క సరైన మిశ్రమం కోసం అనువదించుకోవటానికి మీకు అనుమతిస్తుంది.