Quando e come si utilizzano i Client Components?

Question

Accepted Answer

Un **Client Component** viene eseguito nel browser (ed è anche pre-renderizzato sul server per l'HTML iniziale). Si attiva con la direttiva **`"use client"`** in cima al file. Ne hai bisogno ogni volta che richiedi interattività, stato, effetti o API del browser. ## Dichiararne uno ```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 } ``` ## Quando SERVE 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 direttiva si propaga ai figli Marcare un file come `"use client"` lo rende, insieme a **tutto ciò che importa**, parte del bundle client. Quindi vuoi che i confini client siano **piccoli e bassi nell'albero** — "isole client" — piuttosto che marcare un layout di primo livello come client (che comporterebbe l'intera app nel bundle del browser). ```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" } ``` ## Passare dati da server a client ```tsx // Server Component fetches, passes serializable props down to the client island ``` I props passati da un Server Component a un Client Component devono essere **serializzabili** (niente funzioni, niente istanze di classe) poiché attraversano il confine server→client. ## Perché è importante I Client Components sono il modo in cui aggiungi interattività in un'app altrimenti server-first. L'abilità sta nel mantenerli minimi e alle foglie — interattività dove serve, Server Components ovunque — così spedisci il minimo JavaScript. Positionare erroneamente `"use client"` in alto nell'albero è un errore comune che gonfia il bundle e rinuncia ai benefici dei Server Components.