Kelly Mears

React Server Components

Components that execute only on the server and never ship their code to the browser.

Web Platform2 min read214 words11 out · 21 in
also calledRSCServer Components

React Server Components are components that run exclusively on the server. They can read a database, use the filesystem, and hold secrets, and their code is never sent to the browser — the client receives a serialized description of their output instead of the logic that produced it.

The model's value is that it makes the Client-Server Boundary explicit and per-component rather than per-route. A page can be almost entirely server-rendered with a few interactive leaves, and only those leaves cost the visitor any JavaScript. This is a substantial change from conventional Server-Side Rendering, where the whole tree ships regardless.

The rules that follow are strict by necessity. Anything crossing the boundary must be serializable, so functions and class instances cannot be passed to a client component. Hooks and event handlers require a client component, marked explicitly. And a client component's imports are all client code — including anything it imports transitively, which is how a single innocuous import can put a large library into the visitor's bundle. See Module Graph and Code Splitting.

Server components also interact with data freshness: since they render on the server, caching and revalidation decide how current the output is, which makes Incremental Static Regeneration and Cache Invalidation part of the component model rather than infrastructure beneath it.

See also5

Hydration

Attaching client-side behavior to server-rendered markup without rebuilding it.

Web Platform18 connections

Islands Architecture

Rendering a page as static HTML with small independently interactive regions.

Web Platform18 connections

Performance Budget

A committed numeric ceiling on a page's cost, enforced automatically.

Web Platform26 connections

Lazy Loading

Deferring the fetch of a resource until it is needed, or until the browser is idle.

Web Platform21 connections

CSS-in-JS

Writing a component's styles in JavaScript alongside its markup and logic, so styles are scoped automatically and can depend on the component's state, an approach popular in the React era whose runtime costs led to build-time variants.

Web Platform16 connections

Linked from21