Menu

Nuxt static rendering!

My website is build on Nuxt.js and initially it had no managed content so I used the generate function of nuxt and it created a nice dist folder with my static files. I could host these files on an old school ftp server and everything worked perfect and fast. So far so good.

After a while I thought it would it would be nice to tell my development experiences. This meant building a blog, the very same one you are reading right now. I started researching my options and got to the conclusion I did want to use a cms. I picked Ghost because it was easy to install and run locally. I added some content and got coding. Everything went fine in development mode so the time came to generate the static files. Nothing was added!

Turns out I needed the routes so nuxt knows which pages to render. Nuxt also has a crawler which will crawl the relative links and generate the pages based of this. This wasn't the best approach for my setup I went with the routes configuration in the nuxt.config.js file.

Load the routes in nuxt.config.js

The generate property has a routes value which can be a function. This function returns the routes you want to have generated. But next to the route it can also return a payload. This payload should be filled with the data which is needed to render the specific page.

//nuxt.config.js
import api from "./your_api_folder/api";

export default {
  // ...
  generate: {
    async routes() {
      const pages = await api.getPages();

      return [
        ...pages.map(page => ({
          route: page.slug,
          payload: page.data,
        })),
      ];
    },
  },
};
A snippet from a post template

Render the page with the payload data

When a page in nuxt is loaded the page data is fetched trough an api call in the asyncdata function. The returned page property is used to render the data on the page.

<template>

</template>

<script>
import api from "./your_api_folder/api";

export default {
  data() {
    return {
      page: null,
    };
  },
  async asyncData({ params }) {
    const response = await api.findPage(params.id);
    return { page: response.data };
  },
};
</script>
A snippet from a post template

If we take a look at the above snippet and keep the generate function in mind you can see that the api is called twice. Once for the route generation and once for fetching the data to render the page. This is not the optimal way to go. Luckily nuxt has the previously mentioned payload option.

<template>

</template>

<script>
import api from "./your_api_folder/api";

export default {
  data() {
    return {
      page: null,
    };
  },
  async asyncData({ params, payload }) {
    if (payload) {
        return { page: payload };
    }

    const response = await api.findPage(params.id);
    return { page: response.data };
  },
};
</script>
A snippet from a post template

Here we get back the payload which was added in the generate function. If the payload is present use that to render the page data. This way the api is called once for the generation of this page.

This will drastically cut the build time when nuxt generate is called and is a good feature to be aware of.

Hello! šŸ‘‹