What is React Server Components?

Not the same thing as SSR

The two get confused because both involve "rendering on the server". SSR produces the initial HTML of a component tree on the server, after which the browser downloads the code for every one of those components and hydrates them. Server Components answer a different question: which components' code should never reach the browser at all? A server component runs, emits its result in a compact format called the React Server Component Payload (RSC Payload), and is done. It doesn't run again on the client and isn't hydrated.

According to the React docs, server components can run at build time (for static content) or per request on a web server (for dynamic content). In the Next.js App Router, on first load the server components are rendered to an RSC Payload, client components and that payload together produce the HTML, the browser shows the HTML immediately, the payload reconciles the two trees, and JavaScript hydrates only the client components.

The server–client boundary

// app/product/[id]/page.tsx  (server component, the default)
import { getProduct } from "@/lib/db";
import FavouriteButton from "./favourite-button";

export default async function Page({ params }) {
  const { id } = await params;
  const product = await getProduct(id); // straight to the database
  return (
    <main>
      <h1>{product.name}</h1>
      <FavouriteButton productId={product.id} />
    </main>
  );
}

// app/product/[id]/favourite-button.tsx
"use client";
import { useState } from "react";
export default function FavouriteButton({ productId }) { /* ... */ }

There is no directive for server components; in the Next.js App Router, pages and layouts are server components by default. "use server" marks Server Functions that the client can call, not server components. "use client" draws a boundary: the file that starts with it, and everything it imports, goes into the client bundle.

What is a client component?

A client component is a familiar React component that runs in the browser: it can use useState, useEffect, event handlers such as onClick, and browser APIs such as localStorage. Despite the name it isn't client-only; in Next.js its HTML is also rendered on the server on first load and then hydrated. Server components can be passed into a client component as children, in which case they stay on the server. Props going from server to client must be values React can serialise, so you can't pass an ordinary function.

What you gain

• Less JavaScript: heavy libraries whose only job is to produce HTML, such as a Markdown parser or syntax highlighter, stay on the server. Next.js also code-splits server components automatically.
• Data access close to the source: a component can query the database without an intermediate API layer, which removes client-side request waterfalls.
• Secrets stay server-side: API keys and tokens never reach the browser, which makes secrets management simpler.
• Streaming: with Suspense boundaries, ready sections are sent right away and slower ones are added as their data arrives.

Common mistakes

• Drawing the boundary too high: adding "use client" to the root layout drags everything beneath it into the client bundle and erases the benefit. Put the directive on the smallest component that needs interactivity.
• Leaking server code to the client: shared modules can be imported on both sides. The server-only package turns an import of a server-only file from a client component into a build error. Next.js also includes only NEXT_PUBLIC_-prefixed environment variables in the client bundle.
• Wrapping the whole app in context providers: React context doesn't work in server components; a provider must be a client component and should sit as deep in the tree as possible.
• Assuming hydration is gone: client components still hydrate. RSC narrows the scope of hydration rather than removing it.

Support today

React Server Components are stable as of React 19. The React documentation notes, however, that the lower-level APIs used to implement them inside a bundler or framework don't follow semver and may change between React 19.x minors. In practice RSC is therefore used through a framework rather than directly; the most widespread implementation is the Next.js App Router, where server components are the default.