React Server Components
In short
React Server Components are React components that run only on the server or at build time, so they can read data directly and send no JavaScript to the browser.
What are React Server Components?
In classic React, every component's code is downloaded and run in the browser, even when it only displays text. React Server Components, stable since React 19 in December 2024, add a second kind of component that renders ahead of time in a separate environment: at build time, or on the server for each request. Their code never reaches the browser, so a large library they use, such as a Markdown parser, adds nothing to the bundle, and they can be async functions that read a database or a file directly instead of calling an API.
Components that need state, effects or event handlers, such as a like button, stay Client Components. A file that starts with the "use client" directive marks that boundary: it and everything it imports are sent to the browser. Server Components can render Client Components and pass them serializable props, such as strings, numbers and plain objects, or already rendered elements as children. The server sends its result as the RSC payload, a streamable description of the component tree that React in the browser merges into the page, so a navigation can refresh server-rendered parts without losing client state.
The related "use server" directive marks Server Functions, called Server Actions until 2024: functions that run on the server but that client code can call like ordinary functions, for example to save a form. Each one is in effect a public HTTP endpoint, so it must check who is calling and validate its input. Server Components need a framework or bundler that supports them, such as the Next.js App Router; React Router, Waku and others have added support too, and the bundler APIs underneath can still change between React minor versions.
React Server Components are often confused with server-side rendering (SSR). SSR turns components into HTML for the first page load, and then the browser downloads every component's code and hydrates it to make the page interactive. Server Components are never hydrated and never ship their code, and they don't have to produce HTML at all. The two work together: frameworks usually render the Server Component output to HTML with SSR for a fast first view.
Key takeaways
- Server Components run on the server or at build time; their code never reaches the browser.
- They can be
asyncand read databases or files directly. - Client Components, marked with
"use client", handle state and interactivity. "use server"marks Server Functions, not Server Components.- They complement SSR: SSR makes HTML, Server Components cut the JavaScript sent to the browser.
Example
// ProductPage.jsx: a Server Component, the default; its code never reaches the browser
import { db } from "./db";
import AddToCart from "./AddToCart"; // a Client Component: AddToCart.jsx starts with "use client"
export default async function ProductPage({ id }) {
const product = await db.products.find(id); // read the database directly, no API needed
return (
<main>
<h1>{product.name}</h1>
<p>{product.description}</p>
<AddToCart productId={id} />
</main>
);
}Readers ask
What is the difference between React Server Components and SSR?
SSR renders components to HTML on the server, but their code is still sent to the browser and hydrated. Server Components run only on the server, are never hydrated and send no code, which shrinks the JavaScript bundle; frameworks often use both together.
Can Server Components use hooks like useState?
No. State, effects and event handlers need the browser, so they belong in Client Components. Server Components can, however, be async and wait for data directly.
Do I need Next.js to use React Server Components?
You need a framework or bundler that implements them, because Server Components depend on build and server integration. The Next.js App Router was the first; React Router, Waku and others have added support since.
See also
- ReactWeb Development, p. 43React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
- SSRWeb Development, p. 53SSR is a technique where the server builds the full HTML for a page on each request, so users and search engines receive ready-to-read content immediately.
- Next.jsWeb Development, p. 37Next.js is a React framework that adds routing, server-side rendering, static generation and server code, so a whole web app can be built as one project.
- HydrationWeb Development, p. 26Hydration is the step where JavaScript in the browser takes over server-rendered HTML, attaching event handlers and state so the page becomes interactive.
- React HooksWeb Development, p. 44React hooks are functions such as useState and useEffect that let a function component keep state, run side effects and share logic with others.
- CSRWeb Development, p. 13CSR is a rendering approach where the browser downloads a mostly empty HTML page plus JavaScript, then builds the page content on the user's device.
Sources
Spotted a mistake or something missing on this page?Suggest an edit