# 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. - Title: Inside RSC Explorer: Demystifying React Server Components - Summary: Learn how React Server Components serialize trees, handle streaming, and manage state under the hood with Dan Abramov's RSC Explorer. Understanding the… - Keywords: react, javascript, web development, rsc, technology, design, Inside, Explorer, Demystifying, Server, Components, Overreacted - Source: Overreacted — https://overreacted.io/introducing-rsc-explorer - Read time: 1 min - Topics: react, javascript, web development, rsc, technology, design ## 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

Hello

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. ## Key takeaway Understanding the underlying RSC protocol helps developers build better mental models for React streaming, Server Actions, and state management.