কেন আমরা সাধারণ React (Vite/CRA) বাদ দিয়ে Next.js ব্যবহার করি? মূল কারণ হলো রেন্ডারিং আর্কিটেকচার। Next.js আমাদের ক্লায়েন্ট-সাইড (CSR) এবং সার্ভার-সাইড (SSR/SSG) এর একটি পারফেক্ট ব্লেন্ডিং উপহার দেয়, যা পারফরম্যান্স এবং SEO এর জন্য অপরিহার্য।
ধরি, আমরা পিওর React দিয়ে একটি ব্লগ সাইট বানালাম। যখন কোনো ইউজার বা গুগলের সার্চ বট (Crawler) আমাদের সাইটে ভিজিট করে, সার্ভার তাদেরকে শুধু একটি সাদা HTML ফাইল পাঠায়, যার ভেতরে লেখা থাকে: <div id="root"></div>
এরপর ব্রাউজারকে কয়েক মেগাবাইট সাইজের জাভাস্ক্রিপ্ট (bundle.js) ডাউনলোড করে সেই সাদা পেজে UI রেন্ডার করতে হয়। এই প্রক্রিয়ায় ইনিশিয়াল লোড অনেক স্লো হয়ে যায় এবং গুগল বট সাদা পেজ দেখে সাইটের রেংকিং কমিয়ে দেয় (Bad SEO)। এর সমাধান হলো Next.js, যা সার্ভারেই HTML তৈরি (Pre-render) করে ব্রাউজারে পাঠায়!
Client-Side Rendering: ব্রাউজার JS ডাউনলোড করে UI বানায়। SEO এর জন্য খারাপ, লোড হতে বেশি সময় নেয়। ড্যাশবোর্ডের মতো হাইলি ইন্টারঅ্যাক্টিভ পেজে এটি মানানসই।
Server-Side Rendering: প্রতিবার ইউজার রিকোয়েস্ট করলে সার্ভার নতুন করে ডাটাবেস থেকে ডেটা এনে HTML তৈরি করে। ডেটা সবসময় ফ্রেশ থাকে, তবে সার্ভারে একটু লোড পড়ে।
Static Site Generation: প্রোজেক্ট বিল্ড (Build) করার সময় একবারই HTML তৈরি হয়ে যায়। ডেটা গ্লোবাল CDN থেকে সার্ভ হয় বলে এটি রকেটের মতো ফাস্ট!
Incremental Static Regeneration: SSG এর মতোই ফাস্ট, তবে এটি ব্যাকগ্রাউন্ডে নির্দিষ্ট সময় পরপর (যেমন: প্রতি ৬০ সেকেন্ডে) ডাটাবেস থেকে নতুন ডেটা এনে পেজটিকে স্বয়ংক্রিয়ভাবে আপডেট করে দেয়।
Next.js 14-এর App Router-এ সবকিছু ডিফল্টভাবে Server Component। এখানে আগের মতো getServerSideProps ফাংশন লিখতে হয় না। আমরা নেটিভ fetch API এর ক্যাশিং বিহেভিয়ার (Caching behavior) কন্ট্রোল করেই পুরো পেজের রেন্ডারিং স্ট্র্যাটেজি পাল্টে ফেলতে পারি!
// 1. SSG (Static) - Default Behavior. Cached indefinitely. const res = await fetch('https://api.example.com/posts'); // 2. SSR (Dynamic) - Fetches fresh data on every single request. const res = await fetch('https://api.example.com/posts', { cache: 'no-store' }); // 3. ISR (Incremental) - Serves cached HTML, but updates in background every 60s. const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 } }); export default async function BlogPage() { const data = await res.json(); return ( <div> <h1>{data.title}</h1> <p>{data.content}</p> </div> ); }
নিচের সিমুলেটরটি ট্রাই করুন। CSR, SSR এবং SSG তে ক্লিক করে দেখুন ব্রাউজার, সার্ভার এবং CDN-এর মাঝে ডাটা কীভাবে ফ্লো করে এবং Initial Load Time বা TTFB (Time-To-First-Byte) তে কত বড় পার্থক্য তৈরি হয়!