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 উভয়কে ভারসাম্য রাখে — আপনাকে প্রতিটি পৃষ্ঠাকে কর্মক্ষমতা এবং ডেটা তাজা তথ্যের সঠিক মিশ্রণের জন্য অপ্টিমাইজ করতে দেয়।