તમે 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 **serialize કરી શકાય તેવું** હોવું જોઈએ (કોઈ ફંક્શન નહીં, કોઈ ક્લાસ ઇન્સ્ટેન્સ નથી) કારણ કે તેઓ સર્વર→ક્લાયન્ટ સીમા પાર કરે છે. ## તે શા માટે મહત્વપૂર્ણ છે Client Components એ અન્યથા સર્વર-પ્રથમ એપમાં ઇન્ટરેક્ટિવિટા ઉમેરવાની રીત છે. કૌશલ્ય તેમને ન્યૂનતમ અને પાંદડે રાખવું છે — ત્યાં ઇન્ટરેક્ટિવિટી જ્યાં તેની જરૂર છે, અન્ય કોઈ જગ્યાએ Server Components — તેથી તમે સૌથી ઓછું JavaScript શિપ કરો છો. વૃક્ષમાં `"use client"` ને ખોટી જગ્યાએ મૂકવું એ સામાન્ય ભૂલ છે જે બંડલને ફૂલાવે છે અને Server Components ના લાભોથી વાંચન કરે છે.