Server-only react code

[markomitranic]

Dear community

you might be able to help me better understand the React code-splitting with Vike. This is actually probably a React question, not a Vike question.

• so, I scaffolded a new app using https://vike.dev/new
• and in it added a single word on the page itself
• I ran pnpm build and pnpm preview and opened the page in the browser
• Inspecting the initial HTML, I can see the word, which tells me this was rendered on the server. Yay.
• However - inspecting the JS chunks also contains the same word, meaning for no reason at all, React decided to also rerender my component in the browser - I suppose in order to hydrate the DOM.

Does this mean that, while we have clientOnly mode, as described in the docs - we do not have a server-only mode or a smart way to tell react "ok bro these parts are static UI, they have nothing to do with you"?

I know that Next.js attempted to create this feature by doing PPR, where they consider everything until the first client boundary a static part of the page, but I don't know if they also have to fully hydrate it. I suppose Astro is the only one that truly does islands

[brillout]

Indeed that's how it works today. AFAICT, in theory, it could be possible with Server Components but I believe no one has achieved that in practice yet.

[markomitranic]

Thanks for the answer :) It makes sense, and doesn’t take away anything from Vike, I just wanted to confirm my thoughts. I’ve been quite deep into this stuff, but not nearly as deep as someone like you.

I’m quite interested in the islands approach as I’ve used it many times in the past, both through Astro, as well as other SSR backends such as Phoenix, Symfony, Django, Liquid etc.

The main issue with the full page hydration we have right now is that - when used for normal MPA websites such as CMS powered or ecommerce websites, forums or even apps, the JS payload grows ever-larger for no real reason. Take an e-commerce PDP for example - there are only 2-3 small interactive islands that require react, everything else is pure SSR (or even SSG if the site is small) HTML. A lot of HTML, a 2000-node DOM for example. Yet, Next will build a huge bundle to hydrate all of it for no reason further increasing other metrics. Additionally there is a constant DX concern/confusion in the community, surrounding usage of server-only things such as cookies or headers but thats educational and situational, so besides the point. Astro deals with this in a great way - but doesn’t use tsx on the server which is a huge PITA. I suppose it still suffers from its heritage as a website generator.

In any case, thanks for endulging my curiosity :)

[brillout]

Feel free to play around with your own island architecture using https://vike.dev/new/core :)

[markomitranic]

I definitely will experiment - thanks for pointing me into the correct direction. I can't be sure that the approach will be worthwhile, or have sane DX - but there is only one way to find out :D

[brillout]

Yes :)

Keep me updated how it goes! If we're happy with the result we could even publish a new extension vike-react-islands.