search

vercel / next-react-server-components

Demo repository for Next.js + React Server Components
https://next-rsc-hn.vercel.app
MIT License
979 stars 158 forks source link

Why is a bunch of js files loaded? #11

Closed Epskampie closed 2 years ago

Epskampie commented 2 years ago

Hi, sorry if I'm misunderstanding, or maybe it's because Server Components are still alpha, but I was under the impression that this demo would load zero javascript.

If I look in the browser devtools network tab on https://next-news-rsc.vercel.sh/csr for example I'm seeing it loads a bunch of js files like https://next-news-rsc.vercel.sh/_next/static/chunks/313-ac2dffa02b6a4c2a.js.

Is this because the functionality is not out of alpha, or am I understanding wrong? Would love to use this.

shuding commented 2 years ago

Sorry for the confusion, that page /csr doesn't use Server Components (as you can see here: https://github.com/vercel/next-rsc-demo/tree/main/pages). We will improve the wording there to "Without React Server Components and Streaming", thanks for the feedback!

To answer your question, when using Server Components all server module imports will not be bundled and shipped to the client. Here is a detailed example and explanation: https://twitter.com/benschwarz/status/1466213985334693889.

But there will still be JavaScript shipped to the client just to make sure client transition and React hydration are working, as Dan Abramov explained in the same thread:

ReactDOM is literally “React” so yes, it is expected to be included on all pages. Server Components don’t remove the need for React itself — otherwise you wouldn’t be able to add interactive bits on the client. (However, SSR lets you show content as HTML before JS loads.)

From https://twitter.com/dan_abramov/status/1466554954944958466

Epskampie commented 2 years ago

Thanks a lot for the explanation! I'm actually quite surprised to learn that server-side libs were sent to the client until now. Seems like good steps are being taken to make Next/React the best of both worlds between SSR and interactive on the client, but it's not there yet.

dawidk92 commented 2 years ago

@shuding does it mean that if I will have a single page as a server component (index.server.tsx) no JS would be bundled into that page's js bundle (static/chunks/pages/index-[fingerprint].js)?

My understanding is that in the final bundles I will have no code which was imported by ES Modules in .server.tsx files, right?

So in final bundles, I wouldn't have JS for example of my UI components and styled-components?