Getting Started with Server-Side Rendering Using Nuxt.js

Nuxt.js is a powerful and simple framework built to create universal, server-side rendered applications using Vue.js. It was inpsired by Next; React’s server-side rendering (SSR) framework. Nuxt was created by Alex & Sébastien Chopin and has gained a lot of attention in 2017. So much so, that the Chopin Brothers have become evangelists for server-side rendering in general in the Vue.js community, speaking at VueConf 2018 and Vue.js Amsterdam about server-side rendering, specifically.

Nuxt and server-side rendering can be considered its own separate technology and a whole book could be dedicated to them. This article is an brief overview of Nuxt.js so you can better understand it and server-side rendering in general.

Why Server-Side Rendering?

That’s all great and all but, what is server-side rendering (SSR) and why should you care? Well, there’s one big problem with single page applications: many search engines cannot crawl your application as intended…yet. This is a big problem if SEO needs to play a huge part for the success of your app. Granted, Google’s algorithm as been updated in recent years to better handle these new experiences but it’s not quite perfect. With that aside, server-side rendering is also faster and improves performance which is also important for your application’s SEO.

[T]here’s one big problem with single page applications: many search engines cannot crawl your application as intended…yet. This is a big problem if SEO is a huge part of the development process for your app.

Installing Nuxt.js

It’s easy to get up and running with Nuxt. All you need to start is the Vue CLI. If you’ve used the Vue CLI before, then the Nuxt commands and architecture will be very familiar to to you. If you don’t have the CLI installed, you can do so easily with $ npm install vue-cli. Once installed, initialize an app with the Nuxt starter template using the following commands:

$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install

# Launch the project
$ npm run dev

You should see Nuxt’s animated logo in your browser along with the app’s title and description that you defined with the CLI setup.

Nuxt’s Architecture

Just like the CLI commands, Nuxt’s architecture is similar to Vue.js 2’s with the exception of a few things like the pages, middleware, plugins, and layouts directories. All of these files work just as you would expect in a traditional Vue application. If at any point during your Nuxt adventure you feel lost, the Nuxt community added great README.md files into each directory with links to the documentation.

Layouts Directory

The layouts directory defines all of the various layouts that your application can use. This is a great place to add common global components that are used across your app like the header and footer for examples. You should include components in this file that you don’t want to redefine for each new page over and over again.

If you’re familiar with WordPress, layouts can be compared to page templates within WordPress. By default, the default template that’s used for .vue files in the pages directory is default.vue. The <nuxt/> element is needed to inject all of a page’s components, text, assets, and data.

Creating a New Layout

To create a new Nuxt layout, it’s as easy as creating a new .vue file. If you want to create a blog layout for example, you can create a new one by adding the file blog.vue into the layouts directory. From there, you can add any blog specific components you may have and even include things like props or data from your Vuex store.

Pages Directory

The pages directory is pretty sophisticated. With Nuxt, there’s no router file. Instead, Nuxt will generate a new route for each new .vue file in the pages directory. You can even have dynamic routes by adding an underscore (_) to a directory or a .vue file.

For example:

|__ pages/
   |__ users/
      |__ _id.vue

Will generate…

router: {
  routes: [
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
  ]
}

By default, every file in this directory utilizes the default.vue layout from the layouts directory. However, you can easily change this to another layout that you may have created by adding a layout property.

<script>
export default {
  layout: 'blog'
}
</script>

There are of course, several other properties that you can add to Nuxt pages.

Middleware Directory

The middleware directory contains all of the middleware; a collection of custom functions that get ran before a page our layout is rendered.

A real world example of middleware would be authenticating a user every time a page with secure data is loaded. In other words, Every time a user visits a route that requires authentication, a custom middleware function would run, returning a boolean according to whether a user is logged in or not. If not, route them to a /login route so the user can login, and return to that page.

Plugins Directory

The plugins directory is used to add JavaScript plugins that you want loaded before instantiating the root Vue application. This directory is more or less a place to store plugin files, like vue-notifications, for example. The example below is from the Nuxt documentation.

If we want to display notifications in our app, we’ll need to initalize it before the application is rendered.

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

Page Animations and Loading Bar

One of my favorite things about Nuxt is the animation support out of the box! You can easily animate in and out of pages by using a few built-in CSS classes. Animating between pages can really make your application feel fluid and cohesive. If you want the page to fade in up and fade out down between routes, you could do something like this:

.page-enter-active,
.page-leave-active {
  opacity: 1;
  transition: opacity .25s;
  animation-duration: .3s;
  animation-fill-mode: both;
}

.page-enter-active {
  animation-name: pageFadeInUp;
}

.page-leave-active {
  animation-name: pageFadeOutDown;
}

.page-enter, .page-leave-to {
  opacity: 0;
}


@-webkit-keyframes pageFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes pageFadeOutDown {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }
}

Changing the Loading Bar Color

To change the color of the loading bar, modify the CSS in the loading object inside of the nuxt.config.js file.

loading: { color: '#3B8070' },

Disabling SSR for a Component

There are times where you don’t want a page or component to render on the server side for one of many reasons. Nuxt makes this very easy. If you want to render a component on the client-side, just add the the <no-ssr> tag.

<template>
...
  <no-ssr>
    <some-component />
  </no-ssr>
...
</template>

Conclusion

As you can see, there’s a lot to cover with Nuxt but hopefully you now have general understanding how Nuxt works, why it’s important, and how you can scaffold your next web application using Nuxt.

If you’re looking for more information about it, Nuxt has great documentation with tons of examples as well as the community starter template itself. As mentioned before, the fantastic community added README.md files in each directory with additional information and links to the documentation that’s specific to that directory.