Mastering Server Components in React

What Are Server Components?

They allow you to render components on the server with zero client JS for those parts.

Patterns

Data Fetching in Server Components

Fetch on the server, stream UI, and keep client bundles small.

export default async function ProductList() {
  const products = await getProducts(); // runs on the server
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

When to Use Client Components

For interactivity—forms, animations, drag-and-drop—mark with "use client".

Mental Model

1. Render the static majority on the server.
2. Hydrate only the interactive edges.
3. Measure bundle size and TTI.