Client Component se izvršava u pregledniku (i također je pre-renderiran na serveru za početni HTML). Pristajete sa "use client" direktivom na vrhu datoteke. Trebali su vam kad god trebate interaktivnost, stanje, efekte ili API-je preglednika.
;
{ 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)
Označavanje datoteke kao "use client" čini je i sve što uvozi dijelom klijentskog paketa. Zato želite da granice klijenta budu male i nisko u stablu — "klijentska otoka" — umjesto označavanja raspored viške razine kao klijent (što bi povuklo cijelu aplikaciju u preglednikski paket).
// ✅ 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} />
Rekviziti prosljeđeni sa servera na Client Component moraju biti serijalizirani (bez funkcija, bez instanci klasa) jer prelaze granicu server→klijent.
Client Components su način na koji dodajete interaktivnost u inače serversku aplikaciju.
Vještina je održavati ih minimalnim i na lišću — interaktivnost gdje je potrebna, Server Components svugdje drugdje — tako da pošaljete najmanje JavaScripta.
Nagrađivanje "use client" visoko u stablu čest je greška koja naduje paket i odriče se prednosti Server Components.