React Server Components vs. Client Components: Cuándo Usar Cada Uno
Una guía práctica para elegir entre Server Components y Client Components en React y Next.js. Entiende el modelo de renderizado, implicaciones de rendimiento y patrones del mundo real para 2026.
React Server Components (RSC) cambiaron fundamentalmente cómo pensamos sobre el renderizado en React. En lugar de enviar todo el código de tus componentes al navegador, los Server Components se ejecutan exclusivamente en el servidor, enviando solo su salida renderizada al cliente. En Next.js App Router, cada componente es un Server Component por defecto.
1. El Modelo Mental
Piensa en tu árbol de componentes como dos zonas:
- Zona del Servidor (por defecto): Componentes que obtienen datos, acceden a bases de datos, leen archivos o renderizan contenido estático. Producen HTML en el servidor y envían cero JavaScript al navegador.
- Zona del Cliente (
"use client"): Componentes que necesitan interactividad — manejadores de eventos, estado, efectos, APIs del navegador. Estos se hidratan en el navegador.
2. Cuándo Usar Server Components
Usa Server Components cuando tu componente:
- Obtiene datos de una base de datos o API
- Accede a recursos solo del servidor (sistema de archivos, variables de entorno)
- Renderiza contenido estático o de solo lectura
- Tiene dependencias grandes que no quieres en el bundle del cliente
3. Cuándo Usar Client Components
Agrega "use client" al inicio de un archivo cuando tu componente necesita:
- Estado:
useState,useReducer - Efectos:
useEffect,useLayoutEffect - Manejadores de eventos:
onClick,onChange,onSubmit - APIs del navegador:
window,localStorage,IntersectionObserver
4. El Patrón de Composición
La clave: los Client Components pueden renderizar Server Components como children. Esto te permite mantener la interactividad en las hojas mientras la mayoría de tu árbol permanece en el servidor.
5. Comparación de Rendimiento
| Métrica | Server Component | Client Component |
|---|---|---|
| Tamaño del Bundle JS | 0 KB añadidos | Código del componente enviado al navegador |
| Tiempo hasta Interactivo | Instantáneo (solo HTML) | Requiere hidratación |
| Obtención de Datos | Acceso directo al servidor | Llamadas API desde el navegador |
| SEO | HTML completamente renderizado | Depende de SSR/hidratación |
6. Errores Comunes a Evitar
- No marques todo como
"use client". Solo los componentes que verdaderamente necesitan interactividad. - No importes Server Components en Client Components. Pásalos como
childrenen su lugar. - No uses
useEffectpara obtener datos cuando un Server Component conasync/awaitfunciona mejor.