Quand et comment utilisez-vous les Client Components ?

Question

Accepted Answer

Un **Client Component** s'exécute dans le navigateur (et est également pré-rendu sur le serveur pour le HTML initial). Vous vous inscrivez avec la directive **`"use client"`** en haut du fichier. Vous en avez besoin chaque fois que vous nécessitez de l'interactivité, de l'état, des effets, ou des API du navigateur. ## Déclarer un Client Component ```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 } ``` ## Quand vous AVEZ BESOIN d'un 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) ``` ## La directive se propage aux enfants Marquer un fichier `"use client"` le rend, lui et **tout ce qu'il importe**, partie du bundle client. Vous voulez donc que les limites client soient **petites et basses dans l'arbre** — des "îlots client" — plutôt que de marquer un layout de haut niveau comme client (ce qui tirerait l'application entière dans le bundle du navigateur). ```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" } ``` ## Passer les données du serveur au client ```tsx // Server Component fetches, passes serializable props down to the client island ``` Les props passés d'un Server à un Client Component doivent être **sérialisables** (pas de fonctions, pas d'instances de classe) car ils traversent la limite serveur→client. ## Pourquoi c'est important Les Client Components sont la façon d'ajouter de l'interactivité dans une application autrement orientée serveur. Le savoir-faire est de les garder minimes et aux feuilles — de l'interactivité là où elle est nécessaire, des Server Components partout ailleurs — afin que vous livriez le moins de JavaScript possible. Mal placer `"use client"` haut dans l'arbre est une erreur courante qui gonfle le bundle et abandonne les bénéfices des Server Components.