This is a parser for React Server Components (RSC) when sent over the network. React uses a format to represent a tree of components/html or metadata such as requiered imports, suspense boundaries, and css/fonts that needs to be loaded.
I made this tool to more easily let you understand the data and explore it visually.
With this tool:
![image](https://private-user-images.githubusercontent.com/14835120/239708672-e883642d-3ab0-44aa-a1c0-1783479eb369.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA5MTgwOTAsIm5iZiI6MTcyMDkxNzc5MCwicGF0aCI6Ii8xNDgzNTEyMC8yMzk3MDg2NzItZTg4MzY0MmQtM2FiMC00NGFhLWExYzAtMTc4MzQ3OWViMzY5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE0VDAwNDMxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU5NWJmYWUwMTM2MWE4OWExMzgxYmMyYTVmOWYzNDJlOTE2ZWQ1NjNiODg2YzhlMWMzMmMwYzM5ZmM5MjE3OGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.3K1XELjhioAWv84tyCLcmTUVMwKa98w-NnxS8BxcdZY)
Without this tool:
![image](https://private-user-images.githubusercontent.com/14835120/239093371-1c60f150-1b17-407f-a1b3-1130f212563f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA5MTgwOTAsIm5iZiI6MTcyMDkxNzc5MCwicGF0aCI6Ii8xNDgzNTEyMC8yMzkwOTMzNzEtMWM2MGYxNTAtMWIxNy00MDdmLWExYjMtMTEzMGYyMTI1NjNmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE0VDAwNDMxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA1NzRkZWRiZmE4ZTRmMTI2OTEyM2M3YzJlYjUwNDkzMzA0NmExMzk3NGFmNDUyNDlhOTNkOGE2NTc3NTJjYjkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.9cbSv3d_FkMjEvITKc5g9nVfcjmjmKMDFBK8G3aQ1tg)
- Go to a site that uses the NextJS App router or generally is based on React Server components.
- Open the network tab in your dev tools
- Reload.
- Look for fetch responses the payload roughly looks like json, but each like starts with something like
O:
,1:I
,b:
or similar. - Copy the text and paste it into the form on https://rsc-parser.vercel.app/
- Explore!
Please make an issue on https://github.com/alvarlagerlof/rsc-parser/issues/new and include the text content that the parser was unable to handle.
Currently this is is a standalone site, which means that it is not able to handle live streaming payloads, but I plan on exploring using doing this as a browser extension or possibly an embedded debugging component similar to the React Query devtools. The latter would probably need a service worker to intercept network requests. If you know anything about this I'd love to talk. I'm @alvarlagerlof on Twitter.
I'm also considering a rendering of the component tree that looks more like your code itself. I think it should be possible to replicate it pretty well. In this area I am also considering attempting to combine the different rows in the stream and stitch them together into a single tree. Done in #7
Another area of improvement is better rendering of sizes of rows/objects. Browsers and servers have compression like gzip and brotli, but this codes does not take that into account.
I do want to note that all of this was put together quickly, so it likely needs a bit of refactoring to make more sense.
This site is made in Next.js using the App router, but all of interesting things are inside a single server component.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http:https://localhost:3000 with your browser to see the result.