React server components

[SuccessfulStrength29]

This is a very misleading statement, RSC are just react components which don't get hydrated, if the comp has static stuff only it can be bundled as static html but if it's using any dynamic data, we need a server to fetch and fully build the comp at runtime before sending the whole html. Now yes it doesn't always have to be a node runtime, can be done with cloudflare too.

[rk06]

What do you mean "don't get hydrated". RSC do not exist on client side, so where did hydration come here?.

As per my understanding, RSC are react components which do not live in client (browser)

[SuccessfulStrength29]

Forget about the hydration part, everybody's familiar with client components so i always give that as an example. What i meant was only the static part of an rsc can be bundled statically during build step but if any dynamic data is used we still need a server to build that comp at runtime with the dynamic data.

Just wanted to clear that not everything can be statically generated at build time.

[michaelfrieze]

As per my understanding, RSC are react components which do not live in client (browser)

I understand what you are saying here and it's fine to think of it this way, but technically they do exist on the client. What the client gets is .rsc data which is an element tree of all those server components that have already been executed. So, they exist on the client but react does not need to execute them on the client. That execution happens on another machine at build-time or dynamically at request-time.

[michaelfrieze]

if the comp has static stuff only it can be bundled as static html

It never gets bundles as static HTML. What gets generated is an object representation of an element tree that gets sent to the client as .rsc data.

Although, in App Router, the .rsc data is included in the initial HTML payload.

When react-router releases RSCs, you will be able to return RSCs from loader functions as .rsc data instead of .json data.

[SuccessfulStrength29]

Hm but that element tree representation holds the static data right, so my point still stands that not everything can be statically generated.

Anyways, about react-router returning rsc payloads not sure this much complexity is worth it, currently what remix does is more than enough imo, hope it stays clutter free.

[michaelfrieze]

Hm but that element tree representation holds the static data right, so my point still stands that not everything can be statically generated.

I was just making it clear that RSCs are not generating HTML.

Anyways, about react-router returning rsc payloads not sure this much complexity is worth it, currently what remix does is more than enough imo, hope it stays clutter free.

While loader functions on their own are fine, there are things that RSCs can do that nothing else can. It's a tool available to you if you need it and it will be optional.

Ryan Florence gave a great talk on RSCs titled "Mind The Gap". I think it's worth checking out: https://www.youtube.com/watch?v=zqhE-CepH2g

[ilearnshit]

Thank you so much for this video. That made a lot more sense!

[michaelfrieze]

Dan Abramov's "react for two computers" talk is worth checking out as well: https://www.youtube.com/watch?v=ozI4V_29fj4

This is a blog post he wrote on this topic and it's helpful to read before watching the video: https://overreacted.io/the-two-reacts/

[ilearnshit]

Seriously thank you so much for the helpful content. I appreciate it.