App Router এ Server Components কীভাবে কাজ করে?

Question

Accepted Answer

**React Server Components (RSC)** **শুধুমাত্র সার্ভারে** রেন্ডার করে — তাদের JavaScript কখনও ব্রাউজারে পাঠানো হয় না। App Router এ, প্রতিটি component ডিফল্টরূপে একটি Server Component; আপনি স্পষ্টভাবে client আচরণে অপ্ট ইন করেন। ## একটি Server Component কী করতে পারে ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Server Components **অ্যাসিঙ্ক্রোনাস** হতে পারে, সরাসরি ডেটা `await` করতে পারে, এবং শুধুমাত্র সার্ভার সংস্থানগুলি অ্যাক্সেস করতে পারে (ডাটাবেস, ফাইলসিস্টেম, গোপনীয়তা) — কারণ তারা সার্ভারে চলে। ডেটা আনার জন্য কোনো API স্তরের প্রয়োজন নেই, এবং গোপনীয়তা কখনও ক্লায়েন্টে পৌঁছায় না। ## বড় সুবিধা: সেই component এর জন্য শূন্য client JS ব্রাউজার **রেন্ডার করা HTML/UI** পায়, component এর code বা এর dependencies নয়। একটি Server Component যা একটি ভারী markdown বা date লাইব্রেরি ব্যবহার করে সেই লাইব্রেরির **কোনো অংশ** ব্রাউজারে পাঠায় না — bundle সাইজ নাটকীয়ভাবে কমায়। ## Server Components কী করতে পারে না ```tsx // ❌ these only work in Client Components useState, useEffect, useRef // hooks (no interactivity/state on the server) onClick, onChange // event handlers window, localStorage, document // browser-only APIs ``` কোনো ইন্টারঅ্যাকটিভিটি, state, effects, বা browser APIs নেই — সেগুলি একটি Client Component প্রয়োজন। ## সার্ভার এবং ক্লায়েন্ট রচনা করা ```tsx // Server Component fetches data, passes it to an interactive Client Component import LikeButton from "./LikeButton"; // a "use client" component export default async function Post({ id }) { const post = await getPost(id); // server-side fetch return <>

; } ``` প্যাটার্ন: Server Components ডেটা/কাঠামো পরিচালনা করে; শুধুমাত্র যেখানে ইন্টারঅ্যাকটিভিটা প্রয়োজন সেখানে Client Components এমবেড করুন ("islands")। ## এটি কেন গুরুত্বপূর্ণ Server Components হল App Router এর সংজ্ঞায়িত বৈশিষ্ট্য। তারা client bundle সাইজ কমায় (ডাউনলোড/পার্স করার জন্য কম JS), একটি API ছাড়াই সরাসরি, নিরাপদ সার্ভার-সাইড ডেটা অ্যাক্সেস অনুমতি দেয়, এবং পারফরম্যান্স এবং SEO উন্নত করে। জেনে যে তারা ডিফল্ট — এবং কোনটি একটি component কে Client Component হতে বাধ্য করে — App Router অ্যাপগুলি দক্ষতার সাথে কাঠামো করা মৌলিক।