Server Components

In the App Router every component is a Server Component by default. It runs on the server (at build time or per request), its output is sent as HTML plus a compact description called the RSC payload, and its code is never sent to the browser.

• Can be async and await data directly.
• Can use secrets (process.env.DATABASE_URL) and server libraries safely.
• Adds zero JavaScript to the browser bundle.
• Cannot use state, effects, event handlers or browser APIs (useState, onClick, window).

// app/products/page.tsx — a Server Component
import { db } from '@/lib/db';

export default async function ProductsPage() {
  const products = await db.product.findMany({ take: 20 }); // direct DB access
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}