Vue.js server-side rendering with Nuxt.js

What is SSR and how can it help your website?

Server-side rendering (SSR) is a term that refers to HTML document rendering on the server as a result of request/response cycle. Normally, when we use Vue.js base empty HTML document is sent to the user and then content is inserted to the document with Javascript.

You can check how it looks like by simply viewing source code of an HTML document by right-clicking and selecting “View page source”.

While it doesn’t make any difference for the user, this becomes very important when we start talking about search engines and crawlers. Most of the sites start suffering heavily in regards to SEO when they don’t have SSR enabled.

If we switch out focus to GoogleBot, according to Martin Slitt, it crawls the website in 3 steps:

  1. Crawling – Google crawler simply visits the page like any other browser and passes the content to the indexing stage.
  2. Indexing – here the content gets parsed and stored in the index. When any links are detected they get sent back to the crawling stage.
  3. Rendering – if there is any content rendered by Javascript, it requires an additional stage – rendering. Here Javascript gets downloaded, parsed and executed by the GoogleBot.

Running Javascript on every website GoogleBot visits can be quite an expensive and time-consuming task so Google doesn’t do that immediately. Instead it is queued for a later time depending on how heavy the javascript is, meaning it can take much longer for your content to appear on Google. It is very hard to say how long this process can take.

Challenges implementing server-side rendering with Vue.js

Despite the fact that Vue team provide server renderer, properly implementing it can be a quite hard task and this topic will covered in another article. If you’re interested, you can find documentation here.

What is Nuxt.js?

Nuxt.js is a framework that is built on top of Vue.js and comes with a few very nice features like server-side rendering, automatic routing and store generation.

Now I will walk you through on how to create a basic Nuxt.js app.

First we have to create a Nuxt app using create-nuxt-app via npx :

$ npx create-nuxt-app <project-name>

Or yarn

$ yarn create-nuxt-app <project-name>

Now you will by prompted to choose:

  1. Server framework – for me default Nuxt server works the best, but you might want to choose something depending on what you need.
  2. UI framework – again, whatever fits your project the best.
  3. Test framework – at the moment you can choose between JEST and AVA but I recommend looking at Mocha.js
  4. Nuxt mode. Universal will give you server side rendering but in case you would like to only use the features that Nuxt offers but don’t do any server-side rendering and basically build a regular Vue.js app, you can choose SPA (Single Page Application).
  5. Axios module – I strongly suggest adding this module. You can read more about it here.
  6. Eslint, Prettier – I find that Eslint and Prettier are great tools especially if you have many people contributing to the project.

To run our Nuxt app simply run :

$ npm run dev

Now if you right-click and View page source you can see that we receive a populated HTML document from the server, this is great news!

Other awesome Nuxt.js features that will make your development easier

Routing

Normally in a Vue.js app you would have to define all the routes yourself but with Nuxt.js it gets taken care for you under the hood. You can find all the routes in ~/pages folder.

For example this file structure:

	pages/
	--|index.vue
	--|user/
	-----| _id.vue
	-----| index.vue

Will generate these router configurations:

router: {
    routes: [
        {
            name: "index",
            path: "/",
            component: "pages/index.vue"
        },
        {
            name: "user",
            path: "/user/",
            component: "pages/user/index.vue"
        },
        {
            name: "user-id",
            path: "/user/:id?",
            component: "pages/user/_id.vue"
        }  
    ];
}

Store

I very strongly suggest using modules mode. That means that every .js file in ~/store directory will be transformed into namespaced module with index.js being the root module.

This means if we have index.js and users.js , Nuxt.js will automatically generate this template:

new Vuex.Store({
    //index code goes here
    modules: {
        users: {
            //users code goes here
        }
    }
});

This is everything you need to know to start a basic Nuxt.js project. If you have any questions please feel free to fill out the contact form that you can find in the site navigation menu and I hope that you learned something new today!