Wann und wie verwendet man Client Components?

Question

Accepted Answer

Eine **Client Component** läuft im Browser (und wird auch vorab auf dem Server für das anfängliche HTML gerendert). Man aktiviert sie mit der **`"use client"`** Anweisung oben in der Datei. Man benötigt sie, wenn man Interaktivität, State, Effects oder Browser APIs benötigt. ## Eine deklarieren ```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 } ``` ## Wann man eine Client Component BENÖTIGT ```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) ``` ## Die Anweisung cascadiert zu Kindern Eine Datei mit `"use client"` zu markieren macht sie und **alles, was sie importiert** Teil des Client Bundles. Also möchte man, dass Client-Grenzen **klein und tief im Baum** sind — "Client Islands" — statt ein Top-Level Layout als Client zu markieren (was die ganze App ins Browser Bundle ziehen würde). ```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" } ``` ## Daten vom Server zum Client weitergeben ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props, die von einem Server zu einer Client Component weitergegeben werden, müssen **serialisierbar** sein (keine Funktionen, keine Klasseninstanzen), da sie die server→client Grenze kreuzen. ## Warum es wichtig ist Client Components sind die Art, wie man Interaktivität in einer ansonsten Server-first App hinzufügt. Die Fähigkeit liegt darin, sie minimal zu halten und bei den Blättern — Interaktivität wo nötig, Server Components überall sonst — damit man möglichst wenig JavaScript ausliefert. `"use client"` hoch oben im Baum zu platzieren ist ein häufiger Fehler, der das Bundle aufbläht und die Vorteile von Server Components zunichte macht.