আপনি কখন এবং কীভাবে Client Components ব্যবহার করেন?

Question

Accepted Answer

একটি **Client Component** ব্রাউজারে চলে (এবং প্রাথমিক HTML এর জন্য সার্ভারে প্রি-রেন্ডার করা হয়)। আপনি ফাইলের শীর্ষে **`"use client"`** নির্দেশনা দিয়ে এতে অপ্ট-ইন করেন। আপনার যখনই ইন্টারঅ্যাক্টিভিটি, state, effects, বা ব্রাউজার APIs প্রয়োজন তখনই আপনার এটি প্রয়োজন। ## একটি ঘোষণা করা ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## যখন আপনার Client Component প্রয়োজন ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## নির্দেশনা সন্তানদের কাছে ছড়িয়ে পড়ে একটি ফাইলকে `"use client"` দিয়ে চিহ্নিত করা এটিকে এবং **এটি যা import করে সবকিছু** client bundle এর অংশ করে তোলে। তাই আপনি চান client সীমানা **ছোট এবং গাছে নিম্ন** থাকুক — "client islands" — একটি top-level layout কে client হিসাবে চিহ্নিত করার পরিবর্তে (যা পুরো অ্যাপকে ব্রাউজার bundle এ টেনে আনবে)। ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## সার্ভার থেকে ক্লায়েন্টে ডেটা পাস করা ```tsx // Server Component fetches, passes serializable props down to the client island ``` Server থেকে Client Component এ পাস করা Props অবশ্যই **serializable** হতে হবে (কোনো functions, কোনো class instances নয়) কারণ তারা server→client সীমানা অতিক্রম করে। ## কেন এটি গুরুত্বপূর্ণ Client Components হল কীভাবে আপনি অন্যথায় server-first অ্যাপে ইন্টারঅ্যাক্টিভিটি যোগ করেন। দক্ষতা হল সেগুলি ন্যূনতম এবং পাতায় রাখা — যেখানে প্রয়োজন সেখানে ইন্টারঅ্যাক্টিভিটি, অন্য সব জায়গায় Server Components — যাতে আপনি সর্বনিম্ন JavaScript পাঠান। গাছে উচ্চে `"use client"` রাখা একটি সাধারণ ভুল যা bundle কে ফুলিয়ে দেয় এবং Server Components এর সুবিধা হারায়।