How Does Next.js v14 Implement React Server Components (RSC)?

React Team's Vision

The React team evaluates frontend frameworks on three key factors: User Experience, Maintenance Cost, and Performance. Balancing all three is difficult, so they introduced React Server Components (RSC) to give the server more control and address the IO bottleneck that slows content rendering.

React's audience can be divided into three groups:

Regular frontend developers who use stable React for business development.

Partner teams (e.g., the Next.js team) that receive API support from React.

Early‑adopter developers or teams willing to experiment with upcoming, possibly unstable features.

To serve these groups, React defines three release tracks:

Latest – the default package installed via npm i react.

Canary – installed with npm update react@canary, includes RSC‑related features.

Experimental – installed with npm update react@experimental.

Using RSC Outside Next.js

In Next.js's App Router mode, all components are server components by default. Adding the directive 'use client' at the top of a file marks it as a client component; otherwise it runs on the server. The 'use server' directive marks a function as a Server Action, enabling server‑side logic to be invoked from the client.

Implementing the RSC specification without Next.js requires handling three phases, all provided by the react-server-dom-webpack package:

Server‑side compilation – a webpack plugin ( react-server-dom-webpack/plugin) detects 'use client' directives and automatically creates lazy‑loaded chunks, similar to React.lazy.

Server‑side runtime – renders JSX to a serialized stream using renderToPipeableStream from react-server-dom-webpack/server.

Client‑side runtime – consumes the serialized stream via react-server-dom-webpack/client, converting it back into React elements with helpers such as createFromFetch and createFromReadableStream.

Example of a client component:

'use client'
import {useState} from 'react';

function Cpn() {
  const [num, update] = useState(0);
  // ...
}

When a server component renders this client component, the server emits a reference to the generated chunk (e.g., client0.chunk.js) instead of the component's source code.

During client execution, the react-server-dom-webpack/client library reconstructs a React.lazy component from the streamed data, allowing normal rendering on the browser.

Conclusion

RSC is a React feature that originated in the React Canary channel. Its implementation relies on the react-server-dom-webpack package, which handles server‑side compilation, server‑side streaming, and client‑side deserialization. In Next.js, these steps are integrated, providing an out‑of‑the‑box RSC experience and enabling additional capabilities such as the App Router.

References

data‑fetching‑with‑react‑server‑components: https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

react‑server‑dom‑webpack: https://www.npmjs.com/package/react-server-dom-webpack