React Server Components

React Server Components (RSC) run on the server during a request (or at build time). They can read databases and filesystems directly, keep secrets off the client, and send less JavaScript to the browser. In the App Router, components are Server Components by default.

What Server Components can do

• Async/await data fetching in the component body
• Access server-only modules (ORM, env secrets)
• Render large static subtrees without shipping their logic to the client

What they cannot do

• useState, useEffect, or browser event handlers
• Access window, localStorage, or DOM APIs
• Use most client-only third-party widgets without a Client Component wrapper

Example (real project)

// app/products/page.tsx — Server Component (no directive)
export default async function ProductsPage() {
  const products = await db.product.findMany();
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Important interview questions and answers

1. Q: Server Component vs SSR?
   A: SSR is a delivery timing; RSC is a component type that never hydrates on the client unless serialized as part of a client boundary.
2. Q: Can Server Components import Client Components?
   A: Yes—as children or props. Client Components cannot import Server Components (they would pull server code into the bundle).
3. Q: Default in app/?
   A: Server Component unless the file starts with 'use client'.

Self-check

1. Why can an RSC query a database without an API route?
2. Name two hooks forbidden in Server Components.

Tip: Default to Server Components—push 'use client' to the smallest interactive leaf, not the page root.