Hvornår og hvordan bruger du Client Components?

Question

Accepted Answer

En **Client Component** køres i browseren (og bliver også pre-rendereret på serveren til det initiale HTML). Du aktiverer det med **`"use client"`** direktivet øverst i filen. Du har brug for dem når du kræver interaktivitet, state, effects eller browser API'er. ## Erklær en ```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 } ``` ## Når du VIL HAVE en 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) ``` ## Direktivet kaskaderer til børn At markere en fil som `"use client"` gør den og **alt den importerer** til en del af client bundlet. Så du vil have client grænser til at være **små og lave i træet** — "client islands" — i stedet for at markere et top-level layout som client (som ville trække hele appen ind i browser bundlet). ```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 fra server til client ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props passeret fra en Server til en Client Component skal være **serializable** (ingen funktioner, ingen class instances) da de krydser server→client grænsen. ## Hvorfor det betyder noget Client Components er hvordan du tilføjer interaktivitet i en ellers server-first app. Kunsten er at holde dem minimal og ved bladene — interaktivitet hvor det er nødvendigt, Server Components overalt ellers — så du shipper mindst JavaScript. At placere `"use client"` højt i træet er en almindelig fejl der oppuster bundlet og giver afkald på fordelene ved Server Components.