React Server Components (RSC) se renderean solo en el servidor — su JavaScript nunca se envía al navegador. En el App Router, cada componente es un Server Component por defecto; optas explícitamente por el comportamiento del cliente.
db ;
() {
users = db..();
(
);
}
Los Server Components pueden ser asíncronos, await datos directamente y acceder a recursos solo del servidor (base de datos, sistema de archivos, secretos) — porque se ejecutan en el servidor. No se necesita una capa de API para obtener datos, y los secretos nunca llegan al cliente.
El navegador recibe el HTML/UI renderizado, no el código del componente ni sus dependencias. Un Server Component que usa una biblioteca pesada de markdown o de fechas no envía nada de esa biblioteca al navegador — reduce drásticamente el tamaño del bundle.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
Nada de interactividad, estado, efectos o APIs del navegador — eso requiere un Client Component.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
El patrón: Los Server Components manejan datos/estructura; inserta Client Components solo donde se necesita interactividad ("islands").
Los Server Components son la característica definitoria del App Router.
Reducen el tamaño del bundle del cliente (menos JS para descargar/analizar), permiten acceso directo y seguro a datos del servidor sin una API y mejoran el rendimiento y SEO.
Saber que son la opción predeterminada — y qué obliga a un componente a ser un Client Component — es fundamental para estructurar aplicaciones App Router de manera eficiente.