Checking Network Requests for Server Components Solutions

here’s a good rule of thumb. for any “server components” solution, check how many network requests a client makes when *refetching* this tree:

<Server>
<Client>
<MoreServer>

where Server and MoreServer read some async data.

to meet the RSC bar, it must be one request. https://t.co/oggTy71Kym

— дэн (@dan_abramov) April 15, 2023

- if it doesn’t let you refetch the server content, it doesn’t meet the RSC bar

- if refetching this tree triggers multiple client requests, it doesn’t meet the RSC bar

- if Server and Client components are written with different technologies, it doesn’t meet the RSC bar

— дэн (@dan_abramov) April 15, 2023

why it matters:

- without refetching, it’s like 90s where every link click loses page state

- if refetching has client/server waterfalls, every nested Server component adds a roundtrip (slow)

- if they’re different technologies, you have to convert back and forth all the time

— дэн (@dan_abramov) April 15, 2023

as a concrete example, Qwik does not meet the RSC bar because it does not offer a way to avoid client/server waterfalls while keeping components independent and unaware of each other’s logic. that’s okay (Qwik does other cool things!) but this is why it’s not Server Components. https://t.co/JGYEk9U0s0

— дэн (@dan_abramov) April 15, 2023

what about Remix? it avoids client/server waterfalls (one request — that’s great) but your “server” components (aka loaders) can only be routes and don’t interleave all the way down. so you can’t a server-only Markdown component on npm and “just render it”. Remix is close though.

— дэн (@dan_abramov) April 15, 2023

how does RSC compare to Astro? spiritually they are close but Astro doesn’t have refetching (yet) so you’re confined to full-page navigations that reset all state. Astro also doesn’t let you write server and client parts in the same paradigm so you have to convert back and forth.

— дэн (@dan_abramov) April 15, 2023