React Server Components: The Wire Format

In 2023, React Server Components (RSC) have moved from "experimental" to "the way we build apps." We've heard about the benefits: zero-bundle size components, direct DB access, and improved SEO. But if you open the Network tab, you'll see a mysterious stream of data. This is the RSC Wire Format.

It's Not JSON, and It's Not HTML

RSC doesn't return HTML (that's what SSR does for the initial load). It returns a serialized description of the UI tree. Each line is a separate chunk, allowing the browser to start rendering before the whole response is finished.

A typical RSC response might look like this:

1:I["./src/components/ClientCounter.js",["client-counter"],""]
2:{"name":"Product Page","price":"$99"}
3:M1:{"id":"product_42","component":"Counter"}
J0:["$","div",null,{"children":[["$","h1",null,{"children":"$2.name"}],"$L3"]}]

Breaking Down the Tokens

• J: A JSON-serialized UI element (similar to React.createElement).
• I: Client Component registration. It tells the browser which JS bundle to load.
• M: A reference to an I block. It links a specific instance of a Client Component to its definition.
• $2.name: A reference to data defined in another line (line 2 in this case).

Why the Reference System?

The reference system is brilliant because it allows for deduplication. If the same data or component is used multiple times in the tree, it's only sent once. It also allows for Suspense integration. If a component is still fetching data, the server can send a "placeholder" and then stream the actual component data later, prefixed with a reference ID.

Handling Client Components

When the RSC parser encounters an I token, it triggers a fetch for the corresponding JS chunk. Once the chunk is loaded and the RSC stream provides the props, the client-side React reconciler takes over.

// This never reaches the browser's JS bundle
async function ServerComponent() {
  const data = await db.query('...');
  return <div data={data} />;
}

RSC is a fundamental shift. We're no longer just sending data or just sending code; we're sending a hybrid "UI-as-data" stream that combines the best of both worlds.

Aunimeda builds modern web frontends - from single-page applications to complex multi-locale sites.

Contact us to discuss your frontend project. See also: Web Development, Corporate Website Development