Is there any way to reduce API requests when generating pages in Nuxt.js SSG?

It is possible to reduce the number of requests for a page by setting the routes option in the generate property in nuxt.config.js.

The following example will explain how how to reduce API requests on a page. For this practice, it is assumed that a content list page and content detail page has already been set up.

Reduce page requests sample

This section will introduce the sample code to reduce page requests.
We will assume a case in which a large number of slug components use asyncData() to retrieve data from the API.
The API will be accessed and the pages will be generated for the number of components during SSG.

It may be possible to reduce the number of API accesses to the target, making it more efficient by first acquiring data centrally in one place and then distributing the acquired data to each component. For example, assume a case where the content list page and content detail page are created with the following file structure and source code.

Topics list

<template>
    <div>
        <nuxt-link
            v-for="topic in topics"
            :key="topic.topics_id"
            :to="`/topics/${topic.topics_id}`"
        >
            {{ topic.subject }}
        </nuxt-link>
    </div>
</template>

<script>
// TopicsList page
// /pages/topics/index.vue
export default {
    async asyncData ({ $axios }) {
        return { topics: (await $axios.$get(`${process.env.BASE_URL}/rcms-api/1/topics/`)).list }
    }
}
</script>

Topics detail

<template>
    <div>
        <h1 class="title">{{ topic.subject }}</h1>
        <div class="post" v-html="topic.contents"></div>
    </div>
</template>

<script>
// TopicsDetail page
// /pages/topics/_slug.vue
export default {
    // calls 100 times on static generation if the topics contains 100 items
    async asyncData ({ $axios, params }) {
        return { topic: (await $axios.$get(`${process.env.BASE_URL}/rcms-api/1/topicsdetail/${params.slug}`)).details }
    }
}
</script>

In the above source code, if 100 contents exist, 100 requests are made to the content details API. However, in reality, only title and contents are used from the content details. In this case, there is no need to request the API for content details in the first place, since these data are included in the data obtained from the content list.

Set routes option to reduce page requests

To make it more efficient, modify the system to retrieve data for content listings only once and deploy that data to each component.

Modifying nuxt.config

First, modify nuxt.config.js as follows.

require('dotenv').config();
const { BASE_URL } = process.env;
import axios from 'axios';

module.exports = {
  generate: {
    async routes() {
      const topicsList = (await axios.get(`${process.env.BASE_URL}/rcms-api/1/topics`)).data.list;
      return topicsList.map((topic) => ({
        route: `/topics/${topic.topics_id}`,  // a path of TopicsDetail
        payload: topic  // destributes topic data to the target component (TopicsDetail)
      }))
    }
  },

Modifying the content detail page

Next, modify the content detail page as follows.

<template>
    <div>
        <h1 class="title">{{ topic.subject }}</h1>
        <div class="post" v-html="topic.contents"></div>
    </div>
</template>

<script>
// TopicsDetail page
// /pages/topics/_slug.vue
export default {
-    async asyncData ({ $axios, params }) {
-        // calls 100 times on static generation if the topics contains 100 items
+    async asyncData ({ $axios, params, payload }) {
+        // conveys the topic data as `payload`
+        if (payload) {
+            return { topic: payload };
+        }
+        // now that we don't use bellow any longer on static generation, but remain it just in case of local dev
        return { topic: (await $axios.$get(`${process.env.BASE_URL}/rcms-api/1/topicsdetail/${params.slug}`)).details }
    }
}
</script>

After the above modification, the content detail page in SSG will receive zero requests, and 100 requests for content details will not be made.
As a result, the content generation process by SSG will be shortened.

tip

When checking in the local environment, run npx nuxt generate && npx nuxt serve on the terminal.

info

For more information about routes in nuxt.config.js, please refer to Nuxt Official Documentation -> routes.