React Server Components explicados con ejemplos reales de producción

Introducción a React Server Components

En el ecosistema React de 2025, los Server Components han dejado de ser una novedad para convertirse en un estándar. A diferencia de los componentes tradicionales, estos se ejecutan exclusivamente en el servidor, permitiendo:

• Acceso directo a bases de datos y APIs internas
• Reducción del bundle size del cliente
• Renderizado más rápido al evitar hidratación

Diferencias clave con Client Components

Para entender RSCs, contrastémoslos con los componentes tradicionales:

// Client Component tradicional (ejemplo 2023)
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Clics: {count}
    </button>
  );
}

// Server Component moderno (ejemplo 2025)
async function UserProfile({ userId }) {
  // Directamente en el servidor!
  const user = await db.users.findUnique(userId);
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Registrado el: {user.createdAt.toLocaleDateString()}</p>
    </div>
  );
}

La clave está en que no se envían al cliente, solo su HTML resultante.

Ejemplo real: Catálogo de productos

Implementamos esto en un e-commerce colombiano con 15,000 SKUs. Observa el patrón híbrido:

// ProductList.server.tsx
export default async function ProductList() {
  const products = await getProductsFromDB();
  
  return (
    <section>
      <SearchBar /> {/* Client Component */}
      
      <ul>
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </ul>
      
      <Pagination /> {/* Server Component con lógica en URL */}
    </section>
  );
}

// ProductCard.server.tsx
function ProductCard({ product }) {
  return (
    <li>
      <Image 
        src={product.image} 
        width={300} 
        height={200}
        alt={product.name}
      />
      <h3>{product.name}</h3>
      <PriceDisplay price={product.price} /> {/* Client Component */}
    </li>
  );
}

Patrones avanzados en producción

En nuestro proyecto para un banco panameño, implementamos:

• Componentes dinámicos con Suspense para streaming
• Autenticación integrada en el servidor
• Cache inteligente con React Cache

// Ejemplo: Dashboard financiero con carga progresiva
import { unstable_cache as cache } from 'react';

const getCachedTransactions = cache(
  async (userId) => {
    return await db.transactions.findMany({ userId });
  },
  ['transactions'],
  { tags: ['transactions'] }
);

export async function TransactionHistory() {
  const transactions = await getCachedTransactions(user.id);
  
  return (
    <Suspense fallback={<Skeleton />}>
      <ul>
        {transactions.map(txn => (
          <TransactionItem key={txn.id} {...txn} />
        ))}
      </ul>
    </Suspense>
  );
}

Migración gradual desde CSR/SSR

En Edwsystem recomendamos esta estrategia:

1. Identificar componentes estáticos o con data fetching
2. Mover lógica de useEffect a funciones async
3. Reemplazar contextos globales por cookies/headers

// Antes: Componente con useEffect
function UserProfile() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(setUser);
  }, []);
  
  return user && <ProfileData user={user} />;
}

// Después: Server Component limpio
async function UserProfile() {
  const user = await getUserData();
  return <ProfileData user={user} />;
}

Limitaciones y buenas prácticas

Tras 12 implementaciones, aprendimos que:

• No usar RSCs para elementos interactivos (forms, modales)
• Evitar waterfalls de datos con solicitudes paralelas
• Monitorear el tamaño de respuestas del servidor

Conclusión: El futuro es híbrido

Los RSCs no reemplazan a los client components, sino que complementan el modelo mental de React. En 2025, las aplicaciones de alto rendimiento usan:

• Server Components para contenido estático y data fetching
• Client Components para interacciones
• Shared Components para lógica reutilizable

En Edwsystem seguiremos explorando este paradigma, especialmente para proyectos con alto tráfico en América Latina donde cada KB y milisegundo cuenta.