A must read if you want to know about process of server-side rendering with the help of Vue.JS and Nuxt.js

Long gone are the days when you just need to take care of things happening on the browser. With dynamic elements in context, you have to work with the server-side to provide a user-interactive interface.

Server-Side Rendering (SSR), sometimes known as Universal rendering, is the feature of the application to display the webpage on the server instead of rendering it over the browser. It allows users with slow internet speed to load the content in less time. Moreover, the search engine crawlers get a fully-rendered page for better SEO.

So before diving into the code for completing the process, let us first see the advantages of Nuxt.js.

Why opt for Nuxt.js?

Here are some of the major advantages of the platform.

  1. Static file serving
  2. SEO-friendly SSR
  3. Automatic code splitting
  4. Pre-configuration for Vue Router, Vuex, and vue-meta
  5. Automatic routing configuration
  6. Easy customizations of the framework

Let us now dive into the whole process

Getting started with Nuxt.js

Let us develop a new project named example-ssr. However, before this, make sure that you have a package manager installed on your device. You can use Yarn or npm. We are going to use npm, so write the following command to create the project

npm/yarn create nuxt-app example-ssr

After this, go to the project directory and run npm run dev. Visit http:\\localhost:3000 on your preferred browser to view the page

Familiarizations with the directories

When you open the example-ssr directory, you will see several directories. The component directory contains all the reusable components, and layouts contain the layout components. It also contains default.vue file. All the pages share the component’s in this file.

The pages directory contains all the views, and the framework generates routes for all the .vue files in this directory.

Implementing SSR by test example

Let us create a navigation menu. In layout folder create a folder named test and make a file nav.vue and use the following code.

<template>

<header>

<nuxt-link to=”/” class=”logo”>Example-SSR</nuxt-link>

<nav>

<ul>

<li><nuxt-link to=”/”>Home</nuxt-link></li>

<li><nuxt-link to=”about”>About</nuxt-link></li>

<li><nuxt-link to=”services”>Services</nuxt-link></li>

<li><nuxt-link to=”contact”>Contact</nuxt-link></li>

</ul>

</nav>

</header>

</template>

<script>

export default {

}

</script>

Now go to default.vue and use the following code.

<template>

<div>

<Nav />

<nuxt />

</div>

</template>

<script>

import Nav from ‘./test/nav’;

export default {

components: {

Nav

}

}

</script>

Now go to the pages folder and under the index.vue file use the following code.

<template>

<section class=”container”>

<h1>Testing</h1>

<p class=”subheading”>Hello world. Test Run</p>

</section>

</template>

<script>

export default {

}

</script>

<style>

</style>

 

After this, restart the application to view the changes successfully.

Final Verdict

You can make different changes in the code by customizing the elements and style by using your unique CSS. This was a test application to implement SSR with Vue and Nuxt.js. If you are looking to create projects in any of the above-mentioned platforms, then visit the official website for PSDtoANY.