React Interview Question: What Are React Server Components?

Short answer: Server Components render only on the server. They can be async, read databases and files directly, and their code is never sent to the browser. Client Components (marked 'use client') handle interactivity with state, effects and event handlers.

// Server Component: runs on the server only
export default async function OrdersPage() {
  const orders = await db.order.findMany({ take: 20 });   // direct DB access, no API needed
  return <OrderTable orders={orders} />;
}

'use client';
// Client Component: shipped to the browser, can be interactive
export function RefundButton({ orderId }) {
  const [pending, setPending] = useState(false);
  return <button disabled={pending} onClick={...}>Refund</button>;
}

Benefits

• Smaller bundles: heavy libraries used only for rendering (markdown, syntax highlighting, date formatting) stay on the server.
• Simpler data fetching: fetch where the data is used, without client-side waterfalls or extra API endpoints.
• Security: secrets and database queries never reach the browser.
• Streaming with Suspense: slow parts of the page arrive later without blocking the rest.

How it differs from SSR

SSR renders components (including client ones) to HTML for the first load, then hydrates them with their JavaScript. Server Components never hydrate because there's no client code for them. Frameworks use both together.

Limitations to mention

• No state, effects or browser APIs in Server Components.
• Props passed to Client Components must be serialisable.
• They need a framework or bundler that supports them (for example Next.js App Router).