Incremental adoption of SSR Vue w/ hydration

[jameswragg]

I have a large, existing (server rendered) web app and I’d like to sprinkle it with the odd Vue component & have them hydrate on the client. It feels to me that this is one of the main “incrementally-adoptable” use-cases & yet I’m struggling to find tutorial/example material to help with my setup.

I don’t want to replace my existing app or run a full-page Vue app server-side.

Everything I've read on Vue SSR is that I have to create a server bundle of my Vue app's code, and use that for SSR & deliver the whole app bundle for CSR. Which leaves me wondering if what I want to do is even possible with Vue?

Any help/pointers to examples would be very gratefully received.

[yyx990803]

The main question is whether your Vue-controlled parts need to render route-specific data. If your sprinkled Vue parts are using pure client-side data, then you can actually pre-render them at build time. You will then need:

• For each rendered page, you should have a list of "slots" where you want to inject Vue parts. Each of these slots should have a container element with a unique id.
• You then need a map that maps ids to Vue components.
• During build, pre-render each component and store them in a id -> markup map
• Use that map in your server template to inject the pre-rendered markup
• You then need to build a client-side bundle that mounts each of the Vue components on their corresponding containers

So this whole setup is still non-trivial mostly because there's no ready made library/setup to do this, but technically this is possible.

However, if your Vue-controlled parts need server-side data, then it would become significantly more complex as you would need dynamic Node.js SSR embedded as part of your server logic. And in that case the complexity would probably outweigh the gains.

[jameswragg]

Only now realising I didn't reply to your comment, rather tagging you in.

Thanks for your considered reply. I think (unfortunately) my needs fall into your second category:
Individual components, server-rendered using server-side data & mounted (with state) on the client.

Use case: Custom Elements done right, i.e. a SSR custom element that (using props) can receive data server-side, render to HTML but then mount on the client carrying over the context/state.

I'd love to build a Design System of Vue components, knowing I could use them on any existing Hapi/Fastify or Koa web server without having to give up the node frameworks routing+handlers over to vue-router or Nuxt.js.

Thanks for reading.

[jameswragg]

Thanks for the reply @yyx990803.

My requirements look to lie in the second, 'progressively enhanced' camp - Vue components are not route-specific & need server-side data to initially render, e.g. a table of data only getting pagination & filtering controls on hydration.

I'm fairly Svelte-ignorant but was intrigued to read from their docs that I could load a .svelte component in Node.js without the need of a bundler & the render function returns { html, css, head } for the component.

I guess the setup I'm imagining might look something like:

• Vue runtime loaded on the page
• In Node.js I load a Vue SFC and pass to vue-server-renderer with data, which returned { html, css, js }
• I could inject that HTML content in my server-side templating and use <style> & <script> blocks respectively to support the client-side render.

Theres the issue of component dependencies in the CSR bundles and probably a ton more that I'm not aware of but would be interested to get thoughts/insight into the issues here.

I guess I really like the 'incrementally-adoptable' ethos of Vue & being able to write a contained .vue component which could be available to an existing server-rendered app would tick all my SEO/performance/UI boxes.

[jameswragg]

Noticing @chriscalo's thumbsup & stalking his repos I noticed he'd looked at similar thing which gave me some direction to have a punt:
https://github.com/jameswragg/incremental-vue-ssr

It's a little awkward but feel a defined approach could forge a direction for that incremental adoption of Vue, rather than a big bang rewrite of an existing app. Would appreciate thoughts.