Wanneer en hoe gebruikt u Client Components?

Question

Accepted Answer

Een **Client Component** wordt uitgevoerd in de browser (en wordt ook vooraf weergegeven op de server voor de initiële HTML). U activeert dit met de **`"use client"`** richtlijn bovenaan het bestand. U heeft ze nodig wanneer u interactiviteit, state, effecten of browser-API's nodig hebt. ## 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 Een bestand markeren als `"use client"` maakt het en **alles wat het importeert** onderdeel van de client bundle. Daarom wilt u dat clientgrenzen **klein en laag in de boom** zijn — "client islands" — in plaats van een top-level layout als client in te stellen (wat de hele app in de browser bundle zou trekken). ```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 die van een Server naar een Client Component worden doorgegeven, moeten **serialiseerbaar** zijn (geen functies, geen klasseexemplaren) omdat ze de server→client grens overschrijden. ## Waarom het belangrijk is Client Components zijn hoe u interactiviteit toevoegt aan een verder server-first app. De vaardigheid is ze minimaal en aan de bladeren houden — interactiviteit waar nodig, Server Components overal anders — zodat u de minste JavaScript verzendt. `"use client"` hoog in de boom plaatsen is een veel voorkomende fout die de bundle opblaast en de voordelen van Server Components ontnegeerd.