Server Side Rendering with Nuxt.js
We have been using Vue.js as a main technology on the client side for most of our previous projects. Vue.js is a front-end JavaScript framework, which is light weight, great for building UI widgets or complete “Single-Page-Application” (SPA), includes Router + State management (Vuex) and It is very popular as well. However, for one of our previous project, we received a unique request for very specific features that made us learn Nuxt.js. In this article I will explain what Nuxt.js is and how it helps with the “Server-Side-Rendering”.
What is Nuxt.js?
Nuxt.js is a library built on top of the Vue.js.
Why do I need framework for a framework?
Just like Vue.js makes development of JavaScript apps easier, Nuxt.js simplifies the development of Vue.js applications.
Do we need Nuxt.js because development of Vue.js is difficult?
No, Vue.js is not difficult, but there are few things that can be made easier.
For e.g. Server-side-rendering, Routing, Folder structure etc.
What is “Server-side-rendering” and how Nuxt.js makes it easier?
To understand what is “server-side-rendering”, first we have to understand how a typical “Single-Page-Application” (SPA) works.
In a typical Vue.js SPA (or any other SPA), when user enters URL in the browser, request goes to server and it returns Index.html page which contains bunch of scripts importing Vue app. From this point on-words everything happens on the browser, user always stays on the Index page, and Vue app simply re-renders the part of the page to reflect the new URL. If your application needs to fetch data from the server, it happens in the background using Ajax calls.
For e.g. URL of our Vue.js application is “www.globantblogs.com”, when user enters this address in the browser, server returns “Index.html” page with the bunch of scripts for Vue App.
Remember, at this point of time our Index.html is still an empty page. From this point on-words our Vue App runs in browser and calls the server to fetch list of blogs and render that data on the screen once it is received from the server. This call happens behind the scene using Ajax.
This looks great from the user’s experience perspective, however, from the search engine perspective this is a problem, because search engine crawler wont wait for list of blogs to return. So, all that crawler will see an empty “Index.html” page. This is a big problem for SEO.
This is where “Server-Side-Rendering” comes in to the picture. We will pre-render our Index.html file on the server with all the data for each new request.
Remember, here we are pre-rendering Index.html page for the first load only, there after we again have an SPA running on the browser. For e.g. after “www.globantblogs.com”, if user requests “www.globantblogs.com/nuxt-blog”, application will send an Ajax call to the server to get the “nuxt-blog” just like any other Vue App.
Pre-rendering of Index.html page will allow us to add meta tags and titles for SEO.
Can’t we do it without Nuxt.js?
Obviously, we can do this without Nuxt.js, however, setting it up manually with Vue.js is a lot of work, where as with Nuxt.js we can simply select an option of “Universal app” and Nuxt.js will take care of all configuration.
Creating your first Nuxt.js app
To start with, we need Node.js installed on our machine. (You can download it from here. It will also install npm on your machine.)
Once Node.js is installed, we have to install “create-nuxt-app” package. Which is a scaffolding tool created by Nuxt.js team to get started quickly.
npm install -g create-nuxt-app
For Mac or Linux you can use
sudo npm install -g create-nuxt-app
Now you can navigate in the terminal to to the folder where you want to create your project and execute below command
create-nuxt-app <name of your application>
Once you execute above command, it will ask you couple of questions. For e.g. name of your project, author, UI framwork you want to use etc.
If we want “Server-Side-Rendering”, we can select “Universal” as default Rendering mode. Once we answered all questions, it will create a new Nuxt project with bare minimum settings.
Navigate to your project folder and run below command to start your development server.
npm run dev
As we can see, our Nuxt application is now up and running on http://localhost:3000/
If we open our project folder in Visual Code, we see folder structure like this -
Now, lets add SEO stuffs in our Index.vue page.
To do that, we can add a head() method under <script>, which will return an object that contains titles and meta tags.
Now, if we save these changes, go to our application and check the source code, we can see our meta tags as well as title of our page.
This is how easy “Server-Side-Rendering” is with Nuxt.js.
Conclusion
Nuxt.js is great for “Server-Side-Rendering”. However, it is not limited to that. There are several other great features of Nuxt.js, which are very useful even if you want to create SPA.
If you want more details of Nuxt, please visit - https://nuxtjs.org/guide
