¿Qué son los React Server Components y en qué se diferencian de los client components?

Question

Accepted Answer

Los **Server Components (RSC)** se renderizan en el **servidor** y envían un resultado serializado al navegador. No envían **nada de JavaScript** de sí mismos — solo los datos/marcado, no su código. ## Los dos tipos ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Capacidades y restricciones | | Server Component | Client Component | |---|---|---| | Puede hacer `await` / obtener datos directamente | ✅ | ❌ | | Acceder a recursos/secretos del servidor | ✅ | ❌ | | `useState`/`useEffect`/eventos | ❌ | ✅ | | Envía JS al navegador | ❌ (cero) | ✅ | ## Por qué importa - **Menos JavaScript en el cliente** → cargas e interactividad más rápidas. - **Obtención de datos junto a la fuente** (sin viaje de ida y vuelta a una API desde el navegador, sin exponer credenciales de la base de datos). - Los **compones**: los server components renderizan client components para las "islas" interactivas. Un server component puede renderizar uno de cliente, pero **no** al revés. ## Detalle a tener en cuenta Las props que se pasan a través de la frontera servidor→cliente deben ser **serializables** — no puedes pasar funciones ni instancias de clase. Los RSC cambian el modelo mental de "todo se ejecuta en el navegador" a "renderiza en el servidor por defecto, opta por el cliente solo donde necesitas interactividad". ## Por qué es importante Los Server Components reducen drásticamente el JavaScript enviado al cliente y permiten obtener datos directamente en el servidor, mejorando el rendimiento y la seguridad — pero exigen entender qué se ejecuta dónde y qué puede cruzar la frontera servidor-cliente.

	Server Component	Client Component
Puede hacer `await` / obtener datos directamente	✅	❌
Acceder a recursos/secretos del servidor	✅	❌
`useState`/`useEffect`/eventos	❌	✅
Envía JS al navegador	❌ (cero)	✅