プリレンダリング
Nuxtでは、アプリケーションから選択したページをビルド時にレンダリングできます。Nuxtは、要求されたときに、その場で生成するのではなく、事前にビルドされたページを提供します。
クロールベースのプリレンダリング
nuxi generateコマンドを使用して、Nitroクローラーを使用してアプリケーションをビルドし、プリレンダリングします。このコマンドは、nitro.staticオプションをtrueに設定したnuxt build、またはnuxt build --prerenderを実行するのと同じです。
これにより、サイトがビルドされ、nuxtインスタンスが起動し、デフォルトでは、ルートページ/と、それにリンクされているサイトのページ、それらにリンクされているサイトのページなどがプリレンダリングされます。
npx nuxi generate
.output/publicディレクトリを任意の静的ホスティングサービスにデプロイするか、npx serve .output/publicを使用してローカルでプレビューできます。
Nitroクローラーの動作
- アプリケーションのルートルート（
/）のHTML、~/pagesディレクトリにある動的でないページ、およびnitro.prerender.routes配列にあるその他のルートのHTMLを読み込みます。 - HTMLと
payload.jsonを~/.output/public/ディレクトリに保存して、静的に配信します。 - HTML内のすべてのアンカータグ（
<a href="...">）を見つけて、他のルートに移動します。 - クロールするアンカータグがなくなるまで、見つかった各アンカータグに対して手順1〜3を繰り返します。
検出可能なページにリンクされていないページは自動的にプリレンダリングできないため、これは理解しておくことが重要です。
選択的プリレンダリング
nuxt.configファイルで、Nitroがビルド中にフェッチしてプリレンダリングするルートを手動で指定したり、/dynamicのようにプリレンダリングしたくないルートを無視したりできます。
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ["/user/1", "/user/2"],
ignore: ["/dynamic"],
},
},
});
これをcrawlLinksオプションと組み合わせて、クローラーが/sitemap.xmlや/robots.txtのように検出できない一連のルートをプリレンダリングできます。
export default defineNuxtConfig({
nitro: {
prerender: {
crawlLinks: true,
routes: ["/sitemap.xml", "/robots.txt"],
},
},
});
nitro.prerenderをtrueに設定すると、nitro.prerender.crawlLinksをtrueに設定するのと同じです。
最後に、`routeRules`を使用して手動で設定できます。
export default defineNuxtConfig({
routeRules: {
// Set prerender to true to configure it to be prerendered
"/rss.xml": { prerender: true },
// Set it to false to configure it to be skipped for prerendering
"/this-DOES-NOT-get-prerendered": { prerender: false },
// Everything under /blog gets prerendered as long as it
// is linked to from another page
"/blog/**": { prerender: true },
},
});
省略形として、defineRouteRulesを使用してページファイルでこれを設定することもできます。
<script setup>
// Or set at the page level
defineRouteRules({
prerender: true,
});
</script>
<template>
<div>
<h1>Homepage</h1>
<p>Pre-rendered at build time</p>
</div>
</template>
これは次のように変換されます。
export default defineNuxtConfig({
routeRules: {
"/": { prerender: true },
},
});
ランタイムプリレンダリング設定
prerenderRoutes
Nuxtコンテキスト内でこれを実行時に使用して、Nitroがプリレンダリングするルートを追加できます。
<script setup>
prerenderRoutes(["/some/other/url"]);
</script>
<template>
<div>
<h1>This will register other routes for prerendering when prerendered</h1>
</div>
</template>
prerender:routes Nuxtフック
これは、追加のルートを登録するためにプリレンダリングの前に呼び出されます。
export default defineNuxtConfig({
hooks: {
async "prerender:routes"(ctx) {
const { pages } = await fetch("https://api.some-cms.com/pages").then(
(res) => res.json(),
);
for (const page of pages) {
ctx.routes.add(`/${page.name}`);
}
},
},
});
prerender:generate Nitroフック
これは、プリレンダリング中に各ルートに対して呼び出されます。これを使用して、プリレンダリングされる各ルートをきめ細かく処理できます。
export default defineNuxtConfig({
nitro: {
hooks: {
"prerender:generate"(route) {
if (route.route?.includes("private")) {
route.skip = true;
}
},
},
},
});