1~
2React Server Components (RSC) han cambiado fundamentalmente la forma en que construimos aplicaciones React. Al mover la lógica de renderizado al servidor, podemos reducir significativamente el paquete de JavaScript enviado al cliente, lo que lleva a tiempos de carga más rápidos y mejores experiencias de usuario. En este artículo, exploraremos patrones avanzados y mejores prácticas para aprovechar los RSC en 2026.
3~
4## ¿Qué son los Server Components?
5~
6Tradicionalmente, los componentes de React se renderizaban completamente en el cliente (CSR) o se pre-renderizaban en el servidor como HTML (SSR) y luego se hidrataban en el cliente. Los **Server Components** nos permiten renderizar componentes _exclusivamente_ en el servidor. Su código nunca se envía al navegador.
7~
8### Los Beneficios
9~
101.  **Tamaño de Paquete Cero**: Las dependencias utilizadas en Server Components (como analizadores de markdown o bibliotecas de fechas pesadas) permanecen en el servidor.
112.  **Acceso Directo al Backend**: Puedes consultar tu base de datos directamente dentro de tu componente sin exponer puntos finales de API.
123.  **Code Splitting Automático**: Los componentes cliente importados del lado del servidor se dividen automáticamente.
13~
14## Patrón de Obtención de Datos
15~
16Con RSC, puedes hacer que tus componentes sean `async` y esperar datos directamente.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Usuarios</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense para Streaming
39~
40Dado que la obtención de datos puede ser lenta, envuelve tus componentes en `<Suspense>` para mostrar una interfaz de usuario alternativa inmediatamente mientras se cargan los datos.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>Mis Usuarios</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Combinando Server y Client Components
60~
61Uno de los aspectos más confusos es cómo combinar componentes de Servidor y Cliente.
62~
63**Regla de Oro**: Los Server Components pueden importar Client Components. Los Client Components _no pueden_ importar Server Components directamente. Sin embargo, puedes pasar un Server Component como `children` a un Client Component.
64~
65### El Patrón "Children"
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Cuenta: {count}
79      {children} {/* ¡Esto puede ser un Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* Esto funciona perfectamente */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Errores Comunes
100~
1011.  **Usar Contexto en Server Components**: El Contexto es un concepto del lado del cliente. Si necesitas compartir datos del lado del servidor, pásalos como props o usa una caché especializada de alcance de solicitud.
1022.  **Agregar Controladores de Eventos**: No puedes agregar `onClick` u `onChange` a un Server Component. Esa lógica pertenece a un nodo hoja genérico de Client Component.
103~
104## Conclusión
105~
106React Server Components no son solo una característica; son un cambio de paradigma. Al comprender el límite entre servidor y cliente, puedes construir aplicaciones que sean altamente interactivas e increíblemente rápidas.
107~