From Overreacted · · 1 min
Inside RSC Explorer: Demystifying React Server Components
Learn how React Server Components serialize trees, handle streaming, and manage state under the hood with Dan Abramov's RSC Explorer.
In brief
Learn how React Server Components serialize trees, handle streaming, and manage state under the hood with Dan Abramov's RSC Explorer. Understanding the underlying RSC protocol helps developers build better mental models for React streaming, Server Actions, and state management. Originally reported by Overreacted.
Unpacking the RSC protocol
Recent security disclosures sparked widespread developer interest in how React Server Components serialize data over the wire.
“The RSC protocol is the format in which React trees (and a superset of JSON ) get serialized and deserialized by React.”
Hidden in the source code
Because the protocol is an implementation detail, React continuously evolves it without publishing formal documentation outside source code.
“The benefit of this approach is that React has a lot of leeway to improve the format and add new features and optimizations to it.”
A visual sandbox for RSC
RSC Explorer is an open-source tool built to demonstrate the inner workings of the RSC protocol step-by-step in an interactive workspace.
“I’m calling it RSC Explorer , and you can find it at https://rscexplorer.dev/ .”
Running entirely client-side
The explorer runs fully in the browser by executing the server runtime inside a Web Worker using real React protocol packages.
“RSC Explorer is built using exactly the same packages that React provides to read and write the RSC protocol, so every line of the output is real.”
Reviving components across networks
Stepping through the stream reveals how raw JSON protocol lines turn back into reconstructible client-side JSX trees.
“We’ve just seen a simple piece of JSX—the <h1>Hello</h1> tag—cross the network and get revived on the other side.”
Visualizing streaming and loading state
When data streams in chunks, React uses Suspense boundaries to render partial UIs with fallback content while waiting for pending components.
“Notice a “hole” in the middle of the streamed tree, visualized as a “Pending” pill.”
Streaming virtual DOM
RSC protocol payloads don't stream plain HTML or raw text strings. Instead, they stream virtual DOM elements and client module references.
“It’s like we’re returning React trees from API routes.”
Calling server functions directly
Functions tagged with 'use server' act as endpoints that client forms can invoke directly as standard asynchronous JavaScript functions.
“Here, greet is a Server Action , exposed with 'use server' as an endpoint.”
Updating props while keeping state
Frameworkless router refresh refetches server virtual DOM trees, passing new props to client components without destroying local component state.
“Its background color will change but its state will be preserved!”
Inspecting security vulnerabilities
The explorer lets developers select older React versions to interactively test security issues like CVE-2025-55182.
“As you would expect, this one only works on the vulnerable versions so you’d need to select 19.2.0 in the top right corner to actually get it to work.”
Sharable and lightweight learning
The tool is designed to be embedded in tutorials and shared through URLs, offering an interactive window into React internals.
“The tool is entirely client-side and I intend to keep it that way for simplicity.”
The bottom line
Understanding the underlying RSC protocol helps developers build better mental models for React streaming, Server Actions, and state management.
