Client Component பிரவுசரில் இயங்குகிறது (மேலும் ஆரம்ப HTML க்கு சர்வரில் முன்-রெண்டர் செய்யப்படுகிறது). நீங்கள் கோப்பின் மேலிலுள்ள "use client" নির্দেশ நির்দেশ দিয়ে அதைத் தேர்ந்தெடுக்கவும். இন்டারঅ্যাক்টিভিটি, நிலை, விளைவுகள், அல்லது ப्रவுசर் API கள் தேவைப்படும் போதெல்லாம் உங்களுக்கு அவை தேவை.
ஒன்றை அறிவிக்கப்படுதல்
"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 <button onClick={() => setCount(count + 1)}>Count: {count}</button>; // ✅ events
}
Client Component தேவை இருக்கும் போது
✓ 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" என்று குறிப்பிட்டால் அது மற்றும் அது கொண்டுவரும் அனைத்தும் கிளையன்ட்번들ის பகுதியாகிறது. எனவே நீங்கள் கிளையன்ட்경계ற்றை சிறியதாகவும் மரத்தில் குறைவாகவும் - "கிளையன்ட் தீவுகள்" - என்பதை விரும்புகிறீர்கள். பிற விளையாட்டுக்களைப் பதிவுசெய்ய மேல்-স্তरের லेআউட்டை கிளையன்ட் என்று குறிப்பிடுவதற்கு பதிலாக (இது முழு অ্যাப்लிকேশনை பிரவுசர்번들ுக்கு இழுக்கும்).
// ✅ Good: server page, small client island only where needed
export default async function Page() { // Server Component
const data = await getData();
return <><StaticContent data={data} /><InteractiveWidget /></>; // island is "use client"
}
সার্ভার से क्लায়েंट ডেटা পাঠানো
// Server Component fetches, passes serializable props down to the client island
<LikeButton initialLikes={post.likes} postId={post.id} />
সার्ভার থেকে क्लায়েंट कম্पোनেন্টে পাস করা Props অবশ্যই সিরিয়ালাইজযোগ্য হওয়া চাहिए (কোন ফাংশন নেই, কোন ক्लাস ইনস্टেন্স নেই) কারণ তারা সার্ভার→क्लায়েंट সীমানা অতিক্রম করে।
কেন এটি গুরুত্বপূর্ণ
ক্লায়েন্ট কম্পোনেন্টগুলি হল কীভাবে আপনি অন্যথায় সার্ভার-প্রথম অ্যাপে ইন্টারঅ্যাক্টিভিটি যোগ করবেন।
দক্ষতা তাদের ন্যূনতম এবং পাতায় রাখা - যেখানে প্রয়োজন সেখানে ইন্টারঅ্যাক্টিভিটি, অন্যত্র সার্ভার কম্পোনেন্ট - যাতে আপনি কম জাভাস্ক্রিপ্ট পাঠান।
"use client" কে গাছে উচ্চে ভুলভাবে রাখা একটি সাধারণ ভুল যা বান্ডেলকে ফুলিয়ে দেয় এবং সার্ভার কম্পোনেন্টের সুবিধাগুলি হারিয়ে দেয়।