I really like working with Vue.js on the frontend, altough server side rendering have not been supported until the second version of it. In this sample I would like to show how to use Vue.js 2’s server-side rendering capabilities with ASP.NET Core. On the server side we use the
In this example the application will show a list of messages where the last two messages (ordered by date) will be rendered by the server. Tthe remaining messages can be downloaded from the server by clicking on the “Fetch a message” button.
The structure of the project looks like this:
As you can see the Vue app is located under the
VueApp folder which has two components, a simple Vuex store with one mutation and one action, and also have some other files which we are talking about next: app.js, client.js, renderOnServer.js, server.js.
Implement Vue.js server side rendering
To use server side rendering we have to create two different bundles from the Vue app: one for the server (which will run by Node.js) and one for the client which will run in the browser and hydrate the application on the client side.
Bootstrap the Vue instance in this module. It is used by both bundles.
The entry point for the server bundle which exports a function with a
context attribute which can be used to push any data from the render call.
__INITIAL_STATE__ (this object will be created by the prerendering module) and it mounts the app to the specified element (
In order to create the bundles we have to add two Webpack configuration files (one for the server, one for the client build) without forgetting to install Webpack if you haven’t installed it yet:
npm install -g webpack.
webpack --config webpack.server.config.js. If it is successfully finished the server bundle can be found at
To get the client bundle run
webpack --config webpack.client.config.js. The output can be found at
Implement the Bundle Renderer
This module will be executed by ASP.NET Core and it is responsible for
- rendering the server bundle which we had created before
- set the
window.__INITIAL_STATE__to the object sent from the server side
Implement the ASP.NET Core part
As I had mentioned before, we use the
In order to use SpaServices’ TagHelpers we need to add them to the _ViewImports.
It does fetch the two most recent Messages (order by date desc) from the MessageStore (just some static data for demo purposes) and create a ClientState object which will be used as the initial state of the Vuex store.
The Vuex store default state
The ClientState class
The Index View
Finally we have the initial state (from the server) and the Vue app so there is only one step left: render the Vue app with the initial values in the view by using asp-prerender-module and asp-prerender-data Tag Helpers.
asp-prerender-module attribute is used to specify which module we would like to render (in our case VueApp/renderOnServer). With the
asp-prerender-data attribute we can specify an object which will be serialized and sent to the module’s default function as a parameter.
You can download the source code from http://github.com/mgyongyosi/VuejsSSRSample