Server component are just served as static HTML, the client side stuff will be connected to some JavaScript which will be sent over to the client (your browser). I think this is how it works however I'm not the most knowledgeable in these sorts of areas. Have a look [here](https://overreacted.io/the-two-reacts/)

You should try to open on the network dev tools on your own and observe what happens

RSC are initially sent as HTML within the page but can also be represented as JSON data for further client-side navigation, allowing an hybrid model between server-side navigation and SPA-style navigation

Do you know any video that visualises what you just said? What is the RSR payload? The json you are referring to is get static props etc? How about in app router

Watch this https://youtu.be/KuhfT6-I3QU?si=x5Oia9ZZJBdLiY6e it goes through https://overreacted.io/the-two-reacts/

Thanks man!

Crack open your devtools, it's not properly documented yet imo because those features are experimental, technically they are only part of React canary release (at least it was recently, you'll want to fact check)

it's easy to observe because you see all the requests in your browser

one thing to try for instance, is navigating between 2 pages and see what happens

what happens when you use a form etc.

I am supposing App Router here, in Pages Router it was much simpler as server data where indeed scoped only to "getStaticProps"/"getServerRenderProps"

so you would only observe the JSON data from these functions

but with React Server Components it's more complicated

you will see the data, but also a JSON representation of the HTML

Hmm actually Next docs talks about a binary payload "The RSC Payload is a compact binary" https://nextjs.org/docs/app/building-your-application/rendering/server-components

but last time I checked it was JSON

Yes it's binary data. And then React has something built in that can parse that to html then hydrate it afterwards, I think? Just don't understand that process part. Also confused if the client side components inside the server components are also converted to binary data. For sure you're pure client components go to the js bundle? Would make sense? Should my goal try to be to get less client side js to the end user. So need to decouple my components so until the trade off is not valid anymore?

The requests are pretty much html or a post 200 for your functions client side js. I'm missing something?

Loved his equation:
UI = f(data, state)

regarding client components they are prerendered on the server so it makes sense that they are part of the payload

they will be hydrated later on by React, while the RSCs are just "rendered"

it's difficult to explain because there are not really enough resources yet to answer all that

you kinda have to dig into the network tab or literally React codebase at this point

but basically client-side React can interpret the RSC payloads

which let's it have an SPA-like behaviour

there is a deep integration between RSC and the client, that's also why RSCs are not "just like PHP" at all

you'd want to observe navigation I think

that's the more interesting part, where the hybrid behaviour of Next kicks in between multi-page and single-page

that's why its the "App Router" more than the app dir

it's all about routing

Yeah. Thanks for the response. For me, when I learn a new tech I'm really interested what is happening under hood. Perhaps Dan at some point hopefully will create a detailed blog post on this 🙂

Don’t know what y’all are talking about here, but if you want to know the advanced stuff behind the scenes, https://youtu.be/36uY-c0E_EQ is a good talk on that

But past one point, knowing deeper won’t help you with making your apps. Knowing the details will certainly help in contributing to react, but not so much in developing web applications

Well. If you know what is happening under the hood. You can be aware on how everything works together and when something doesn't go as you expected it will be easier for you to debug it.

And thanks for the link!