Cuándo usarlos, cuándo no, y cómo afectan la arquitectura de tu app. Ejemplos prácticos con Next.js App Router.
En 2026, React Server Components (RSC) ya no son una novedad experimental — son el modelo de desarrollo principal en Next.js App Router. Si todavía tienes confusión sobre cuándo usar 'use client' y cuándo no, esta guía te lo aclara.
La pregunta correcta no es 'qué son' sino 'cuándo usar cada uno'
Los RSC se renderizan en el servidor y nunca llegan como JavaScript al cliente. Los Client Components se hidratan en el cliente y pueden usar estado, efectos y event handlers. La confusión viene de pensar que son mutuamente excluyentes — no lo son.
Regla de oro: empieza como Server Component
Todo componente en Next.js App Router es Server Component por defecto. Solo agrega 'use client' cuando el componente necesita: estado (useState), efectos (useEffect), event handlers (onClick), o APIs del navegador.
- Server Component:: Navbar estático, lista de productos, página de blog, layout de dashboard
- Client Component:: Formulario con validación, dropdown interactivo, gráfico con animaciones, componente que usa el scroll
El patrón más importante: Server → Client boundary
Puedes renderizar un Server Component dentro de un Client Component pasándolo como children. Esto es fundamental para mantener la mayor parte de tu árbol como Server Components y 'aislar' la interactividad en componentes hoja.
“Si tu componente solo muestra datos que vienen de la base de datos y no necesita interactividad, probablemente debería ser un Server Component.
¿Te resultó útil este artículo?
← Ver más artículos