অনেকেই মনে করেন Server Component মানেই Backend আর Client Component মানেই Frontend। কিন্তু বাস্তবে বিষয়টি একটু ভিন্ন। এই আর্টিকেলে আমরা জানবোঃ- * ✅ Server Component কী * ✅ Client Component কী * ✅ দুটির মধ্যে পার্থক্য * ✅ কখন কোনটি ব্যবহার করা উচিত * ✅ Performance এর উপর কী প্রভাব ফেলে * ✅ Best Practice * ✅ Common Mistakes আপনি যদি Next.js শিখতে শুরু করে থাকেন কিংবা App Router ব্যবহার করেন, তাহলে এই গাইডটি আপনার জন্য। --- ## Server Component কী? Server Component হলো এমন React Component যা **Server-এ Render হয়**। অর্থাৎ Browser-এ JavaScript পাঠানোর আগেই Component-টি Server-এ Execute হয় এবং Browser শুধুমাত্র রেন্ডার হওয়া স্ট্যাটিক HTML পায়। Next.js App Router-এ **Default Component হলো Server Component।** ```tsx export default async function Users() { const users = await fetch("https://jsonplaceholder.typicode.com/users").then( (res) => res.json() ); return (

{users.map((user) => (

{user.name}

))}

); } ``` এখানে Browser সরাসরি কোনো API Call করছে না। Server-ই Data Fetch সম্পন্ন করে HTML রেডি করে পাঠাচ্ছে। --- ## Client Component কী? অনেকের ধারণা **Client Component** শুধুমাত্র ব্রাউজারেই রেন্ডার হয়, যা একটি ভুল ধারণা। **Client Component-ও প্রথমে Server-এ Pre-render হয়ে একটি স্ট্যাটিক HTML শেল তৈরি করে**, যাতে ইউজার দ্রুত পেজটি দেখতে পায়। পরবর্তীতে ব্রাউজারে JavaScript ফাইল ডাউনলোড হলে পেজটি Interactive হয়, যাকে **Hydration** বলা হয়। যখন Component-এর মধ্যে নিচের বিষয়গুলো প্রয়োজন হয়, তখন সেটিকে Client Component করতে হয়: * 👉 `useState`, `useEffect` বা অন্যান্য State/Lifecycle Hooks * 👉 Event Handlers (যেমন: `onClick`, `onChange`) * 👉 Browser APIs (যেমন: `localStorage`, `window`, `navigator`) * 👉 Custom Client Hooks Client Component বানানোর জন্য ফাইলের একদম উপরে Directive লিখতে হয়: ```tsx "use client"; ``` ```tsx "use client"; import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); return ( ); } ``` --- ## Server Component vs Client Component (At a Glance) | Feature | Server Component | Client Component | | --- | --- | --- | | **Execution Location** | Server-only | Server (Pre-render) + Browser (Hydration) | | **Default in App Router** | ✅ Yes | ❌ No (`"use client"` প্রয়োজন) | | **JS Bundle Size** | Zero Bundle Size Impact | JS Bundle-এ যুক্ত হয় | | **SEO & Metadata** | সেরা (`generateMetadata` সাপোর্ট করে) | ভালো (তবে Dynamic Metadata সেট করা কঠিন) | | **Data Fetching** | সরাসরি `async/await` ও DB Query | `use()` Hook, SWR বা TanStack Query | | **Event Handlers** | ❌ (onClick, onChange কাজ করবে না) | ✅ | | **React State & Hooks** | ❌ | ✅ | | **Browser APIs** | ❌ | ✅ (`localStorage`, `window` ইত্যাদি) | --- ## Server Component এর সুবিধা Server Component ব্যবহার করলে অ্যাপ্লিকেশনে বেশ কিছু পারফরম্যান্স বেনিফিত পাওয়া যায়: ### 1. Faster Initial Load & Better UX Browser-এ অতিরিক্ত JavaScript যায় না। ফলে Low-end Device বা ধীরগতির ইন্টারনেটেও পেজ দ্রুত Load হয়। ### 2. Enhanced SEO & Social Sharing: Search Engine ক্রলাররা সরাসরি রেন্ডার হওয়া HTML পড়তে পারে। Blog, E-commerce, বা Documentation সাইটের জন্য এটি অত্যন্ত কার্যকরী। ### 3. Secure Data Fetching & Architecture: Database Direct Query বা Secret API Key সার্ভারেই সীমাবদ্ধ থাকে। ব্রাউজার বা ইউজারের কাছে স্পর্শকাতর কোনো ডেটা বা লজিক এক্সপোজ হয় না। --- ## Client Component এর সুবিধা ### ১. Rich Interactivity: যেকোনো ইন্টারেক্টিভ ইউজার ইন্টারফেস (যেমন: Dropdown, Modal, Theme Switcher, Drag & Drop) তৈরির জন্য Client Component অপরিহার্য। ### ২. Browser API & State Access: ইউজারের ব্রাউজার সেটিংস, Local Storage, Geolocation অ্যাক্সেস করা এবং React-এর সমস্ত Hooks ব্যবহার করার পূর্ণ স্বাধীনতা পাওয়া যায়। --- ## Server Component & Client Component একসাথে ব্যবহারের নিয়ম Next.js-এর সবচেয়ে বড় শক্তি হলো একই পেজে প্রয়োজন অনুযায়ী দুটি কম্পোনেন্টকে একসাথে কম্পোজ করা। ### ✅ Recommended Pattern (Server Injects Client) ```tsx import Counter from "./Counter"; // Client Component import { getPosts } from "@/lib/posts"; export default async function Page() { const posts = await getPosts(); return (

{/* Server Component */} {/* Client Component */}

); } ``` > ⚠️ **গুরুত্বপূর্ণ বিষয়:** Client Component-এর ভেতরে সরাসরি কোনো Server Component ইম্পোর্ট করা যায় না। যদি Client Component-এর ভেতরে Server Component পাঠাতে হয়, তবে তা **`children` prop** হিসেবে পাস করতে হবে। ```tsx "use client"; // ✅ Correct Pattern export default function ClientWrapper({ children }: { children: React.ReactNode }) { return

{children}

; } ``` --- ## Common Mistakes (যে ভুলগুলো এড়িয়ে চলবেন) * ❌ **সব ফাইল-এ `"use client"` দেওয়া:** পুরো প্রজেক্টে অপ্রয়োজনীয়ভাবে `"use client"` দিলে Next.js-এর মূল পারফরম্যান্স ফিচার নষ্ট হয়ে যায়। * ❌ **`"use server"` নিয়ে বিভ্রান্তি:** মনে রাখবেন, `"use server"` দিয়ে Server Component বানানো হয় না! এটি মূলত **Server Actions** তৈরি করার নির্দেশক। * ❌ **Client Component-এ Secret Logic রাখা:** API Key বা sensitive ডিরেক্ট DB logic কখনোই Client Component-এ রাখা যাবে না। * ❌ **Browser API Direct Call in Server Component:** Server Component-এ `window` বা `localStorage` কল করলে Server Error দেবে। --- ## Best Practices * 🎯 **"Server First" মাইন্ডসেট:** সবসময় ডিফল্ট হিসেবে Server Component দিয়ে কাজ শুরু করুন। * 🎯 **Leaves-এ Client Component রাখুন:** কম্পোনেন্ট ট্রি-এর একদম শেষ অংশে (Leaf Components) `"use client"` ব্যবহার করুন, যাতে JS Bundle সাইজ ছোট থাকে। * 🎯 **`server-only` প্যাকেজ ব্যবহার:** কোনো ফাইল বা হেলপার ফাংশন যেন ভুলবশত Client Component-এ ইম্পোর্ট না হয়ে যায়, সেজন্য `import 'server-only'` ব্যবহার করতে পারেন। * 🎯 **Data Fetching সার্ভারেই রাখুন:** ডাটা ফেচিং সবসময় Server Component-এ শেষ করে শুধুমাত্র প্রয়োজনীয় Data টুকু Props হিসেবে Client Component-এ পাঠান। --- ## External References * [Next.js Server Components Documentation](https://nextjs.org/docs/app/building-your-application/rendering/server-components) * [React Server Components RFC](https://github.com/reactjs/rfcs/pull/188) * [React Official Docs - Escalating Interactivity](https://react.dev) --- # উপসংহার Server Component ও Client Component-এর পার্থক্য ও সঠিক ব্যবহার জানা Next.js App Router-এ দক্ষতার পরিচয়। Next.js-এর মূল দর্শন হলো—**"Server First, Client When Needed"**। আপনি যদি ডেটা ফেচিং, এসইও এবং সিকিউরিটিকে সার্ভার কম্পোনেন্টে রাখেন এবং ইন্টারেক্টিভিটিকে আলাদা ক্লায়েন্ট কম্পোনেন্টে আইসোলেট করেন, তবে আপনার অ্যাপ্লিকেশন হবে একাধারে more faster, more secure এবং Maintainable.

Blog

Server Component vs Client Component সম্পূর্ণ গাইড

Content

Comments

Related Articles