next.js13 render process
Unanswered
Alaskan Klee Kai posted this in #help-forum
Alaskan Klee KaiOP
The client component is pre-rendered HTML and JSON and cached on the server. The cached results are sent to the client for the hydrating process. Is this how the client component works?
Server Components are rendered on the server by React, and their payload is used to generate HTML. The same rendered payload is also used to hydrate the components on the client, resulting in no JavaScript needed on the client.
Is this how server components work?
Server Components are rendered on the server by React, and their payload is used to generate HTML. The same rendered payload is also used to hydrate the components on the client, resulting in no JavaScript needed on the client.
Is this how server components work?
22 Replies
Alaskan Klee KaiOP
Am I correct in assuming that the tree is created in RSC, the html is delivered using SSR's html streaming feature, and the selective hydration is well reflected in dom?
Is the server component delivered in a json-like format instead of using SSR's html delivery function?
Is the server component delivered in a json-like format instead of using SSR's html delivery function?
you can see the payload from Chrome dev tool. it is not json but generated and compacted html codes, which is parsed by client side js. it’s so obvious if you use Suspense.
sorry it’s json blob style like this
M1:{"id":"./src/ClientComponent.client.js","chunks":["client1"],"name":""}
J0:["$","@1",null,{"children":["$","span",null,{"children":"Hello from server land"}]}]
J0:["$","@1",null,{"children":["$","span",null,{"children":"Hello from server land"}]}]
RSC Wire Format
that’s why it’s impossible to return http status code from server component. it doesn’t make sense as it’s chunk stream.
Alaskan Klee KaiOP
@tafutada777
Thank you
Is this the flow of images?
Thank you
Is this the flow of images?
sorry im not sure. we might not be on the same page.
all i know is just App Router server component returns Wired Format, which u can see in the payload.
if u use Suspense, it is so obvious a chunk of Wired Format is being streamed using HTTP/2 protocol or HTTP/1.1 chunk.
this mecanism works great when using OpenAI API streaming on Edge Runtime btw.
Alaskan Klee KaiOP
@tafutada777
Does Wired format mean react tree?
Does Wired format mean react tree?
my understanding is, the string parameter in self.__next_f.push(1, "...") in the above screen capture.
Alaskan Klee KaiOP
HTML and react tree returned?
you can see it with Chrome Dev tool or cURL.
Alaskan Klee KaiOP
Both were returned over here as well.
Why do they need to return html and the react tree? Can't they just return one or the other?
actually im not sure your doubt. this might help
https://www.plasmic.app/blog/how-react-server-components-work#the-rsc-wire-format
https://www.plasmic.app/blog/how-react-server-components-work#the-rsc-wire-format
Alaskan Klee KaiOP
RSC is about creating a react tree and streaming it, right? Why is the react tree in the html?
parsing faster ?
Alaskan Klee KaiOP
Is the React tree like a tree under that component and attached to the html?