Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      Franklin Templeton
      Franklin Templeton
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone
      United Parcel Service
      United Parcel Service

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang PHP AI & ML Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Agile & DevOps Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller CCS2 Controller Explore All

      not list

      BMS Manufacturers and Suppliers DC Fast Charger
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire us

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

800+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Agile & DevOps
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • BMS Manufacturers and Suppliers
    • DC Fast Charger
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
Vue and Nuxt.js

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

Mayuri Pansuriya
Mayuri Software developer
Last Updated on October 5, 2021
February 26, 2020 4 min read

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:

npm run dev

Now let me get you through the project structure

Getting Started With Nuxt.js

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

Vue Server Side Rendering

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.


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

Vue Internationalization Example
Archita Nayak
Jay Dadhaniya

June 22, 2022

Vue.JS

Vue Internationalization Example With Vue I18n

By : Archita Nayak & Jay Dadhaniya

Introduction As we know, people around the world speak many languages. So, if we want our application to be accessible to everyone, it is necessary...

8 Minute Read
Read More
Middleware Pipeline in VueJS
Archita Nayak
Santosh Yadav

May 16, 2022

Vue.JS

How to Implement Middleware Pipeline in VueJS?

By : Archita Nayak & Santosh Yadav

Introduction A middleware is one of the most commonly used terms in web development that act as an intermediate between two applications or services. The...

7 Minute Read
Read More
Frontend Quiz App using VueJS
Archita Nayak
Jimit Shah

March 4, 2022

Vue.JS

How to Develop Frontend Quiz App using VueJS?

By : Archita Nayak & Jimit Shah

Tutorial Goal: How to Develop Frontend Quiz App using VueJS In this tutorial, we will learn and explore the fundamental concepts of how can we...

7 Minute Read
Read More

How Can We Help You?

india India (HQ)

1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

USA USA

4995 NW 72nd Ave, Suite 307 Miami, FL 33166

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work

Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Brochure
  • Quality Assurance
  • Resources
  • FAQs
  • Customer Reviews
  • Tutorials
  • Privacy Policy
  • Sitemap
  • Contact Us
  • Employee
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.5
    bacancy goodfirms review
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation