52:I[753780,["$7","$8","$9","$a","$27","$28","$29"],"default"] 54:I[55935,["$7","$8","$9","$a","$27","$28","$29"],"default"] 55:I[19689,["$7","$8","$9","$a","$27","$28","$29"],"default"] 56:I[485653,["$7","$8","$9","$a","$27","$28","$29"],"default"] 57:I[494017,["$7","$8","$9","$a","$27","$28","$29"],"default"] 58:I[72364,["$7","$8","$9","$a","$27","$28","$29"],"default"] 47:["$","span","React",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","React"]}] 48:["$","span","JavaScript",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","JavaScript"]}] 49:["$","span","TypeScript",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","TypeScript"]}] 4a:["$","h1",null,{"className":"text-4xl md:text-5xl font-bold leading-tight mb-6","children":"Static vs Dynamic Rendering: Next.js 16 সম্পূর্ণ বাংলা গাইড"}] 4b:["$","div",null,{"className":"flex flex-wrap items-center gap-6 text-sm text-muted-foreground border-b pb-6","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar w-4 h-4","aria-hidden":"true","children":[["$","path","1cmpym",{"d":"M8 2v4"}],["$","path","4m81vk",{"d":"M16 2v4"}],["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}],["$","path","8toen8",{"d":"M3 10h18"}],"$undefined"]}],["$","time",null,{"dateTime":"2026-08-02T04:46:49.273Z","children":"Aug 2, 2026, 04:46 AM"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-clock w-4 h-4","aria-hidden":"true","children":[["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],["$","path","mmk7yg",{"d":"M12 6v6l4 2"}],"$undefined"]}],["$","span",null,{"children":"5 min read"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-eye w-4 h-4","aria-hidden":"true","children":[["$","path","1nclc0",{"d":"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"}],["$","circle","1v7zrd",{"cx":"12","cy":"12","r":"3"}],"$undefined"]}],["$","span",null,{"children":[72," views"]}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-heart w-4 h-4","aria-hidden":"true","children":[["$","path","mvr1a0",{"d":"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"}],"$undefined"]}],["$","span",null,{"children":[0," likes"]}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-message-circle w-4 h-4","aria-hidden":"true","children":[["$","path","1sd12s",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],"$undefined"]}],["$","span",null,{"children":[0," comments"]}]]}]]}] 53:T2f12, Next.js version 16 রিলিজের পর রেন্ডারিং আর্কিটেকচারে এক বৈপ্লবিক পরিবর্তন এসেছে। আগে পুরো পেজকে 'হয় ফুল Static, না হয় ফুল Dynamic' হিসেবে রেন্ডার করতে হতো। কিন্তু Next.js 16-এ **Cache Components (`'use cache'`)** এবং **Partial Prerendering (PPR)** এর কারণে পুরো পেজের ওপর ফোর্সফুল্লি কোনো একক রেন্ডারিং স্ট্র্যাটেজি চাপিয়ে দেওয়ার আর প্রয়োজন নেই। এই গাইডে আমরা বিস্তারিত জানবো: * 👉 Static ও Dynamic Rendering-এর **Modern Definition** * 👉 Next.js 16-এর নতুন ক্যাশিং মডেল (`'use cache'`, `cacheLife`, `cacheTag`) * 👉 Partial Prerendering (PPR) কীভাবে কাজ করে * 👉 Dynamic Server Functions (`await cookies()`, `await headers()`) * 👉 রিয়েল লাইফ **Use Cases** এবং **Best Practices** --- ## Static Rendering কী? Static Rendering হলো এমন একটি পদ্ধতি যেখানে রুটের অংশবিশেষ বা সম্পূর্ণ HTML এবং RSC Payload (**React Server Components Payload**) মূলত **Build Time**-এ তৈরি হয়ে CDN (**Content Delivery Network**)-এ সেভ বা ক্যাশ থাকে। Next.js 16-এ যে কোড কোনো নেটওয়ার্ক কল, কুকি বা ইউজার হেডার অ্যাক্সেস করে না, তা স্বয়ংক্রিয়ভাবে অ্যাপের **Static Shell**-এ অ্যাড হয়ে যায়। ইউজার সাইটে ভিজিট করার সাথে সাথে কোনো সার্ভার সাইড প্রসেসিং বা ডাটাবেজ কুয়েরি ছাড়াই এজ সিডিএন থেকে পেজের স্ট্যাটিক ফ্রেম **instantly render** হয়। ### Static Rendering Workflow ![image](https://i.ibb.co/9mj79sk7/static-rendering-workflow.webp) ### বাস্তব উদাহরণ * ✅ মার্কেটিং ও ল্যান্ডিং পেজ * ✅ প্রজেক্ট পোর্টফোলিও বা ডক্যুমেন্টেশন * ✅ About Us বা Privacy Policy --- ## Dynamic Rendering কী? Dynamic Rendering হলো এমন একটি পদ্ধতি যেখানে **প্রতিটি ইউজার রিকোয়েস্টের সময় (Request Time)** সার্ভার রানটাইমে নতুন ডেটা প্রসেস করে এবং ফ্রেশ কনটেন্ট ব্রাউজারে স্ট্রিম করে পাঠায়। যখন কোনো কনটেন্ট ইউজারের ব্যক্তিগত আইডেন্টিটি, রিকোয়েস্ট হেডার বা লাইভ ডেটার পরিবর্তনের ওপর নির্ভর করে, তখন Dynamic Rendering প্রয়োজন হয়। ### Dynamic Rendering Workflow ![image](https://i.ibb.co/1fRj7mbD/Dynamic-Rendering-Workflow.png) ### বাস্তব উদাহরণ * ✅ ইউজার ড্যাশবোর্ড ও প্রোফাইল সেটিংস * ✅ শপিং কার্ট ও পেমেন্ট চেকআউট পেজ * ✅ রিয়েল-টাইম স্টক বা কারেন্সি এক্সচেঞ্জ ফিড --- ## Next.js 16-এর নতুন রূপ: Partial Prerendering (PPR) মডার্ন Next.js-এ Static বনাম Dynamic আর কোনো **conflicting** বিষয় নয়; বরং তারা একই পেজে পাশাপাশি কাজ করে। * 👉 **Static Shell:** পেজের হেডার, সাইডবার, ফুটার এবং ক্যাশ করা ডেটা **Build Time**-এই তৈরি থাকে। ইউজার ক্লিক করার সাথে সাথে এটি স্ক্রিনে **instantly** চলে আসে। * 👉 **Dynamic Holes:** পেজের যে অংশে রানটাইম ডেটা দরকার (যেমন ইউজারের কার্ট ব্যালেন্স বা নোটিফিকেশন), সেগুলোকে React `` দিয়ে **wrap** করে রাখা হয়। সার্ভার ব্যাকগ্রাউন্ডে এগুলো প্রসেস হওয়া মাত্র ব্রাউজারে **stream** করে পাঠিয়ে দেয়। ```tsx import { Suspense } from 'react'; import StaticHero from './StaticHero'; import DynamicUserBalance from './DynamicUserBalance'; export default function DashboardPage() { return (

{/* এটি CDN থেকে instantly রেন্ডার হবে (Static) */} {/* এটি Request Time-এ সার্ভার থেকে stream হবে (Dynamic) */} ব্যালেন্স লোড হচ্ছে...

); } ``` --- ## Next.js 16 Cache Components: `'use cache'` এবং `cacheLife` পুরোনো ভার্সনে ব্যবহৃত রুট-লেভেল কনফিগারেশন যেমন `export const revalidate = 60` বা জটিল `unstable_cache` এখন অতীত। Next.js 16-এ ক্যাশিং সম্পূর্ণ **Explicit বা Opt-in** এবং এটি কম্পোনেন্ট বা ফাংশন লেভেলে কাজ করে। ### ১. `'use cache'` দিয়ে ক্যাশিং যেকোনো কম্পোনেন্ট বা ডাটাবেজ কোয়েরিকে ক্যাশ করতে কেবল ডিরেক্টিভটি ডিক্লেয়ার করলেই চলে: ```tsx // components/ProductCatalog.tsx import { cacheLife, cacheTag } from 'next/cache'; export default async function ProductCatalog() { 'use cache'; // Next.js এই কম্পোনেন্টের আউটপুট ক্যাশ করে নেবে cacheLife('hours'); // ক্যাশ কতক্ষণ ভ্যালিড থাকবে (যেমন: hours, days, max) cacheTag('products'); // পরবর্তীতে ম্যানুয়ালি ইনভ্যালিডেট করার ট্যাগ const products = await db.query.products.findMany(); return (

{products.map(p =>

{p.name}

)}

); } ``` ### ২. Dynamic APIs এখন Asynchronous যদি কোনো কম্পোনেন্টে ইউজারের রিকোয়েস্ট ডেটা প্রয়োজন হয়, তবে স্বয়ংক্রিয়ভাবে সেটি Dynamic হিসেবে ট্রিগার হবে: ```tsx import { cookies, headers } from 'next/headers'; export default async function ProfileHeader() { // Next.js 15 ও 16-এ cookies() এবং headers() অবশ্যই await করতে হবে const cookieStore = await cookies(); const token = cookieStore.get('auth_token'); return

Welcome User!

; } ``` --- ## Static vs Dynamic vs PPR (তুলনামূলক চিত্র) | ফিচার | Pure Static | Pure Dynamic | Modern PPR + Cache Components | | --- | --- | --- | --- | | **রেন্ডার টাইম** | Build Time | Request Time | Build Time Shell + Request Time Stream | | **TTFB (Time to First Byte)** | Ultra-fast (CDN) | Database ও Server-এর ওপর নির্ভরশীল | Ultra-fast (Static Shell ইনস্ট্যান্টলি সার্ভ হয়) | | **Caching Control** | পুরো পেজ লেভেলে | কোনো ক্যাশ নেই | Granular কম্পোনেন্ট/ফাংশন লেভেলে | | **Personalized Data (Auth)** | সাপোর্ট করে না | সম্পূর্ণ সাপোর্ট করে | নির্দিষ্ট Dynamic হোলে নিখুঁতভাবে কাজ করে | | **Revalidation** | পুরো প্রজেক্ট রিবিল্ড | প্রয়োজন নেই | `updateTag()` বা `revalidateTag()` দিয়ে | --- ## কখন কোনটি ব্যবহার করবেন? * 🟨 **Pure Static:** ব্লগ পোস্ট, সাধারণ ডকুমেন্টেশন, বা ল্যান্ডিং পেজ যেখানে কোনো ইউজার সেশনের প্রয়োজন পড়ে না। * 🟨 **PPR (Recommended):** ই-কমার্স স্টোর, নিউজ পোর্টাল বা সোশ্যাল মিডিয়া ফিড—যেখানে পেজের বেশিরভাগ structure স্ট্যাটিক রাখা যায়, কিন্তু ইউজারের কার্ট, কমেন্ট সেকশন বা লাইভ নোটিফিকেশন ডাইনামিকালি লোড করাতে হয়। * 🟨 **Pure Dynamic:** ইন্টারনাল টুলস, অ্যাডমিন প্যানেল বা প্রাইভেট ইউজার ড্যাশবোর্ড যেখানে পুরো পেজের শুরু থেকেই অথেন্টিকেশন ও সেশন টোকেন ভ্যালিডেশন আবশ্যক। --- ## Modern Best Practices * 🚀 **Default Uncached Model:** মনে রাখবেন Modern Next.js-এ `fetch` কল ডিফল্টভাবে ক্যাশ হয় না। ক্যাশ করতে চাইলে কম্পোনেন্ট লেভেলে `'use cache'` ব্যবহার করতে হবে। * 🚀 **Suspense বাউন্ডারি ব্যবহার:** পেজের একটি সাধারণ ডায়নামিক কম্পোনেন্টের জন্য পুরো পেজকে ব্লকিং dynamic করবেন না; dynamic অংশটিকে সর্বদা `` দিয়ে র‍্যাপিং করে রাখবেন। * 🚀 **উপযুক্ত `cacheLife` প্রোফাইল সেট:** দ্রুত পরিবর্তনশীল ডেটার জন্য `cacheLife('minutes')` এবং প্রায় অপরিবর্তনশীল ডেটার জন্য `cacheLife('days')` বা `cacheLife('max')` ব্যবহার করবেন। --- Next.js 16-এর উদ্দেশ্য হলো ডেভেলপারকে আর Static বনাম Dynamic-এর মাঝে কোনো একটি বেছে নিয়ে আপস করতে না দেওয়া। Cache Components ও PPR-এর মাধ্যমে আপনি একই পেজে Static-এর আল্ট্রা-ফাস্ট লোডিং স্পিড এবং Dynamic-এর রিয়েল-টাইম ফ্লেক্সিবিলিটি একসাথে হ্যান্ডেল করতে পারবেন। 4c:[["$","$L2b",null,{}],["$","div",null,{"children":[["$","div",null,{"className":"flex items-center gap-2 mb-4","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-book-open h-5 w-5 text-blue-600","aria-hidden":"true","children":[["$","path","1akyts",{"d":"M12 7v14"}],["$","path","ruj8y",{"d":"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"}],"$undefined"]}],["$","h3",null,{"className":"font-semibold text-lg","children":"Content"}]]}],["$","div",null,{"className":"prose prose-neutral dark:prose-invert max-w-none","children":["$","$L52",null,{"content":"$53"}]}]]}]] 4d:["$","$L54",null,{"title":"Static vs Dynamic Rendering: Next.js 16 সম্পূর্ণ বাংলা গাইড","slug":"static-vs-dynamic-rendering"}] 4e:["$","div",null,{"className":"my-10","children":["$","$L55",null,{"variant":"blog"}]}] 4f:["$","div",null,{"className":"border-y py-6 mb-10 flex flex-wrap items-center gap-4","children":[["$","$L56",null,{"blogId":"6a6ecbb9062cad23da2e128f","initialCount":0,"slug":"static-vs-dynamic-rendering"}],["$","button",null,{"className":"inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border hover:bg-accent/10 transition-colors","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-message-circle w-5 h-5","aria-hidden":"true","children":[["$","path","1sd12s",{"d":"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"}],"$undefined"]}],"Comment"]}]]}] 50:["$","$L57",null,{"initialCommentsCount":0,"initialLikesCount":0,"slug":"static-vs-dynamic-rendering"}] 51:["$","div",null,{"className":"mt-20","children":["$","$L58",null,{"relatedBlogs":[]}]}]

Blog

Static vs Dynamic Rendering: Next.js 16 সম্পূর্ণ বাংলা গাইড

Content

Enjoyed this article?

Comments