rsc-debug-info.md

Let's assume we wanna show a tree like this:

ServerRoot # RSC
  html
    body
      MyLayout # RSC
        main
          "Hello"

In the RSC payload, it'd look something like this (except condensed to one line)

0:
[ "$", "html", { "children": [
  [ "$", "body", { "children": [
    [ "$", "main", { "children": "Hello" } ]
  ] } ]
] } ]

How do we mark RSCs in here?

Variant 1: new node type mixed into existing trees

Use "#" instead of "$" to mark debug nodes. after the "#" there's a reference to a "D" row with debug info

• Pro: stays close to the current element format (["$", "div", {}])...
• Con: ...but requires adding special bits (["#", "$1", {}]) into the tree to mark server component "slices"

0:
[ "#", "$1", { "rendered": [
  [ "$", "html", { "children": [
    [ "$", "body", { "children": [
      [ "#", "$2", { "rendered": [
        [ "$", "main", { "children": "Hello" } ]
      ] } ]
    ] } ]
  ] } ]
] } ]

1: D{ "displayName": "ServerRoot", "props": {}, "info": {} }
2: D{ "displayName": "MyLayout", "props": {}, "info": {} }

Variant 2: break the tree up

break up the tree on every server component we wanna show + link them up using references

• Pro: no new "#" node required...
• Con: ...but changes the shape of the payload significantly

0: D{ "displayName": "ServerRoot", "rendered": "$1" }

1: [ "$", "html", { "children": [
  [ "$", "body", { "children": [
    "@$2"
  ] } ]
] } ]

2: D{ "displayName": "MyLayout", "rendered": "$3" }

3: [ "$", "main", { "children": "Hello" } ]