React Server Components: Guía Práctica 2026

React Server Components (RSC) cambian fundamentalmente cómo construyes aplicaciones React. Al mover el rendering al servidor mientras mantienes el modelo de componentes que ya conoces, podés reducir el tamaño del bundle JavaScript hasta en un 30%.

¿Qué Son los React Server Components?

Los Server Components son un nuevo tipo de componente que renderiza exclusivamente en el servidor. A diferencia de los componentes tradicionales que se ejecutan en el navegador (y opcionalmente en el servidor durante SSR), los Server Components nunca se ejecutan en el cliente.

// Este es un Server Component (default en Next.js App Router)
// No tiene "use client" = Server Component

async function BlogPost({ slug }) {
  // Acceso directo a base de datos - sin API route
  const post = await db.posts.findUnique({ where: { slug } });

  // Acceso seguro a variables de entorno
  const apiKey = process.env.SECRET_API_KEY;

  // Acceso al sistema de archivos
  const content = await fs.readFile(`./content/${slug}.md`, "utf-8");

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  );
}

¿Por Qué Usar RSC?

• Acceso directo a base de datos: Sin API routes ni useEffect, consultá tu base de datos directamente
• Seguro por defecto: Variables de entorno y lógica sensible nunca llegan al cliente
• Componentes async: Los Server Components pueden ser funciones async, haciendo el data fetching natural
• Cero JavaScript cliente: Este componente entero se envía solo como HTML

Server vs Client Components

Server Components (Default)

Los Server Components son el default en Next.js App Router. Cualquier componente sin "use client" es un Server Component.

Usalos cuando:

• Fetching data de bases de datos o APIs
• Acceder a recursos del backend (sistema de archivos, servicios internos)
• Mantener información sensible en el servidor
• Renderizar contenido estático o driven por datos
• Reducir JavaScript del lado cliente

Client Components

Los Client Components se marcan con la directiva "use client" al inicio del archivo. Renderizan tanto en servidor (SSR) como en cliente (hydratation).

Usalos cuando:

• Usar React hooks (useState, useEffect, useContext)
• Agregar event handlers (onClick, onChange, onSubmit)
• Usar APIs del navegador (window, document, localStorage)
• Gestionar estado del lado cliente

El Patrón de Composición

La clave es composer Server y Client Components correctamente. Server Components pueden importar y renderizar Client Components, pero Client Components no pueden importar Server Components directamente.

// app/products/[id]/page.jsx - Server Component
import { getProduct } from "@/lib/db";
import AddToCartButton from "@/components/AddToCartButton";

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCartButton productId={product.id} />
    </main>
  );
}

Casos Ideales para Server Components

1. Componentes de Visualización de Datos

Cualquier componente que principalmente muestra datos sin interacción del usuario es un candidato perfecto.

2. Fetching a Nivel de Componente

En lugar de fetchear toda la data a nivel de página, cada componente puede fetchear sus propios datos.

3. Renderizado de Markdown/MDX

Procesar Markdown en el servidor mantiene las librerías pesadas fuera del bundle del cliente.

4. Contenido Autenticado

Verificar autenticación y fetchear datos específicos del usuario de forma segura.

Cuando Client Components Son Mejores

1. Formularios con Validación

Los formularios necesitan gestión de estado y event handlers.

2. Funciones Real-Time

WebSockets, polling y actualizaciones real-time necesitan JavaScript del lado cliente.

3. Interacciones Complejas

Drag-and-drop, animaciones y UIs basadas en gestos requieren JavaScript del cliente.

Conclusión

RSC no es una decisión de todo o nada. La clave es identificar qué partes de tu aplicación se benefício más del rendering en servidor.

En 2026, los Server Components son esenciales para construir aplicaciones React performantes y optimizadas. Empezá incorporando Server Components donde hace sentido y gradualmente migrá a Client Components solo donde sea necesario.

Pensá en RSC como una herramienta más en tu caja, no como una religión. Usala donde aporta valor real.