Next.jsAdvanced

Static ও Dynamic Rendering

Prerendering, Partial Prerendering (PPR) ও dynamic rendering — rendering strategies বাংলায়।

10টি অংশবাংলা ভাষায়

Next.js-এ rendering-এর কয়েকটি স্তর — static (prerendered), dynamic (request-time) ও Partial Prerendering (দুইটির mix)। Cache Components চালু করলে PPR default।

রেন্ডারিং এর ধরন

Strategy	কখন render হয়	কখন ভালো
Prerendering (Static)	Build সময়	Content যেমন blog post
Dynamic Rendering	প্রতিটি request-এ	Personalized data (user-specific)
Partial Prerendering	Static + stream	অধিকাংশ page

কখন Dynamic হয়?

এই Request-time API-গুলো ব্যবহার করলে component dynamic হয়:

cookies() — user-এর cookie
headers() — request headers
searchParams — URL query
params — dynamic route (এতে copy না থাকলে)

Partial Prerendering (PPR)

Cache Components চালু থাকলে (Next 16 default), page-এর static অংশ prerender হয় আর dynamic অংশ stream হয় — একই page-এ দুটোর mix।

app/blog/page.tsxtsx

tsx

import { Suspense } from "react";

// Static — static shell-এ যায়
export default function BlogPage() {
  return (
    <>
      <header>
        <h1>Our Blog</h1>
      </header>

      {/* Cached — static shell-এ যায় */}
      <BlogPosts />

      {/* Dynamic — request-time-এ stream */}
      <Suspense fallback={<p>Loading preferences...</p>}>
        <UserPreferences />
      </Suspense>
    </>
  );
}

// সবার জন্য same — cached
async function BlogPosts() {
  "use cache";
  const res = await fetch("https://api.vercel.app/blog");
  const posts = await res.json();

  return (
    <ul>
      {posts.map((p: any) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

// user-specific — runtime-এ
async function UserPreferences() {
  const theme = (await cookies()).get("theme")?.value || "light";
  return <p>Your theme: {theme}</p>;
}

Static Shell

প্রথম load-এ browser পুরো static shell পায় — সাথে সাথে দেখায়। Dynamic অংশ <Suspense> fallback-এর পর stream-এ আসে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।