Nuxt.jsのSSGでページ内リンクされていないページを生成することはできますか？
nuxt.config.js の generate プロパティに routes オプションを設定することで、generateした際にページ内リンクされていないページを生成できます。
nuxt.config.js
generate: {
routes: [
'/example/',
'/example2/',
'/example3/test.html',
]
}
APIから記事一覧を取得
サイト内に非同期で記事を表示している要素（「もっと見る」を押下すると記事を非同期で表示など）がある場合、generate でその記事のページは生成されないため、routes に生成したいページのディレクトリを設定する必要があります。
以下はKurocoのAPIから記事一覧のデータを取得し、routes にページのディレクトリを設定する例になります。
nuxt.config.js
generate: {
/**
* APIから記事一覧を取得し、その記事のtopics_idごとにページを作成する例です。
* まずKurocoからデータ取得、その後`{ route: 'URL' }`というオブジェクトの配列を返すようにすると、
* サーバ上でのgenerate時に上記全てのデータを静的生成するようになります。
*/
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);
}
},
}
APIから一度に取得する記事の件数が多い場合
APIから一度に取得する記事一覧の件数が500件以上といった膨大な件数の場合、APIへの負荷が高くなってしまい、502エラーが返ってきてしまう場合があります。
その場合、APIから取得する記事一覧の件数を制限し、繰り返し取得することでAPIへの負荷を削減できます。
以下はAPIから記事一覧を100件ずつ取得する例になります。
nuxt.config.js
generate: {
/**
* APIから記事一覧を100件(cnt)ずつ取得することでAPIへの負荷を軽減する例です。
* @note 別の方法として、`cnt: 0`を指定することで記事の全件が取得できますが、記事件数が膨大に存在する場合ビルドに極端に時間がかかる場合がありますのでご注意ください。
*/
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}/`,
}));
}
},