Next.js 11: Server Components by Default
easy⏱ 5 mincoursenextjs
Everything starts on the server
Before the App Router, React apps shipped 100% client JS. Now, any file under app/ — page.tsx, layout.tsx, a plain component — is a Server Component by default. No import, no directive needed. It runs once on the server (or at build time), produces HTML/RSC payload, and the component's own code never reaches the browser.
// 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>
);
}
Zero client JS shipped
Because Server Components never ship their code, a page built entirely of them sends close to 0kb of component JavaScript to the browser — just HTML plus the minimal runtime needed to hydrate whatever is client. This is why the App Router's default is 'server' rather than 'client': it makes the fast path the easy path.
Grow the bundle
Toggle 'use client' on ProductList and Reviews in the simulator and watch the JS shipped meter change. Then add a fourth section called Comments (cost 6) to the SECTIONS array and to the initial clientFlags state, keeping it server-only (false) by default.