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?
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": {} }
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" } ]