Server y Client Components en Next.js: cuándo usar cada uno
Criterios prácticos para decidir qué se renderiza en el servidor y qué necesita JavaScript en el navegador.
El punto de partida: servidor por defecto
En el App Router, cada componente es un Server Component salvo que indiques lo contrario con "use client". Los Server Components pueden leer datos directamente, no envían su código al navegador y reducen el JavaScript que el usuario descarga.
La pregunta útil no es "¿servidor o cliente?", sino "¿este componente necesita estado, efectos o eventos del navegador?". Si la respuesta es no, debe ser servidor.
Cuándo sí usar un Client Component
Formularios con validación en vivo, menús desplegables, carruseles, cualquier cosa que use useState, useEffect o APIs del navegador como window o localStorage necesita ser cliente.
Mantén el límite cliente lo más abajo posible en el árbol. Un botón interactivo dentro de una página estática no obliga a convertir toda la página en cliente.
Pasar datos entre los dos mundos
Un Server Component puede renderizar un Client Component y pasarle props serializables. Un Client Component no puede importar un Server Component, pero sí recibirlo como children.
Evita pasar objetos enormes o sin necesidad al cliente: envía solo lo que la interacción necesita.