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) மூலம் ஒவ்வொரு பெறுதলுக்கும் இவை தேர்ந்தெடுக்கிறீர்கள். வர்த்தக-off ஐ புரிந்துகொள்ளுதல் — நிலையான வேகமான ஆனால் பழையது, SSR சமீபகால ஆனால் விலையுயர்ந்தது, ISR இரண்டையும் சமன்செய்கிறது — ஒவ்வொரு பக்கத்தையும் செயல்திறன் மற்றும் தரவு புதிய தன்மையின் சரியான கலவைக்கு உகந்தபடுத்த உங்களை அனுமதிக்கிறது.