एक Client Component ब्राउजरमा चल्छ (र प्रारम्भिक HTML को लागि सर्भरमा पनि पूर्व-रेन्डर गरिन्छ)। तपाई फाइलको शीर्षमा "use client" निर्देश दिएर अप्ट इन गर्नुहुन्छ। तपाईलाई अन्तरक्रियाशीलता, state, effects, वा ब्राउजर 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 serializable हुनु अनिवार्य छ (कुनै कार्य छैन, कुनै क्लास उदाहरणहरू छैन) किनकि तिनीहरू सर्भर→क्लायन्ट सीमा पार गर्छन्।
Client Components अन्यथा सर्भर-प्रथम अनुप्रयोगमा अन्तरक्रियाशीलता थप्ने तरिका हो।
कौशल भनेको उनीहरूलाई न्यूनतम र पत्तेहरूमा राख्नु हो — अन्तरक्रियाशीलता जहाँ यसको आवश्यकता छ, अन्यत्र सर्भर घटकहरू — ताकि तपाई कम से कम JavaScript शिप गर्नुहुन्छु।
"use client" लाई रूखको शीर्षमा गलत स्थानमा राख्नु भनेको एक सामान्य गल्ती हो जसले बन्डललाई फुलाएको छ र सर्भर घटकहरूका लाभहरू छोड्छ।