Server Components
Paradigma de React donde los componentes se ejecutan en el servidor, enviando solo HTML al cliente, reduciendo el bundle de JavaScript y mejorando el rendimiento.
seed#server-components#rsc#react#nextjs#performance#rendering
¿Qué es?
React Server Components (RSC) son componentes que se ejecutan exclusivamente en el servidor. No envían JavaScript al cliente — solo el HTML resultante. Esto reduce drásticamente el bundle size y permite acceder directamente a bases de datos, APIs y el filesystem.
Server vs Client Components
| Aspecto | Server Component | Client Component |
|---|---|---|
| Ejecución | Servidor | Navegador |
| JavaScript al cliente | No | Sí |
| Interactividad | No (sin useState, onClick) | Sí |
| Acceso a DB/FS | Directo | Via API |
| Marcador | Por defecto en Next.js | 'use client' |
Cuándo usar cada uno
- Server: fetch de datos, acceso a DB, contenido estático, layouts
- Client: interactividad, event handlers, hooks de estado, browser APIs
Impacto en rendimiento
- Menos JavaScript enviado al cliente
- Streaming SSR para carga progresiva
- Datos fetched en el servidor (sin waterfalls)
¿Por qué importa?
Los Server Components cambian fundamentalmente cómo se construyen aplicaciones React al mover el renderizado al servidor. Reducen el JavaScript enviado al cliente, simplifican el acceso a datos y mejoran el rendimiento percibido — sin sacrificar la interactividad donde se necesita.
Referencias
- React Server Components — Documentación oficial.
- Server Components — Next.js — Vercel, 2024. Implementación de Server Components en Next.js.
- Rendering — Next.js — Vercel, 2024. Guía completa de renderizado en Next.js App Router.