¿Cuándo y cómo se usan Client Components?

Question

Accepted Answer

Un **Client Component** se ejecuta en el navegador (y también se pre-renderiza en el servidor para el HTML inicial). Se activa con la directiva **`"use client"`** en la parte superior del archivo. Los necesitas cuando requieres interactividad, estado, efectos o APIs del navegador. ## Declarar 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 } ``` ## Cuándo NECESITAS 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 directiva se propaga a los componentes secundarios Marcar un archivo con `"use client"` lo hace a él y a **todo lo que importa** parte del bundle de cliente. Por lo tanto, deseas que los límites de cliente sean **pequeños y bajos en el árbol** — "client islands" — en lugar de marcar un layout de nivel superior como cliente (lo que arrastraría toda la aplicación al bundle del 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" } ``` ## Pasar datos del servidor al cliente ```tsx // Server Component fetches, passes serializable props down to the client island ``` Los props pasados desde un Server a un Client Component deben ser **serializables** (sin funciones, sin instancias de clase) ya que cruzan el límite server→client. ## Por qué es importante Los Client Components son cómo añades interactividad en una aplicación de otro modo orientada al servidor. La habilidad es mantenerlos mínimos y en las hojas — interactividad donde sea necesaria, Server Components en cualquier otro lugar — así envías el menor JavaScript posible. Colocar `"use client"` alto en el árbol es un error común que infla el bundle y pierde los beneficios de los Server Components.