Los React Server Components representan un cambio paradigmático en cómo construimos aplicaciones React.

¿Qué son los Server Components?

Son componentes que se ejecutan en el servidor y envían su output renderizado al cliente, reduciendo el bundle size y mejorando el rendimiento.

Nota importante: Los Server Components no pueden usar hooks como useState o useEffect, ya que se ejecutan en el servidor.

Beneficios principales

1. Menor bundle size: Los Server Components no se incluyen en el JavaScript del cliente
2. Acceso directo a datos: Pueden acceder directamente a bases de datos y APIs
3. Mejor rendimiento: Renderizado en el servidor = carga más rápida

Ejemplo práctico

// Server Component
async function UserProfile({ userId }) {
  // Acceso directo a la base de datos
  const user = await db.user.findById(userId);
  const posts = await db.posts.findByUserId(userId);
  
  return (
    <div className="user-profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <div className="user-posts">
        {posts.map(post => (
          <PostCard key={post.id} post={post} />
        ))}
      </div>
    </div>
  );
}

// Client Component (para interactividad)
'use client'
import { useState } from 'react';

function InteractiveButton() {
  const [clicked, setClicked] = useState(false);
  
  return (
    <button onClick={() => setClicked(!clicked)}>
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

Diferencias clave

Server Components	Client Components
Se ejecutan en el servidor	Se ejecutan en el cliente
No pueden usar hooks	Pueden usar hooks
Acceso directo a datos	Necesitan fetch/APIs
No se incluyen en el bundle	Se incluyen en el bundle

Los Server Components son el futuro de React y Next.js los implementa de manera excepcional.