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

Question

QA Hub Editorial · Accepted Answer

Short answer

React Server Components (RSC) run exclusively on the server. They can access server-side resources directly, reduce client-side JavaScript, and seamlessly compose with interactive Client Components.

Key differences

Server Components: No client JS shipped; can read files, query databases directly; cannot use hooks or browser APIs.
Client Components: Ship to the browser; can use state, effects, and event handlers; must be explicitly marked (e.g., "use client" in Next.js App Router).

Example

// Server Component (default in App Router)
async function ProductList() {
  const products = await db.query('SELECT * FROM products');
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          <ProductCard product={p} />
        </li>
      ))}
    </ul>
  );
}

Why it matters

Server Components let you move data fetching and heavy dependencies to the server, shrinking the JavaScript bundle and improving initial page load. They are foundational in frameworks like Next.js App Router.

); } Why it matters Server Components let you move data fetching and heavy dependencies to the server, shrinking the JavaScript bundle and improving initial page load. They are foundational in frameworks like Next.js App Router.