Client Component berjalan di penjelajah (dan juga pra-render di pelayan untuk HTML awal). Anda memilih dengan direktif "use client" di bahagian atas fail. Anda memerlukannya apabila anda memerlukan interaktiviti, keadaan, kesan, atau API penjelajah.
;
{ 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)
Menandai fail "use client" menjadikannya dan semua yang diimport sebahagian daripada bundar klien. Jadi anda mahu sempadan klien menjadi kecil dan rendah dalam pohon — "pulau klien" — daripada menandai susun atur peringkat teratas sebagai klien (yang akan menarik seluruh apl ke dalam bundar penjelajah).
// ✅ 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} />
Perlindungan yang dilewati daripada Server kepada Client Component mestilah boleh bersiri (tiada fungsi, tiada contoh kelas) kerana mereka melintasi sempadan pelayan→klien.
Client Components adalah cara anda menambahkan interaktiviti dalam apl yang sebaliknya berpusat pada pelayan.
Kemahiran ialah menyimpannya minimal dan di daun — interaktiviti di mana ia diperlukan, Server Components di tempat lain — jadi anda menghantar JavaScript yang paling sedikit.
Menempat salah "use client" tinggi dalam pohon adalah kesilapan biasa yang mengembangkan bundar dan meninggalkan manfaat Server Components.