Client Component berjalan di browser (dan juga di-pre-render di server untuk HTML awal). Anda memilih dengan direktif "use client" di bagian atas file. Anda membutuhkannya setiap kali Anda memerlukan interaktivitas, state, effects, atau API browser.
;
{ 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 file "use client" membuatnya dan segala yang diimpor bagian dari bundel klien. Jadi Anda ingin batas klien menjadi kecil dan rendah di pohon — "pulau klien" — daripada menandai tata letak tingkat atas sebagai klien (yang akan menarik seluruh aplikasi ke dalam bundel browser).
// ✅ 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} />
Props yang diteruskan dari Server ke Client Component harus serializable (tidak ada fungsi, tidak ada instance kelas) karena mereka melintasi batas server→klien.
Client Components adalah cara Anda menambahkan interaktivitas dalam aplikasi yang berorientasi server.
Keahliannya adalah menjaganya tetap minimal dan di daun — interaktivitas di mana diperlukan, Server Components di tempat lain — sehingga Anda mengirimkan JavaScript paling sedikit.
Menempati "use client" tinggi di pohon adalah kesalahan umum yang menggelembungkan bundel dan melepaskan manfaat Server Components.