När och hur använder du Client Components?

Question

Accepted Answer

En **Client Component** körs i webbläsaren (och pre-renderas också på servern för det initiala HTML:et). Du aktiverar den med direktivet **`"use client"`** överst i filen. Du behöver dem när du kräver interaktivitet, state, effekter eller webbläsar-API:er. ## Deklarera 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 BEHÖVER 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 kaskadar till barn Att markera en fil med `"use client"` gör den och **allt den importerar** till en del av klient-bundlen. Så du vill att klient-gränserna ska vara **små och lågt i trädet** — "klient-öar" — snarare än att markera en top-level layout som klient (vilket skulle dra in hela appen i webbläsar-bundlen). ```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" } ``` ## Skicka data från server till klient ```tsx // Server Component fetches, passes serializable props down to the client island ``` Props som skickas från en Server till en Client Component måste vara **serialiserbara** (ingen funktioner, ingen klassinstanser) eftersom de passerar server→klient-gränsen. ## Varför det spelar roll Client Components är hur du lägger till interaktivitet i en annars server-first-app. Skickligheten är att hålla dem minimala och vid bladen — interaktivitet där det behövs, Server Components överallt annars — så att du skickar minst möjligt JavaScript. Att felplacera `"use client"` högt i trädet är ett vanligt misstag som blåser upp bundlen och förverkar fördelarna med Server Components.