एक Client Component ब्राउज़र में चलता है (और प्रारंभिक HTML के लिए सर्वर पर भी पूर्व-प्रस्तुत किया जाता है)। आप फ़ाइल के शीर्ष पर "use client" निर्देश के साथ ऑप्ट-इन करते हैं। जब भी आपको इंटरेक्टिविटी, स्थिति, प्रभाव, या ब्राउज़र APIs की आवश्यकता हो तो आपको इनकी आवश्यकता होती है।
;
{ 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} />
सर्वर से Client Component को पास किए गए Props क्रमानुक्रमणीय होने चाहिए (कोई फ़ंक्शन नहीं, कोई क्लास इंस्टेंस नहीं) क्योंकि वे सर्वर→क्लाइंट सीमा को पार करते हैं।
Client Components अन्यथा सर्वर-प्रथम ऐप में इंटरेक्टिविटी जोड़ने का तरीका है।
कौशल उन्हें न्यूनतम और पत्तियों पर रखना है — जहाँ इसकी आवश्यकता है वहाँ इंटरेक्टिविटी, अन्यत्र Server Components — ताकि आप सबसे कम JavaScript भेजें।
पेड़ में "use client" को गलत जगह रखना एक सामान्य गलती है जो बंडल को बढ़ाती है और Server Components के लाभों को त्याग देती है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें