Server-Side Rendering in Vue.js
For example, if you take a look at the code below which is served when you load a Vue.js app, you notice that the
<head> … </head>
This means that the user has to wait longer to see anything. It can also impact SEO if crawlers can’t see the content of the page quickly.
To fix these issues, we can do Server-Side Rendering (SSR) which is where the server runs the Vue.js code before serving the request, so that the HTML is filled in on the page as soon as it reaches the client.
In this tutorial, I’ll show you how to get up and running with SSR in your Vue.js app.
Getting Started With Server-Side Rendering
If you don’t have the
vue-cli installed, you can do so by running the following commands:
npm install -g vue-cli
Once we have installed
vue-cli we create a new project by running the following commands:
#Create the project
vue init webpack-simple ssr-vue
# Install dependencies
We’ll also need three other packages required for Server-Side Rendering which are:
Express: For the server
vue-server-renderer: To render the bundle
webpack-merge:We will use it to merge two web-pack bundles together
We can install them by running:
npm i express vue-server-renderer webpack-merge
Now we are set and ready to configure our Vue app for SSR
Next, we need to create a file called
server.js in the
src folder and paste the following contents into it:
In the code block above, we notice that the code is very similar to the code in
src/main.js . The only difference is that here, we add the context, and then return a promise.
This is because this is the script we want webpack to prepare for the server to run and return the pre-render call.
Creating the Webpack Server Config
Next, we need to configure webpack to prepare and compile our Vue application so it can be executed by the server. In the last step, we had created the
server.js file. In this step, we will configure webpack to compile the file and its dependencies, whilst returning an executable bundle.
Let us create a new file in our root folder called
webpack.server.config.js and add:
Here we have defined the entry path to our code and also defined where the output of the file should be stored.
Next, we also asked webpack to compress and uglify the resulting bundle.
Updating Our Npm Scripts
We have created the webpack config that creates the executable server bundle. However, we need to specify a command that enables npm run this webpack config.
To do this, let us replace the scripts section of our
package.json to this:
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build-server": "cross-env NODE_ENV=production webpack --config webpack.server.config.js --progress --hide-modules"
In the code above, we will notice the addition of one extra command called
build-server . This command will build up our executable server bundle by invoking webpack with the
Now let’s build our normal bundle and our server bundle by running:
npm run build
//build executable server bundle
npm run build-server
Creating the Server Entry Point
For the server, we will use
Node js . This explains why we have installed Express earlier on.
Let us create a file called
entry.js in the root folder and copy the following content:
In the code above, we have:
- Required the
Expresslibrary which will be the application framework
- Required the
fslibrary, which we will use to read files synchronously
- Required the
pathlibrary, which will come helpful while dealing with file paths.
- Set the
bundlevariable to the streamed content of our
server.jsfile (the executable server bundle) using the
- Set the
renderedvariable to the parsed and rendered value of our server bundle using.
- Streamed the content of our index.html file, to a variable called
- Instantiated the
Expressinstance to a variable called
- Used the
/distroute as a static file route, and set it to serve form the
- In the wildcard route, we have called the
- We have now replaced the occurrence of
<div id=app></div>with the resulting output.
Now, if we launch our application, and we visit the corresponding URL, it looks like nothing has changed.
However, if we take a look at our page source, we will find out that our generated HTML is:
We notice here that the element
<div id=app> now has all it’s
innerHTML populated with the full elements it needed. This is much better for SEO and web crawlers to parse. Also, it eliminates waiting time after the page has already loaded.
In this post, we have seen how to set up Server Side Rendering in Vue.js apps, and why it is useful. If you’d like to read the full code samples shown above, you can check out this GitHub repo with the whole project.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
It’s tough to keep up-to-date on front-end dev. Join our weekly mailing list to learn about new tools, libraries and best practices that will help you build better apps: