ఎప్పుడు మరియు ఎలా Client Components ను ఉపయోగిస్తారు?

Question

Accepted Answer

**Client Component** విషయ విషయ (మరియు ప్రారంభ HTML కోసం సర్వర్‌పై ముందుగా-రెండర్ చేయబడుతుంది). ఫైల్ పైభాగంలో **`"use client"`** డిరెక్టివ్‌తో దీన్ని ఎంచుకుంటారు. ఇంటరాక్టివిటీ, స్థితి, ప్రభావాలు, లేదా బ్రౌజర్ API ల అవసరం వచ్చినప్పుడు వాటిని చేస్తారు. ## ఒకటి ప్రకటించడం ```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 తప్పనిసరిగా **సిరియలైజేబిల్** (ఫంక్షన్ లేదు, క్లాస్ ఇన్‌స్టెన్‌సెస్ లేదు) ఉండాలి ఎందుకంటే అవి సర్వర్→క్లయింట్ సరిహద్దు దాటుతాయి. ## ఇది ఎందుకు ముఖ్యమైనది క్లయింట్ కంపోనెంట్‌లు నిస్సందేహంగా సర్వర్-ఫర్స్ట్ యాప్‌లో ఇంటరాక్టివిటీని ఎలా జోడించాలో. కౌశల్యం వాటిని కనిష్ఠ మరియు ఆకులలో ఉంచడం — ఎక్కడ అవసరమైతే ఇంటరాక్టివిటీ, ఇతర చోట సర్వర్ కంపోనెంట్‌లు — కనుక మీరు కనీసం జావాస్క్రిప్ట్‌ను పంపుకుంటారు. చెట్టులో ఎత్తుగా `"use client"` ను తప్పుగా ఉంచడం బండిల్‌ను ఊదిపొండ్ అందుకు సర్వర్ కంపోనెంట్‌ల ప్రయోజనాలను కోల్పోతుంది.