Next.js 11: Componentes de Servidor por Defecto
easy⏱ 5 mincoursenextjs
Todo empieza en el servidor
Antes del App Router, las apps de React enviaban 100% de JS al cliente. Ahora, cualquier archivo dentro de app/ — page.tsx, layout.tsx, un componente cualquiera — es un Componente de Servidor por defecto. No hace falta import ni directiva. Se ejecuta una vez en el servidor (o en build time), produce HTML/payload RSC, y el código del componente nunca llega al navegador.
// app/products/page.tsx — a Server Component, no directive needed
import { db } from '@/lib/db';
export default async function ProductsPage() {
const products = await db.product.findMany(); // runs on the server only
return (
<ul>
{products.map((p) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
);
}
Cero JS de cliente enviado
Como los Componentes de Servidor nunca envían su código, una página construida enteramente con ellos manda casi 0kb de JavaScript de componentes al navegador — solo HTML más el runtime mínimo para hidratar lo que sí sea cliente. Por eso el valor por defecto del App Router es 'servidor' y no 'cliente': convierte el camino rápido en el camino fácil.
Haz crecer el bundle
Activa 'use client' en ProductList y Reviews en el simulador y observa cómo cambia el medidor de JS enviado. Luego agrega una cuarta sección llamada Comments (costo 6) al arreglo SECTIONS y al estado inicial clientFlags, manteniéndola solo-servidor (false) por defecto.