Un Client Component se execută în browser (și este, de asemenea, pre-randat pe server pentru HTML-ul inițial). Activați cu directiva "use client" în vârful fișierului. Aveți nevoie de acestea ori de câte ori necesitați interactivitate, stare, efecte sau API-uri de browser.
Declaring one
"use client"; // MUST be the first line of the file
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0); // ✅ hooks work here
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>; // ✅ events
}
When you NEED a Client Component
✓ 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)
The directive cascades to children
Marcarea unui fișier ca "use client" îl face pe el și pe tot ceea ce importă parte din pachetul client. Deci doriți ca limitele clientului să fie mici și joase în arbore — "insule client" — mai degrabă decât să marcați o macheta de nivel superior ca client (ceea ce ar trage întreaga aplicație în pachetul 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"
}
Passing data from server to client
// Server Component fetches, passes serializable props down to the client island
<LikeButton initialLikes={post.likes} postId={post.id} />
Proprietățile trecute de la un Server la un Client Component trebuie să fie serializabile (fără funcții, fără instanțe de clase), deoarece traversează granița server→client.
De ce este important
Client Components sunt modul în care adăugați interactivitate într-o aplicație altfel orientată pe server.
Capabilitatea constă în a le ține minimale și la frunze — interactivitate acolo unde este nevoie, Server Components peste tot altundeva — pentru a expedia cel mai mic JavaScript.
Plasarea "use client" sus în arbore este o greșeală comună care umflă pachetul și renunță la beneficiile Server Components.