Når og hvordan bruker du Client Components?

Question

Accepted Answer

En **Client Component** kjøres i nettleseren (og blir også forhåndsrendered på serveren for den innledende HTML-en). Du velger inn med **`"use client"`** direktivet øverst i filen. Du trenger dem når du krever interaktivitet, tilstand, effekter eller nettleser-APIer. ## 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 Å markere en fil som `"use client"` gjør den og **alt den importerer** til en del av klientbundelen. Så du vil at klientgrenser skal være **små og lavt i treet** — "klientøyer" — i stedet for å markere en toppskalayout som klient (som ville trekke hele appen inn i nettleserbundelen). ```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 som sendes fra en Server til en Client Component må være **serialiserbare** (ingen funksjoner, ingen klasseinstanser) siden de krysser server→klient-grensen. ## Hvorfor dette er viktig Client Components er hvordan du legger til interaktivitet i en ellers server-first-app. Ferdigheten ligger i å holde dem minimale og ved bladene — interaktivitet der det trengs, Server Components overalt ellers — slik at du sender minst JavaScript. Å plassere `"use client"` høyt i treet er en vanlig feil som blåser opp bundelen og gir fra seg fordelene med Server Components.