How to Do Server-side Rendering (SSR) With the Help of Vue and Nuxt.js?
(Vue Server Side Rendering)

What is Server-Side Rendering (SSR)?

Server-Side Rendering, also called SSR, is one of the most popular techniques to render SPAs on the server instead of the browser. It allows the website to have a significantly faster page load time, and that is the key to a good user experience.

• Why we need SSR
• For Better SEO, as the search engine crawlers will directly see the fully rendered page
• Faster time-to-content, especially on slow internet or slow devices.

For Vue.js, I find that Nuxt js is the best solution to implement SSR, but here one condition is applied. Please make sure you are aware of doing SSR from the beginning of the project, or you will get stuck as I already have faced the same situation.

Why Nuxt.js?

The purpose is to bring in the advantages of SSR in a SPA. Nuxt.js is built on SSR features, whereas Vue.js already lets you build an application with the help of SSR.

Here’s what Nuxt. Js has to offer:

• Automatic code splitting
• SSR is favourable with the perspective of SEO
• Static file serving
• Pre-configuration for Vue Router, Vuex, and vue-meta
• Standard folder structure for your application
• Automatic routing configuration
• The modular system is so convenient to customize the framework

Getting Started With Nuxt.js

Let’s scaffold a new project called nuxt-ssr by running the following command: npm create nuxt-app nuxt-ssr

You can install some basic required packages while the installation is done, like Axios

After you have created the project go to the project directory and run npm run dev

Visit http:\\localhost:3000 on your browser, you should see something like this:

Now let me get you through the project structure

Your entry point for the project will be the default.vue file.

Nuxt doesn’t have any inbuilt routing mechanism. It creates automatically based on the folder structure inside the pages folder.

Let’s look at the pages folder and how it works for routing

Here there will be 4 routes that Nuxt will auto-generate

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'about',
      path: '/about',
      component: 'pages/about/index.vue'
    },
    {
      name: 'list',
      path: '/list',
      component: 'pages/list/index.vue'
    },
    {
      name: 'detail',
      path: '/list/id',
      component: 'pages/list/_id.vue'
    },
  ]}

While you use simple Vue.js, you have to mention all the routes manually. Nuxt generates it for you.

So here for any file with the index, Vue will be the root path for that particular folder, and any other file will be the child route.

For routed with params you need to created _PARAM_NAME like we have done for id as _id.vue

Let’s have a look at the config file nuxt.xonfig.js

 export default {
  mode: "universal",
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || "",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: process.env.npm_package_description || ""
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: "#fff" },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    { src: "~/plugins/vue-datepicker", ssr: false },
    { src: '~/plugins/axios' }
  ],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [],
  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'http://your_base_url'
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "file-loader"
      });
    }
  },
  router: {
    middleware: 'permission'
  }
};

So here, the plugins will have all the 3rd party packages that are needed in your application, such as Datepicker, google map, etc.

You need to create a file with the name you have registered in the plugin like vue-datepicker.js

And define the global config to use that package like

import Vue from "vue";
import Datepicker from "vuejs-datepicker";
Vue.component("date-picker", Datepicker);

We don’t have a route file even though we can have a middleware to handle routing by defining route middleware in our config file.

Production builds
I am pretty sure this what you are here for.

Let’s make a production build by running npm run build

This will help you create a compressed build of your application, and now you can check your production build by running npm start

Check the browser and see http:\\locahost:3000

Now check for the page source, and you will see all your data in the body tag.

Wrapping

This was just a small brief about Vue and Nuxt.js with server-side rendering. In case if you are looking for the expertise of Vue.js developers to access a huge range of different environments, then hire Vue.js developer from us to build high-octane performance-obsessed real-time applications. I hope you enjoyed reading the blog post. In case if you have any questions or suggestions, don’t hesitate to post them below.