How to Transform a Vue Multi‑Page Project into a Node.js SSR Application

1 Understanding the Principles

Vue SSR works by running Vue components on Node.js to generate HTML strings, then injecting those strings into a template and providing data so the client can rebuild the virtual DOM.

The main steps are:

Node.js renders Vue components to HTML fragments.

Node.js concatenates the fragments into a full HTML page.

Data is injected into the HTML so the client can reconstruct the virtual DOM.

The browser runs Vue to rebuild the virtual DOM and bind events.

Key questions include how to bundle code for Node.js, whether the client bundle needs special handling, how to run the two bundles and generate the final HTML, how to inject data, and whether hot‑reloading remains functional.

2 Node.js and Browser Separate Bundles

The existing webpack configuration is split into a server‑side and a client‑side bundle using

vue-server-renderer

's

server-plugin

and

client-plugin

. The base configuration is extracted, and HTML‑related plugins are removed.

Key webpack settings:

target: 'node' – tells webpack to treat modules as Node.js code.

output.libraryTarget – defines how the bundle is exported.

VueSSRServerPlugin – outputs a JSON file for the server renderer.

VueSSRClientPlugin – generates

vue-ssr-client-manifest.json

for injecting client assets.

Separate entry files are created:

app.js

(server entry) and

client-entry.js

(client entry). The server entry exports a factory function that receives a

context

object for data injection.

3 Server Execution

On the Node.js side,

vue-server-renderer

is required. The server reads the HTML template and the two JSON bundles, creates a

bundleRenderer

, and defines a render function that calls

renderToString

to produce the final HTML.

The template must contain the marker

<!--vue-ssr-outlet-->

where the rendered Vue HTML will be inserted. The renderer automatically injects JS and CSS links.

4 Adding Hot‑Reload Support

Hot‑reloading is implemented by copying the official

setup-dev-server.js

script, which uses

webpack-hot-middleware

and

webpack-dev-middleware

to establish a WebSocket between client and server, watches source files, and recompiles on changes.

The server detects a development environment and switches to a dev‑renderer that receives the latest bundle and client manifest on each compilation callback.

5 Data Injection

Two approaches are shown for providing dynamic data:

Without Vuex – data is passed as props from the server to the root component, and the server places the data into

context.state

, which becomes the global

__INITIAL_STATE__

on the client.

With Vuex – a store is created, the server populates the store before rendering, and the state is serialized into

__INITIAL_STATE__

for the client to hydrate.

Both methods result in a fully rendered page with the correct data.

6 Supporting Multiple Pages

For multi‑page SSR, a routing table maps URLs to page directories. Each page gets its own webpack configuration, generating separate server and client manifests. The server creates a closure per route to keep the correct renderer instance.

After building, the

dist

folder contains per‑page bundles, and the server uses Express to serve the appropriate renderer based on the request.

Key Images