Kdy a jak používáte Client Components?

Question

Accepted Answer

**Client Component** se spouští v prohlížeči (a je také předem vykreslen na serveru pro počáteční HTML). Přidáte se pomocí direktivy **`"use client"`** v horní části souboru. Potřebujete je kdykoli, když vyžadujete interaktivitu, state, effects nebo rozhraní API prohlížeče. ## Deklarace jednoho ```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 } ``` ## Kdy POTŘEBUJETE 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) ``` ## Direktiva se šíří na podřízené prvky Označení souboru jako `"use client"` jej včetně **všeho, co importuje** zařadí do client bundle. Proto chcete, aby byly hranice client **malé a nízko v stromu** — "client islands" — místo aby se označil top-level layout jako client (což by přetáhlo celou aplikaci do bundle prohlížeče). ```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" } ``` ## Předávání dat ze serveru na klienta ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props předané ze Server Component do Client Component musí být **serializovatelné** (žádné funkce, žádné instance tříd), protože překračují hranici server→client. ## Proč na tom záleží Client Components jsou způsob, jak přidáte interaktivitu v aplikaci zaměřené na server. Způsobilostí je jejich minimalizace a umístění na listy — interaktivita tam, kde je potřeba, Server Components všude jinde — abyste odeslali co nejméně JavaScriptu. Umístění `"use client"` vysoko ve stromu je běžná chyba, která zvětšuje bundle a ztratí výhody Server Components.