vite-node: How do I use it for SSR? I can't find a minimal example anywhere.

[AaronBeaudoin]

I just read the discussion yesterday for Vite 5, and one thing that stood out to me was that the team is considering moving vite-node to Vite core "as an alternative to Vite's current SSR primitives to add support for source maps and HMR during SSR".

Currently, Vite's SSR guide does a good job of breaking down how to set up Vite to develop and build an SSR project. Furthermore, there's a great example project which can be used as a great starting point and as a reference.

For vite-node I can't find any such resources. Anywhere. How do I use it? What exactly is the "server" versus the "runner"? How is it different from vavite?

Would someone who is familiar with vite-node be willing to put together a minimal example of it like Vite's existing playground/ssr-vue one? For me, that would be enough to get a solid grasp on how to use it and what role it plays. It also seems easier than writing a guide, but that's just my opinion.

[sheremet-va]

Isn't readme not enough to understand the concept? Instead of vite.ssrLoadModule it will be client.executeId. From the linked example, I can see that Vite is not used in production so the bundled result will not change at all 🤔

I don't know how vavite works, so I cannot tell the difference between them.

However the main difference between the previous approach is that the server is split in two - the part that transforms modules and keeps track of moduleCache, and the part that actually runs the code. The main reason to do so is to allow Vitest (and other tools) to run code in a separate process. There will probably be shorthand in Vite, and users won't see this split (the server part is already integrated into the usual dev server). There was also an idea to provide different clients for different runtimes (node/deno/bun).

[sheremet-va]

The other noticeable difference is that ViteNode supports HMR, but Vite SSR - doesn't. ViteNode also has better support for source maps (it prints the correct stack when using console.trace for example - Vite SSR will print runtime stack without looking at source maps)

[AaronBeaudoin]

I really appreciate you taking the time to explain this.

• Is vite-node only relevant during development, then? Do the build commands remain the same as in the linked example?
• In the official Vite SSR guide, Vite is used as a server middleware in a connect server. Is it the same with vite-node?
• Does using vite-node involve running two Vite processes—one for SSR and one for the regular Vite browser code?

An example would probably still be the single most helpful thing. It'd be super nice to be able to compare the Vite guide's approach and the vite-node approach side-by-side with the same app. An apples-to-apples comparison.

Thanks again for the help!

[sheremet-va]

• I don't know if it's only relevant for development. From my point of view it's more performant to bundle the server entry point (like in your example), but I don't know how other frameworks do it. I assume Svelte uses it for production SSR. If they do, vite-node can replace old Vite SSR approach as they are interchangeable.
• ViteNode uses Vite server under the hood.
• No, you don't need two separate servers, moduleCache is separate between browser and ssr.

I don't think I can provide example as there are no SSR applications with this approach. As I said before, I assume it is a simple replace one method with the other.