Server vs Client Components: কখন কোনটি ব্যবহার করবেন? (বিস্তারিত গাইড)

ভূমিকা

Next.js 13+ এর সাথে যখন App Router আসলো, তখন সবচেয়ে বড় যে পরিবর্তনটি এলো তা হলো Server Components। নতুন ডেভেলপারদের জন্য এটি বোঝা একটু কঠিন হতে পারে: "সবকিছুই তো React Component, তাহলে Server আর Client এর মধ্যে পার্থক্য কী?"

সবচেয়ে বড় কনফিউশন হয়—কখন আমাকে ফাইলের শুরুতে 'use client' লিখতে হবে?

আজকের এই ব্লগে আমরা এই কনফিউশন পুরোপুরি দূর করব।

---

বাই ডিফল্ট সব কিছুই Server Component 🟢

Next.js App Router-এ আপনি যখন কোন পেজ বা কম্পোনেন্ট বানান, সেটি বাই ডিফল্ট (By Default) একটি Server Component। এর মানে হলো, এই কম্পোনেন্টের কোড ব্রাউজারে যায় না, সার্ভারে রান হয় এবং শুধু তৈরি হওয়া HTML ব্রাউজারে পাঠানো হয়।

Server Component এর সুবিধা:

1. Security: আপনি সরাসরি ডাটাবেস কল করতে পারেন (যেমন await db.users.find())। আপনার API Key বা সিক্রেট কোড ক্লায়েন্ট সাইডে লিক হওয়ার ভয় নেই।
2. Performance: এর কোড ব্রাউজার বান্ডিলে যোগ হয় না, তাই ওয়েবসাইট খুব ফাস্ট লোড হয়।
3. SEO: সার্চ ইঞ্জিন (Google) রেডিমেড HTML পায়, তাই র‍্যাঙ্কিং ভালো হয়।

---

তাহলে Client Component কী? 🔵

যখন আপনার কম্পোনেন্টে ইন্টারঅ্যাক্টিভিটি (Interactivity) দরকার হয়, তখন সেটিকে Client Component বানাতে হয়।

সহজ কথায়, যদি আপনার কম্পোনেন্টে নিচের জিনিসগুলো লাগে, তবে সেটি Client Component:

• useState, useEffect, useRef (State ম্যানেজমেন্ট)
• onClick, onChange, onSubmit (Event Listeners)
• Browser APIs (যেমন localStorage, window, document)

Client Component বানাতে হলে ফাইলের একদম শুরুতে 'use client' লিখলেই কাজ শেষ!

'use client' // 👈 এই লাইনটি ম্যাজিক করে!

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

---

এক নজরে পার্থক্য (Comparison Table)

| ফিচার | Server Component 🟢 | Client Component 🔵 | | :--- | :--- | :--- | | ডাটা ফেচিং (Fetch Data) | ✅ সেরা অপশন | ❌ সরাসরি সম্ভব না (useEffect লাগে) | | সিক্রেট কি (API Keys) | ✅ নিরাপদ | ❌ নিরাপদ না (লিক হতে পারে) | | User Interaction (Click) | ❌ সম্ভব না | ✅ সম্ভব | | State (useState) | ❌ সম্ভব না | ✅ সম্ভব | | Browser API (window) | ❌ সম্ভব না | ✅ সম্ভব |

---

কখন কোনটি ব্যবহার করবেন? (Best Practices)

✅ Server Component ব্যবহার করুন যখন:

• ডাটা লোড করছেন (Fetch data)।
• ডাটাবেস এক্সেস করছেন।
• সেনসিটিভ তথ্য (API Key) নিয়ে কাজ করছেন।
• UI শুধু দেখানোর জন্য (Static UI), যেখানে ক্লিক বা স্টেটের দরকার নেই।

✅ Client Component ব্যবহার করুন যখন:

• বাটনে ক্লিক করলে কিছু হবে (Click events)।
• ফর্ম ইনপুট নিচ্ছেন (Form inputs)।
• useEffect বা useState দরকার।
• থার্ড-পার্টি লাইব্রেরি ব্যবহার করছেন যা ব্রাউজারে চলে (যেমন: Framer Motion)।

একটি রিয়েল-লাইফ উদাহরণ

ধরুন একটি Navbar বানাচ্ছেন।

• Navbar এর লোগো এবং লিঙ্কগুলো Server Component হতে পারে (কারণ এগুলো স্ট্যাটিক)।
• কিন্তু "Login/Logout" বাটন বা "Search Bar" টি Client Component হতে পারে (কারণ এখানে ক্লিক বা ইনপুট দরকার)।

Next.js এ আপনি Server Component এর ভেতরে Client Component রেন্ডার করতে পারেন, আবার উল্টোটাও সম্ভব (চিলড্রেন প্রপস দিয়ে)।

উপসংহার

ভয় পাওয়ার কিছু নেই! নিয়ম খুব সহজ: সবসময় Server Component দিয়ে শুরু করুন। কোড করতে করতে যখনই দেখবেন আপনার useState বা onClick দরকার হচ্ছে, তখনই কেবল সেই নির্দিষ্ট কম্পোনেন্টটিকে 'use client' দিয়ে Client Component বানিয়ে ফেলুন। পুরো পেজটিকে Client বানাবেন না, শুধু ইন্টারেক্টিভ অংশটুকু বানান।

হ্যাপি কোডিং! 🚀