आप Client Components कब और कैसे वापरतात?

Question

Accepted Answer

एक **Client Component** ब्राउজर में चलता है (आणि प्रारंभिक HTML साठी सर्व्हरवर देखील पूर्व-रेंडर केला जाता है). आप फाइलच्या शीर्षस्थानी **`"use client"`** डायरेक्टिव्हने ऑप्ट इन करता. जेव्हा तुम्हाला इंटरएक्टिव्हिटी, स्टेट, इफेक्ट्स किंवा ब्राउজर 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"` म्हणून चिन्हांकित केल्याने ती आणि **त्यामध्ये सर्व काही आयात करते** हा क्लायंट बंडलचा भाग बनतो. तर तुम्हाला क्लायंट सीमा **लहान आणि ट्रीमध्ये खाली** असावीत - "क्लायंट आयलँड्स" - ऐवजी शीर्ष-स्तरीय लेआउटला क्लायंट म्हणून चिन्हांकित करण्याच्या अनुषंगाने (जे संपूर्ण अ‍ॅप ब्राउজर बंडलमध्ये खेचेल). ```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 ``` सर्व्हरकडून क्लायंट कम्पोनंटला पास केलेल्या Props **सिरिअलाइজेबल** असणे आवश्यक आहे (कोणतेही फंक्शन्स नाहीत, कोणतेही क्लास इन्स्टन्सेस नाहीत) कारण ते सर्व्हर→क्लायंट सीमा ओलांडतात. ## ते महत्वाचे का आहे Client Components हे तुम्हाला अन्यथा सर्व्हर-प्रथम अ‍ॅपमध्ये इंटरएक्टिव्हिटी कसे जोडता हे आहे. कौशल्य हे त्यांना किमान आणि पत्रांमध्ये ठेवणे आहे — इंटरएक्टिव्हिटी जेथे आवश्यक आहे, Server Components इतरत्र सर्वत्र — म्हणून तुम्ही सर्वकमी JavaScript पाठवता. ट्रीमध्ये `"use client"` उच्चस्थानी ठेवणे हे एक सामान्य चूक आहे जी बंडलला फुगवते आणि Server Components च्या लाभांचा त्याग करते.