React Server Components (RSC) — Hooks-এর পর React ইকোসিস্টেমে সবচেয়ে বড় পরিবর্তনগুলোর একটা। লজিক সার্ভারে সরিয়ে আনলে বান্ডল সাইজ কমে, ডেটা ফেচিং দক্ষ হয়।
Server Components আসলে কী?
প্রথাগতভাবে React কম্পোনেন্ট ব্যবহারকারীর ডিভাইসে রেন্ডার হতো (Client Components)। কিন্তু Server Components পুরোপুরি সার্ভারে রেন্ডার হয়, তারপর সিরিয়ালাইজড একটা ফরম্যাটে ক্লায়েন্টে পাঠানো হয়। মানে:
- শূন্য বান্ডল সাইজ: শুধু সার্ভারে ব্যবহৃত লাইব্রেরি ক্লায়েন্টে যায় না।
- সরাসরি ডাটাবেস অ্যাক্সেস: কম্পোনেন্টের ভেতর থেকেই সরাসরি DB কোয়েরি চালানো যায়।
নোট: Server Components-এ useState বা useEffect-এর মতো হুক ব্যবহার করা যায় না — কারণ এগুলো ব্রাউজারে চলে না।
কম্পোজিশন দিয়ে "Fast Approach"
Server আর Client কম্পোনেন্ট মিশিয়ে ব্যবহার করলে যেটা পাওয়া যায়, সেটাকে বলে "Fast Approach"। ভারী স্কেলিটন আর ডেটা সার্ভারে রেন্ডার করেন, আর শুধু ইন্টারঅ্যাকটিভ "আইল্যান্ড"গুলো ক্লায়েন্টে হাইড্রেট করেন।
উদাহরণ প্যাটার্ন
// Server Component
async function BlogIndex() {
const posts = await db.posts.findMany();
return (
<div>
{posts.map((post) => (
// ইন্টারঅ্যাকটিভিটির জন্য Client Component
<LikeButton key={post.id} initialLikes={post.likes} />
))}
</div>
);
}
এই হাইব্রিড মডেল নিশ্চিত করে — প্রথম পেজ লোড বিদ্যুতের গতিতে (Server) আর ব্যবহারকারীর প্রত্যাশিত সমৃদ্ধ ইন্টারঅ্যাকটিভিটি বজায় থাকে (Client)।
উপসংহার
"Advanced" অ্যাপ্লিকেশন তৈরিতে RSC ব্যবহার করা অপরিহার্য। এটা ব্রাউজারে পাঠানো JavaScript কমায়, Core Web Vitals উন্নত করে — আর সেই সূত্রে আপনার SEO র্যাঙ্কিংও।