Client Component பிரவுசரில் இயங்குகிறது (மேலும் ஆரம்ப HTML க்கு சர்வரில் முன்-রெண்டர் செய்யப்படுகிறது). நீங்கள் கோப்பின் மேலிலுள்ள "use client" নির্দেশ நির்দেশ দিয়ে அதைத் தேர்ந்தெடுக்கவும். இন்டারঅ্যাক்টিভিটি, நிலை, விளைவுகள், அல்லது ப्रவுசर் API கள் தேவைப்படும் போதெல்லாம் உங்களுக்கு அவை தேவை.
;
{ useState } ;
() {
[count, setCount] = ();
;
}
✓ 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" কে গাছে উচ্চে ভুলভাবে রাখা একটি সাধারণ ভুল যা বান্ডেলকে ফুলিয়ে দেয় এবং সার্ভার কম্পোনেন্টের সুবিধাগুলি হারিয়ে দেয়।
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை