Can pages without internal links be generated with Nuxt.js SSG?

By setting the routes option in the generate property of nuxt.config.js, you can generate pages that are not linked within the page.

generate: {
    routes: [
        '/example/', 
        '/example2/',
        '/example3/test.html',
    ]
}

Get a list of contents from the API.

If there are elements on the site that display contents asynchronously (such as displaying contents asynchronously when you press "see more"), and you want to generate pages for those contents using generate, you need to set the directory of the pages you want to generate in routes.

The following is an example of getting a list of contents from the Kuroco API and setting the page directory in routes.

generate: {
    /**
     * This is an example of creating pages for each topics_id of the retrieved contents from the API. 
     * First, retrieve data from Kuroco, and then return an array of objects { route: 'URL' }. 
     * This will generate all the above data statically during generation on the server.
     */ 
    routes: async (callback) => {
        try {
            const topicsListResponse = await
            axios.get('https://xxxxxx.a.kuroco.app/rcms-api/1/topics/list') // APIのエンドポイントが入ります
            const routes = topicsListResponse.data.list.map((item) => {
                return {
                    route: `/topics/${item.topics_id}/`,
                }
            })
            callback(null, routes);
        } catch(e) {
            callback(e, routes);
        }
    },
}

When retrieving a large number of contents at once from the API

If a large number of contents, such as 500 or more, are retrieved at once from the API, the API may become overloaded and return a 502 error. In that case, you can reduce the load on the API by limiting the number of contents retrieved from the API and repeatedly retrieving them.

The following is an example of retrieving a list of contents from the API in increments of 100.

generate: {
    /**
     * This is an example of reducing the load on the API by retrieving a list of 100 contents (cnt) at a time.
     * @note As another method, you can specify cnt: 0 to retrieve all contents, but please note that if there are a huge number of contents, it may take an extremely long time to build.
     */
    routes: async () => {
        const cnt = 100;
        const fetchAllTopics = async (pageID = 1) => {
            const response = await axios.get('https://xxxxxx.a.kuroco.app/rcms-api/1/topics/list', {
                params: {
                    cnt,
                    pageID,
                }
            });
            const { list, pageInfo } = response.data;
            return pageInfo.totalPageCnt > pageID
                ? [...list, ...(await fetchAllTopics(pageID + 1))]
                : list;
        };
        const topicsList = await fetchAllTopics();
        return topicsList.map((item) => ({
            route: `/topics/${item.topics_id}/`,
        }));
    }
},

info

For more information on "routes", see the Nuxt official documentation.