Tree Reconcilation
React calculate what the DOM should look like (called “Work-In-Progress”) and what the DOM currently looks like (called “Current”), in virtual DOM DOM (js object). Those were represented as two branches of object trees.
After making those trees, React compare those two branches and find minimum number of step required to make WIP into Current.
Server Rendering
Traditionally, after server generate complete HTML string from component and send to the client, js code for that same component also has to be sent to the client so the Virtual Dom could be build using that function component.
Now here’s where React Server Components kicks in. RSC add the ability to mix server component and client component without having server to send server components code to client. How does React do that? we will explain in the next section
Flight
In order to add VDOM from server component without sending component code, React added ability to serealize React Element Tree returned from server executed functions. The result of server component is serealized and then sent to the client.
Let’s suppose we have a following code in nextjs.
export default function Home() {
return (
<main>
<h1>understandingreact.com</h1>
</main>
);
}
The above code will be serealized into the following, this process is called “flight”.
"[\"$\",\"main\",null,{\"children\":[\"$\",\"h1\",null,{\"children\":\"understandingreact.com\"},\"$c\"]},\"$c\"]"
These sum of data sent is called “RSC payload”.
If we format it for easier examination, it looks like this:
{
"type": "main",
"key": null,
"props": {
"children": {
"type": "h1",
"key": null,
"props": {
"children": "understandingreact.com"
}
}
While React provides serealization format, meta-framework (eg: Next.js) must do the work of creating/sending payloads. Next.js, for example, has a function in its codebase called generateDynamicRSCPayload.
This post is the brief summary of the following source: Understanding React Server Components
Blog 