Lini na jinsi gani unatumia Client Components?

Question

Accepted Answer

**Client Component** inaendesha katika kivinjari (na pia inarendishwa kabla kwenye seva kwa HTML ya kwanza). Unairuhusu kwa kutumia direktiva **`"use client"`** juu ya faili. Unahitaji sehemu hii kila wakati unahitaji mwingiliano, hali, athari, au API za kivinjari. ## Kutangaza moja ```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 } ``` ## Wakati unahitaji KWELI 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) ``` ## Direktiva inatiririka kwa watoto Kuashiria faili na `"use client"` inayafanya yenyewe na **kila kitu kinachoimporta** sehemu ya bundle ya mteja. Kwa hivyo unataka mipaka ya mteja kuwa **ndogo na chini katika mti** — "kisiwa cha mteja" — badala ya kuashiria muundo wa juu-juu kama mteja (ambayo ingesingiza programu nzima katika bundle ya kivinjari). ```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" } ``` ## Kupitisha data kutoka seva hadi mteja ```tsx // Server Component fetches, passes serializable props down to the client island ``` Rekebo iliyopitishwa kutoka seva hadi Client Component lazima iwe **inayoweza kusirializa** (hakuna kazi, hakuna mifano ya darasa) kwa sababu inapitia mpaka wa seva→mteja. ## Kwa nini inakadiri Client Components ni jinsi unavyoongeza mwingiliano katika programu inayokadiria seva. Mahaba ni kuwahifadhi sehemu hii ndogo na majani — mwingiliano mahali inahitajika, Server Components mahali pengine — ili kupitisha JavaScript chache zaidi. Kuweka `"use client"` vibaya juu ya mti ni kosa la kawaida ambalo hubadilisha bundle na kuacha faida za Server Components.