Next.js এর হাতেখড়ি (পর্ব ৫) – Static vs Dynamic Rendering: SSG, SSR, ISR

Next.js Static vs Dynamic Rendering SSG SSR ISR

আগের পর্বে fetch-এর ক্যাশ অপশন (ডিফল্ট, no-store, revalidate) দেখেছিলাম। আসলে এই অপশনগুলোই ঠিক করে দেয় পুরো পেজটা কীভাবে রেন্ডার হবে — এই পর্বে সেই তিনটা প্রধান কৌশল বুঝব: SSG, SSR, আর ISR।

তিনটা কৌশল — এক নজরে

কৌশল	HTML তৈরি হয়	উদাহরণ
SSG (Static Site Generation)	বিল্ড টাইমে, একবার	About পেজ, ব্লগ পোস্ট
SSR (Server-Side Rendering)	প্রতিটা রিকোয়েস্টে, নতুন করে	ইউজার ড্যাশবোর্ড, লাইভ দাম
ISR (Incremental Static Regeneration)	বিল্ড টাইমে, তারপর নির্দিষ্ট বিরতিতে রিফ্রেশ	প্রোডাক্ট লিস্টিং, নিউজ ফিড

SSG — Static Site Generation

এটাই Next.js-এর ডিফল্ট আচরণ। কোনো fetch-এ ক্যাশ অপশন না দিলে, বা npm run build চালানোর সময় Next.js পেজটা একবার রেন্ডার করে একটা স্ট্যাটিক HTML ফাইল বানিয়ে রাখে — ঠিক Cloudflare এর হাতেখড়ি পর্ব ১-এর স্ট্যাটিক Pages হোস্টিং-এর মতোই।

// app/about/page.js — এই পেজ SSG (ডিফল্ট)
async function getAboutContent() {
  const res = await fetch("https://.../about-content.json"); // ডিফল্ট ক্যাশ
  return res.json();
}

export default async function AboutPage() {
  const content = await getAboutContent();
  return <div>{content.text}</div>;
}

সুবিধা: সবচেয়ে দ্রুত — সার্ভারে কোনো কাজ ছাড়াই আগে থেকে বানানো HTML সরাসরি পাঠানো হয়, ঠিক Cloudflare-এর CDN থেকে ফাইল সার্ভ করার মতো।

সীমাবদ্ধতা: ডেটা বদলালে পুরো সাইট আবার বিল্ড না করলে পুরনো ভার্সনই দেখা যাবে।

SSR — Server-Side Rendering

cache: "no-store" ব্যবহার করলে (পর্ব ৪) সেই পেজ SSR হয়ে যায় — প্রতিটা ইউজার রিকোয়েস্টে সার্ভার নতুন করে HTML বানিয়ে পাঠায়।

// app/dashboard/page.js — এই পেজ SSR
async function getUserData(userId) {
  const res = await fetch(`https://.../users/${userId}.json`, {
    cache: "no-store", // প্রতিবার তাজা ডেটা
  });
  return res.json();
}

export default async function DashboardPage() {
  const userData = await getUserData("user123");
  return <div>স্বাগতম, {userData.name}</div>;
}

সুবিধা: সবসময় একদম সাম্প্রতিক ডেটা, ইউজার-নির্দিষ্ট কনটেন্টের জন্য আদর্শ।

সীমাবদ্ধতা: SSG-এর চেয়ে ধীর, কারণ প্রতিটা রিকোয়েস্টে সার্ভারকে কাজ করতে হয়।

ISR — Incremental Static Regeneration

SSG আর SSR-এর মাঝামাঝি — পর্ব ৪-এর next: { revalidate: N } ব্যবহার করলে ISR হয়। পেজটা SSG-এর মতোই স্ট্যাটিক থাকে, কিন্তু নির্দিষ্ট সময় পর Next.js ব্যাকগ্রাউন্ডে আবার রিজেনারেট করে।

// app/books/page.js — এই পেজ ISR
async function getBooks() {
  const res = await fetch("https://.../books.json", {
    next: { revalidate: 300 }, // ৫ মিনিট পর পর রিজেনারেট
  });
  return res.json();
}

export default async function BooksPage() {
  const books = await getBooks();
  return <div>{/* ... */}</div>;
}

কীভাবে কাজ করে: প্রথম ৫ মিনিট সবাই একই স্ট্যাটিক HTML পায় (দ্রুত, SSG-এর মতো)। ৫ মিনিট পার হলে, পরের ইউজার রিকোয়েস্ট করলে Next.js তাকে পুরনো ভার্সনই দেখায়, কিন্তু ব্যাকগ্রাউন্ডে নতুন ভার্সন বানানো শুরু করে — তার পরের ইউজাররা নতুন ভার্সন পায়। এতে কেউই "অপেক্ষা" করে না, কিন্তু ডেটাও পুরনো থেকে যায় না বেশিক্ষণ।

Dynamic Function ব্যবহার করলে — স্বয়ংক্রিয়ভাবে SSR

কিছু বিশেষ ফাংশন ব্যবহার করলে Next.js নিজে থেকেই পেজটাকে SSR বানিয়ে দেয় — যেমন ইউজারের কুকি বা হেডার পড়া।

import { cookies } from "next/headers";

export default async function ProfilePage() {
  const cookieStore = cookies();
  const sessionToken = cookieStore.get("session"); // এটা প্রতি ইউজারে আলাদা

  // এই ফাংশন ব্যবহার করার সাথে সাথেই পুরো পেজ SSR হয়ে যায়
  return <div>আপনার সেশন: {sessionToken?.value}</div>;
}

কীভাবে ঠিক করবেন কোন পেজে কোনটা

নিজেকে প্রশ্ন করুন —

এই ডেটা কি প্রতিটা ইউজারের জন্য আলাদা? হ্যাঁ হলে → SSR
ডেটা কি সবার জন্য একই, আর প্রায় কখনো বদলায় না? হ্যাঁ হলে → SSG
ডেটা সবার জন্য একই, কিন্তু মাঝেমধ্যে বদলায়? → ISR, একটা মানানসই revalidate সময় দিয়ে

ইন্টারেক্টিভ — Rendering কৌশল বেছে নাও

নিচে বিভিন্ন পেজের বর্ণনা দেওয়া আছে — ক্লিক করে দেখো কোনটা SSG, SSR, নাকি ISR হওয়া উচিত।

ভালো অভ্যাস

যতটা সম্ভব SSG/ISR-এর দিকে ঝুঁকুন — SSR সবচেয়ে ধীর, শুধু সত্যিই দরকার হলেই ব্যবহার করুন
একটা পেজে একটা no-store fetch পুরো পেজকে SSR বানিয়ে দেয় — সাবধান থাকুন, একটা ছোট ডাইনামিক অংশের জন্য পুরো পেজ ধীর না হয়ে যায়
revalidate সময় বাস্তবসম্মত রাখুন — অতিরিক্ত ছোট সময় ISR-এর সুবিধাই নষ্ট করে দেয়

নিজে চেষ্টা করো

Exercise:

একটা SSG পেজ বানাও (ডিফল্ট fetch), npm run build চালিয়ে দেখো এটা স্ট্যাটিক ফাইল হিসেবে জেনারেট হয়েছে কিনা।
cookies() ব্যবহার করে একটা SSR পেজ বানাও।
revalidate: 10 দিয়ে একটা ISR পেজ বানাও, ১০ সেকেন্ড অপেক্ষা করে রিফ্রেশ করে দেখো ডেটা কীভাবে আপডেট হয়।
নিজের কোনো প্রজেক্ট আইডিয়ার প্রতিটা পেজের জন্য ঠিক করো — SSG, SSR, নাকি ISR মানানসই, আর কেন।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Loading ও Error States — loading.js, error.js, আর React-এর Suspense দিয়ে কীভাবে ডেটা লোড হওয়ার সময় সুন্দর UI দেখানো যায়।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ