React Server Components: Guía Completa 2024

¿Qué son los React Server Components?

Los React Server Components (RSC) representan un cambio fundamental en cómo construimos aplicaciones React. Permiten renderizar componentes directamente en el servidor, enviando solo el resultado al cliente.

Beneficios Principales

• Zero JavaScript en el cliente para componentes de servidor
• Acceso directo a bases de datos sin APIs intermediarias
• Mejor rendimiento inicial de la aplicación
• Experiencia de desarrollo simplificada

Server vs Client Components

Componente de Servidor (por defecto)

// app/users/page.jsx
async function UsersPage() {
  // Esta consulta se ejecuta en el servidor
  const users = await db.query('SELECT * FROM users');

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Componente de Cliente (con ‘use client’)

'use client';

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Contador: {count}
    </button>
  );
}

Cuándo Usar Cada Uno

Server Components	Client Components
Fetch de datos	useState, useEffect
Acceso a backend	Event listeners
Renderizado markdown	browser APIs
Tokens del servidor	hooks personalizados

Patrón Híbrido

Combina ambos para optimal performance:

// Server Component - fetching inicial
async function BlogPost({ slug }) {
  const post = await getPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      {/* Cliente interactivo dentro de servidor */}
      <LikeButton initialLikes={post.likes} />
    </article>
  );
}

// Client Component - interactividad
'use client';
function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(l => l + 1)}>
      ❤️ {likes}
    </button>
  );
}

Conclusión

Los React Server Components no son un reemplazo, sino una extensión del modelo React. Usa Server Components como默认值 y cambia a Client Components solo cuando sea necesario interactividad.

¿Ya estás usando RSC en producción? Cuéntame tu experiencia en los comentarios.