Server-Side Rendering or SSR is one of the hottest things in the eco-space of front end development. It solves a lot of the previous problems of SPA such as load times and SEO. The initial markup is rendered by the server and subsequent loads are handled by the javascript. In this tutorial, we’ll introduce how to use Vue.js with SSR but using a framework called Nuxt.js. We’ll also include Typescript and Class-based components. If you’re interested in learning more, check out our codebrains.io video tutorials.

Nuxt.js Setup

First, we’ll start off by creating a Nuxt.js project using the create-nuxt-app. This will give us different options for configuring our app. Run the following command in your terminal.

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

You’ll be asked which server to use, which front end framework and which testing framework. We’ll avoid using ESlint and Prettier because they can introduce problems into the application based on your Typescript config later on.

  • Server: None
  • UI Framework: Element
  • Testing Framework: Jest
  • Rendering Mode: SSR

Vue Nuxt Config

Adding Typescript Support to Nuxt.js

The next step is for us to add Typescript to Nuxt.js. We’ll do this by installing all of the necessary packages including @nuxt/typescript and ts-node. You’ll also have to create a tsconfig.json file. This file will be updated on the next run of the nuxt command.

npm i -D @nuxt/typescript
npm i ts-node
touch tsconfig.json
# OR
yarn add -D @nuxt/typescript
yarn add ts-node
touch tsconfig.json

Also, make sure to change your nuxt.config.js file to nuxt.config.ts.

The next step is to add support for class-based components.

yarn add vue-property-decorator

Inside of your tsconfig, add “skipLibCheck”: true, as a config. There is an issue with some UI libraries and the ‘NuxtApp’ Interface. This will handle that.

Server-Side Rendering Nuxt

Now that we have our application setup, we can create a page that displays user information. This info will be retrieved using Axios but will be rendered by the server.

Create a User Interface in the models folder. This is not a folder that is created by Nuxt so you’ll have to do it manually.

interface User {
    id: number;
    name: string;
    username: string;
}

export default User;

Then, in the index.vue file, we will import the interface as well as the classes necessary for Vue.js to use class-based components.

<script lang="ts">
import axios from 'axios'
import { Component, Vue, Prop } from 'vue-property-decorator'
import User from '~/models/User'
</script>

Next, we will create our component. The call asyncData gets data to be displayed for server-side rendering. This is what is usually read by search engines for SEO.

<script lang="ts">
import axios from 'axios'
import { Component, Vue, Prop } from 'vue-property-decorator'
import User from '~/models/User'

@Component({
  components: {

  },
  async asyncData({ params , app }) {
    console.log(params)
    const data = await app.$axios.$get(`https://jsonplaceholder.typicode.com/users/1`)
    console.log(data)
    return {
      user: data
    }
  },
})
export default class Index extends Vue {
  user = null;
}
</script>

Finally, we’ll add our template to display our output to the browser.

<template>
  <div class="container">
    <h2>Name: {{user.name}}</h2>
    <p>Username: {{user.username}}</p>
  </div>
</template>

Now when you run the application and check in the inspector, your Vue app sends the server-generated HTML.

SSR Inspector

SSR Inspector Nuxt Vue

Conclusion

Sever Side Rending is a powerful tool when building a SPA. Not only does it improve SEO, it allows for you to use many of the same front-end frameworks and still keep the performance of server-generated code. If you’re interested in learning more, please check out some of our videos here.

Codebrains Newsletter

Get weekly dev news and tutorials.

Powered by ConvertKit