Quando e como você usa Client Components?

Question

Accepted Answer

Um **Client Component** é executado no navegador (e também é pré-renderizado no servidor para o HTML inicial). Você ativa com a diretiva **`"use client"`** no topo do arquivo. Você precisa deles sempre que exigir interatividade, estado, efeitos ou APIs do navegador. ## 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 Marcar um arquivo como `"use client"` o torna, junto com **tudo que ele importa**, parte do pacote do cliente. Portanto, você deseja que os limites do cliente sejam **pequenos e baixos na árvore** — "ilhas de cliente" — em vez de marcar um layout de nível superior como cliente (o que puxaria todo o aplicativo para o pacote do navegador). ```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 passadas de um Servidor para um Client Component devem ser **serializáveis** (sem funções, sem instâncias de classe), pois cruzam o limite servidor→cliente. ## Por que isso importa Client Components são como você adiciona interatividade em um aplicativo de outra forma focado no servidor. A habilidade está em mantê-los mínimos e nas folhas — interatividade onde é necessária, Server Components em qualquer outro lugar — para enviar o mínimo de JavaScript. Colocar `"use client"` alto na árvore é um erro comum que incha o pacote e abdica dos benefícios dos Server Components.