Egy Client Component a böngészőben fut (és az kezdeti HTML-hez a szerveren is előre renderelve). A fájl tetejének "use client" direktívájával való beleegyezés. Szükségük van rájuk, ha az interaktivitás, az állapot, a hatások vagy a böngésző API-k szükségesek.
;
{ 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)
Egy fájl "use client" jelölése azt és mindent, amit importál az ügyfélcsomag részévé teszi. Tehát azt szeretnéd, hogy az ügyfél határai kicsik és alacsonyak a fában — "ügyfél-szigetek" — ahelyett, hogy felső szintű elrendezést ügyfélként jelölnél meg (amely az egész alkalmazást a böngésző csomagjába húzná).
// ✅ 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} />
A szerverről az Ügyfél-komponensre átadott Props-nak szerializálhatónak kell lennie (nincs funkció, nincs osztálypéldány), mivel átlépik a szerver→kliens határát.
A Client Components a módja az interaktivitás hozzáadásának egy egyébként szerverfókuszú alkalmazásban.
A készség az, hogy minimálisnak és a leveleken tartsd őket — interaktivitás ahol szükséges, Server Components máshol — így a legkevesebb JavaScriptet szállítod.
A "use client" magasra helyezése a fában gyakori hiba, amely felduzzadja a csomagot és feladja a szerver-komponensek előnyeit.