React Server Components Payload (RSC / Flight Payload)

The React Server Components payload is the serialized representation sent from the server that lets React reconstruct a Server Component tree and connect it to Client Components in the browser. It carries component results, relationships, serialized data, and references needed for client-side reconstruction rather than simply sending a finished HTML document.

With React Server Components, rendering is split between server and client. Server Components execute on the server, while Client Components are represented by references that the browser-side React runtime can resolve and hydrate or render as appropriate. The RSC payload is the data format used to communicate this component tree and its boundaries.

The payload is commonly associated with React Flight. It is typically streamed, so the browser can receive component information progressively rather than waiting for one monolithic response. The exact wire representation and surrounding transport behavior can depend on the React version and framework integration, so interview answers should focus on its role rather than memorizing internal record syntax.

A useful distinction is that the RSC payload is not equivalent to the HTML response. HTML can provide the initial visual document, while the RSC payload provides React-specific information needed to reconstruct the Server Component result and integrate Client Components. During navigation, an application can request RSC data and update the relevant part of the UI without requiring a complete traditional document reload.

Server Components can pass serializable props to Client Components, but they cannot directly pass arbitrary server-only objects, functions, or other non-serializable values across the boundary. The client runtime interprets the payload and resolves references to client-side modules so the resulting React tree can be rendered in the browser.

For interviews, emphasize the architectural purpose: the payload is the bridge between server-rendered component computation and the client React runtime. It enables Server Components to remain server-side while still composing with interactive Client Components.

Key points

• The RSC payload is a React-specific serialized representation of Server Component output and its component relationships.
• It is associated with the React Flight protocol and can be streamed incrementally.
• It is different from HTML: HTML represents document markup, while the RSC payload represents React component data and references.
• Client Components appear across the server/client boundary through references and serializable props.
• The payload enables client-side React to reconstruct and update the component tree without requiring every navigation to be a full document request.

Interview questions

What is the RSC payload, and why does React Server Components need it?

The RSC payload is the serialized data produced from rendering Server Components. It lets the client React runtime reconstruct the server-computed component tree and understand where Client Components participate. This is different from sending only HTML because React needs component-level information for subsequent rendering and navigation. It is commonly associated with the React Flight protocol.

How is an RSC payload different from HTML?

HTML is a document-oriented representation that the browser can parse into DOM elements. An RSC payload is React-oriented data that describes the result of Server Component rendering and includes information needed to reconstruct the React tree. A framework can use both: HTML can provide the initial document while the RSC payload supplies React-specific information. During navigation, RSC data can allow React to update the application without replacing the entire document.

What crosses the Server Component to Client Component boundary?

A Server Component can render a Client Component and provide supported serializable props to it. The RSC representation carries the information needed to connect that Client Component reference with the server-rendered tree. Server-only values such as arbitrary functions cannot simply be passed as ordinary props across this boundary. The precise set of supported values is defined by the React/framework serialization mechanism.

Why is the RSC payload useful during client-side navigation?

A navigation can request a new Server Component result rather than requesting an entirely new document. The server can stream an updated RSC representation, and the client React runtime can reconcile that result with the existing tree. This allows server-side data and rendering logic to participate in navigation while preserving appropriate client-side state and interactive boundaries. Frameworks build routing and caching behavior around this mechanism.

What should you avoid assuming about the Flight wire format?

The low-level Flight representation is an implementation and protocol detail, not something application code should normally construct by hand. Its record syntax and transport integration can change as React evolves. Applications should generally interact with the framework and React APIs that generate and consume the payload. In an interview, it is more valuable to explain the payload's architectural role than to rely on memorized internal record formats.