Next.js ~What is the React Server Component (RSC) Payload~

The React Server Component is a specialized, compact binary data format used by Next.js to transfer the rendered result of Server Components from the server to the client.

What is inside the RSC Payload?

The payload contains the necessary information for the client to reconstruction the React component tree and update the DOM without needing to download or execute the original server Component JavaScript. Key contents include:

• Rendered Output: The final UI structure (Virtual DOM) of your Server Components

• Client Component References: Pointers to the specific JavaScript files needed to hydrate those Client Components.

• Client Component References: Pointers to the specific JavaScript files needed to hydrate those Client Components.

• Serialized Props: Any data passed from a Server Component to a Client Component as props.

• Suspense Information: Metadata for streaming content in chunks as it becomes ready.

How Next.js Uses It

1. On the Server: React renders Server Components into the RSC Payload. For the initial page load, Next.js uses this payload to generate the static HTML for a fast first paint.

2. On the Client: For subsequent navigations (e.g., using next/link), only the RSC Payload is sent to the browser. React then use this payload to reconcile the DOM and hydrate Client Components, making the page interactive

How to View It

You can inspect the payload in your browser's developer tools:

1. Open the Network tab.

2. Filter for requests with the content type text/x-component.

3. Click on a request to see the raw serialized React tree data.