Client Component, tarayıcıda çalışır (ve ilk HTML için sunucuda önceden de render edilir). Dosyanın en üstünde "use client" direktifi ile kabul edersiniz. Etkileşimsellik, durum, efektler veya tarayıcı API'lerine ihtiyaç duyduğunuzda bunlara ihtiyaç duyarsınız.
;
{ 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)
Bir dosyayı "use client" olarak işaretlemek onu ve içe aktardığı her şeyi istemci paketinin parçası yapar. Bu nedenle istemci sınırlarının ağaçta küçük ve düşük olmasını istersiniz — "istemci adaları" — bir üst düzey yerleşimi istemci olarak işaretlemek yerine (bu tüm uygulamayı tarayıcı paketine çeker).
// ✅ 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} />
Bir Sunucu'dan bir Client Component'e geçirilen Props serileştirilebilir olmalıdır (fonksiyon yok, sınıf örneği yok) çünkü sunucu→istemci sınırını geçerler.
Client Components, aksi halde sunucu-öncelikli bir uygulamaya etkileşimsellik eklemenin yoludur.
Yetenek, bunları minimal ve yapraklarda tutmaktır — gerekli yerde etkileşimsellik, başka her yerde Sunucu Bileşenleri — böylece en az JavaScript gönderirsiniz.
"use client"'i ağaçta yüksekte yanlış yerleştirmek, paketi şişiren ve Sunucu Bileşenlerinin faydalarını kaybettiren yaygın bir hatadır.