57:I[753780,["$7","$8","$9","$a","$26","$27","$28"],"default"] 59:I[55935,["$7","$8","$9","$a","$26","$27","$28"],"default"] 5a:I[19689,["$7","$8","$9","$a","$26","$27","$28"],"default"] 5b:I[485653,["$7","$8","$9","$a","$26","$27","$28"],"default"] 5c:I[494017,["$7","$8","$9","$a","$26","$27","$28"],"default"] 5d:I[72364,["$7","$8","$9","$a","$26","$27","$28"],"default"] 47:["$","span","Next.js",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","Next.js"]}] 48:["$","span","Web Development",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","Web Development"]}] 49:["$","span","React",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","React"]}] 4a:["$","span","Frontend Development",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","Frontend Development"]}] 4b:["$","span","App Router",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","App Router"]}] 4c:["$","span","Server Components",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","Server Components"]}] 4d:["$","span","Client Components",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","Client Components"]}] 4e:["$","span","SEO Optimization",{"className":"px-3 py-1 rounded-full bg-muted text-xs text-muted-foreground","children":["#","SEO Optimization"]}] 4f:["$","h1",null,{"className":"text-4xl md:text-5xl font-bold leading-tight mb-6","children":"Server Component vs Client Component সম্পূর্ণ গাইড"}] 50:["$","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-07-24T16:55:00.907Z","children":"Jul 24, 2026, 04:55 PM"}]]}],["$","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":[98," 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":[6," 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":[1," comments"]}]]}]]}] 58:T28e8,অনেকেই মনে করেন 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. 51:[["$","$L2a",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":["$","$L57",null,{"content":"$58"}]}]]}]] 52:["$","$L59",null,{"title":"Server Component vs Client Component সম্পূর্ণ গাইড","slug":"server-component-vs-client-component"}] 53:["$","div",null,{"className":"my-10","children":["$","$L5a",null,{"variant":"blog"}]}] 54:["$","div",null,{"className":"border-y py-6 mb-10 flex flex-wrap items-center gap-4","children":[["$","$L5b",null,{"blogId":"6a6398e4ca0d68376e207865","initialCount":6,"slug":"server-component-vs-client-component"}],["$","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"]}]]}] 55:["$","$L5c",null,{"initialCommentsCount":1,"initialLikesCount":6,"slug":"server-component-vs-client-component"}] 56:["$","div",null,{"className":"mt-20","children":["$","$L5d",null,{"relatedBlogs":[]}]}]

Blog

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

Content

Enjoyed this article?

Comments