Empuja 'use client' hasta la Hoja
medium⏱ 20 minreactlesson
APRENDE HACIENDOPon a prueba tu intuición3 pasos
Empuja 'use client' hasta la Hoja
Usa los ejemplos y la explicación de la lección para comprobar tu idea.
Reflexión personal. No se envía a ningún servicio de IA.ENEste enunciado todavía está solo en inglés; la traducción al español está en camino.
Código inicial Una página de producto donde un botón de like arrastró el módulo entero al otro lado de la frontera de cliente: la sección de la página lleva la directiva de cliente en su tope, así que el titular, el tagline y el formateo de precio viajan al navegador como JavaScript — y se re-renderizan con cada like. El archivo simula un grafo de módulos del App Router de Next.js: cada banner 📁 file: es una frontera de módulo, y los validadores cortan el archivo por esos banners.
Tus tareas:
- TODO(A) — Extrae la hoja interactiva: crea un nuevo pseudo-módulo
components/LikeButton.jsx con el estado del like y el botón, con "use client" en el tope de ESA sección — y en ningún otro lugar.
- TODO(B) — Convierte la página en un Server Component real: quita de la sección de la página la directiva, los hooks y los handlers. Los Server Components renderizan datos a markup; no pueden tener estado ni escuchar eventos.
- TODO(C) — Compón a través de la frontera: la página renderiza
<LikeButton productId={…} initialLikes={…} /> — solo cruzan datos serializables. Un Server Component puede renderizar Client Components; nunca al revés.
La regla de entrevista que esto entrena: "use client" marca la raíz de un subárbol del bundle de cliente — colócala en la hoja más pequeña que necesite interactividad, no en la página que casualmente la contiene.
Why this happens
"use client" no significa "este archivo corre en el cliente" — significa "desde esta arista de import hacia abajo, todo pasa a formar parte del bundle de cliente". Ponla en una página y el subárbol entero paga el precio: bundles más grandes, hidratación de markup que nunca cambia, y re-renders de contenido estático cada vez que el estado cambia. Los Server Components invierten el default: corren solo en el servidor, pueden tocar datos directamente y emiten HTML — pero no pueden usar estado, efectos ni event handlers, porque no existe una instancia viva del componente en el navegador. La regla de composición sale del grafo de módulos: un Server Component puede renderizar un Client Component (sus props se serializan en el payload RSC), pero un módulo de cliente que importa un módulo de servidor lo convierte en código de cliente. De ahí la disciplina que este reto entrena: la interactividad vive en pequeños componentes hoja de cliente; las páginas siguen renderizándose en el servidor y pasan props serializables hacia abajo.