Când și cum utilizați Client Components?

Question

IT Interview Practice · Accepted Answer

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 ```tsx "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 ; // ✅ events } ``` ## When you NEED a Client Component ```text ✓ 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). ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## Passing data from server to client ```tsx // Server Component fetches, passes serializable props down to the client island ``` 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.

Declaring one

When you NEED a Client Component

The directive cascades to children

Passing data from server to client

De ce este important

Întrebări conexe