Kiedy i jak używasz Client Components?

Question

Accepted Answer

**Client Component** działa w przeglądarce (i jest także wstępnie renderowany na serwerze dla początkowego HTML). Aktywujesz go za pomocą dyrektywy **`"use client"`** na górze pliku. Potrzebujesz ich, gdy wymagasz interaktywności, stanu, efektów lub interfejsów API przeglądarki. ## 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 Oznaczenie pliku jako `"use client"` sprawia, że on i **wszystko, co importuje** stają się częścią pakietu klienta. Dlatego chcesz, aby granice klienta były **małe i nisko w drzewie** — "wyspy klienta" — zamiast oznaczać układ najwyższego poziomu jako klient (co by ściągnęło całą aplikację do pakietu przeglądarki). ```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 ``` Props przekazywane z serwera do Client Component muszą być **serializowalne** (bez funkcji, bez instancji klas), ponieważ przecinają granicę serwer→klient. ## Dlaczego to ważne Client Components to sposób, w jaki dodajesz interaktywność do aplikacji, która w innym przypadku byłaby skoncentrowana na serwerze. Umiejętność polega na utrzymywaniu ich na minimalnym poziomie i na liściach — interaktywność tam, gdzie jest potrzebna, Server Components wszędzie indziej — aby wysłać najmniej JavaScript. Umieszczenie `"use client"` wysoko w drzewie to częsty błąd, który powiększa pakiet i pozbawia cię korzyści z Server Components.