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 ; } ``` ਪੰਨੇ ਨੂੰ ਬਿਲਡ ਦੌਰਾਨ static 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 static HTML (ਤੇਜ਼, CDN-ਕੈਸ਼ਡ) ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਪਰ ਬੈਕਗ੍ਰਾਉਂਡ ਵਿੱਚ ਇੱਕ ਸਮਾਂ-ਸੂਚੀ ਦੇ ਅਨੁਸਾਰ **ਇਸ ਨੂੰ ਮੁੜ ਵੈਧਿਕ** ਕਰਦਾ ਹੈ — ਇਸ ਲਈ ਤੁਸੀਂ ਪੂਰੀ ਸਾਈਟ ਨੂੰ ਮੁੜ ਬਣਾਏ ਬਿਨਾਂ static ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਸਮੇਂ-ਸਮੇਂ ਤੇ ਤਾਜ਼ਾ ਡਾਟੇ ਨਾਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ। ਅਜਿਹੀ ਸਮੱਗਰੀ ਲਈ ਸੋਤਮ ਜੋ ਕੁਝ ਵਾਰ ਬਦਲਦੀ ਹੈ: ਉਤਪਾਦ ਸੂਚੀਆਂ, ਖਬਰਾਂ, ਲੀਡਰ ਬੋਰਡ। ## ਤੁਲਨਾ ```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 ਵਿੱਚ ਤੁਸੀਂ ਸਪੈਸ਼ਲ ਫੰਕਸ਼ਨਾਂ ਦੀ ਬਜਾਏ cache ਵਿਕਲਪਾਂ (`force-cache` = SSG, `no-store` = SSR, `revalidate` = ISR) ਦੁਆਰਾ ਪ੍ਰਤੀ-fetch ਇਹਨਾਂ ਨੂੰ ਚੁਣਦੇ ਹੋ। Trade-off ਨੂੰ ਸਮਝਨਾ — static ਸਭ ਤੋਂ ਤੇਜ਼ ਪਰ ਪੁਰਾਣਾ ਹੈ, SSR ਤਾਜ਼ਾ ਪਰ ਮਹਿੰਗਾ ਹੈ, ISR ਦੋਵਾਂ ਨੂੰ ਸੰਤੁਲਿਤ ਕਰਦਾ ਹੈ — ਤੁਹਾਨੂੰ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਡਾਟਾ ਤਾਜ਼ਾ ਪਨ ਦੇ ਸਹੀ ਮਿਸ਼ਰਣ ਲਈ ਹਰ ਪੰਨੇ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦਿੰਦਾ ਹੈ।