What are React Server Components and how do they differ from SSR?

A Server Component runs on the server and can read data directly, including with await. Its code never ships to the browser. A Client Component is marked with 'use client' and can use state, effects and browser APIs. The two can be composed: a Server Component can render a Client Component, and a Client Component can receive Server Component output through children.

async function ProductPage({ id }) {
  const product = await db.product.findUnique({ where: { id } });

  return (
    <main>
      <h1>{product.name}</h1>
      <AddToCartButton productId={product.id} />
    </main>
  );
}

// AddToCartButton.tsx
"use client";

export function AddToCartButton({ productId }) {
  const [pending, startTransition] = useTransition();
  return <button onClick={() => addItem(productId)}>Add to cart</button>;
}

Server Components versus SSR

• RSC: component code stays on the server and is not hydrated on the client
• SSR: client component code is rendered to HTML, then hydrated in the browser
• RSC can be async and access server-only resources directly
• SSR improves first paint and SEO but still ships the component JavaScript
• A framework that supports RSC is required; it is not a drop-in Vite setting

Props crossing from server to client must be serializable. You cannot pass a function, a database client or a non-serializable class instance. Client Components cannot import Server Components directly; composition happens through props and children.