https://github.com/alvarlagerlof/rsc-parser

A parser for the React Server components when sent over the network
https://github.com/alvarlagerlof/rsc-parser

Last synced: 3 months ago
JSON representation

A parser for the React Server components when sent over the network

• Host: GitHub
• URL: https://github.com/alvarlagerlof/rsc-parser
• Owner: alvarlagerlof
• License: mit
• Created: 2023-05-09T19:04:01.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-05T20:46:06.000Z (3 months ago)
• Last Synced: 2024-08-06T01:14:59.390Z (3 months ago)
• Language: TypeScript
• Homepage: https://rsc-parser.vercel.app
• Size: 284 MB
• Stars: 501
• Watchers: 5
• Forks: 11
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# RSC Parser

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.

## Comparsion









## How do I use this?

### Extension

There is a Chrome Extension than you can add [here](https://chromewebstore.google.com/detail/rsc-devtools/jcejahepddjnppkhomnidalpnnnemomn).

### npm package

You can also add the parser as a package to your project. You'll get an embedded panel component that you can render in a layout.tsx for example.

First, install [@rsc-parser/embedded](https://www.npmjs.com/package/@rsc-parser/embedded) from npm like: `yarn add @rsc-parser/embedded`

Then you can load it in a `layout.tsx` for example.

```tsx

import { Suspense, lazy } from "react";

const RscDevtoolsPanel = lazy(() =>

  import("@rsc-parser/embedded").then(module => ({

    default: module.RscDevtoolsPanel,

  })),

);

export default function RootLayout({ children }) {

  return (

    

      

        {children}

        {/* Use any condition or flag you want here */ }

        {process.env.NODE_ENV === "development" ? (

          

            

          

        ) : null}

      

    

  );

```

### Website

There is also a website that you can use by manually copy pasing RSC payloads.

1. Go to a site that uses the NextJS App router or generally is based on React Server components.

2. Open the network tab in your dev tools

3. Reload.

4. Look for fetch responses the payload roughly looks like json, but each like starts with something like `O:`, `1:I`, `b:` or similar.

5. Copy the text and paste it into the form on https://rsc-parser.vercel.app/

6. Explore!

## It crashed!

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.