プリレンダリング
Nuxtは特定のパフォーマンスやSEOメトリクスを改善するために、ビルド時にページを静的にレンダリングすることができます
Nuxtは、アプリケーションの特定のページをビルド時にレンダリングすることを可能にします。Nuxtは、リクエストされたときにプリビルドされたページを提供し、その場で生成する代わりにそれを使用します。
こちらも参照 Nuxtのレンダリングモードクローラーベースのプリレンダリング
nuxt generate コマンドを使用して、Nitroクローラーを用いてアプリケーションをビルドおよびプリレンダリングします。このコマンドは、nitro.static オプションを true に設定した nuxt build に似ており、または nuxt build --prerender を実行することと同様です。
これにより、サイトがビルドされ、Nuxtインスタンスが立ち上がり、デフォルトではルートページ / と、サイト内のリンクされているページ、さらにそれらのページがリンクしているページなどがプリレンダリングされます。
npx nuxt generate
これで、.output/public ディレクトリを任意の静的ホスティングサービスにデプロイするか、npx serve .output/public でローカルにプレビューすることができます。
Nitroクローラーの動作:
- アプリケーションのルートルート (
/)、~/pagesディレクトリ内の非動的ページ、およびnitro.prerender.routes配列内の他のルートのHTMLをロードします。 - HTMLと
payload.jsonを~/.output/public/ディレクトリに保存し、静的に提供します。 - HTML内のすべてのアンカータグ (
<a href="...">) を見つけて、他のルートに移動します。 - クロールするアンカータグがなくなるまで、見つかった各アンカータグに対してステップ1-3を繰り返します。
これは、発見可能なページにリンクされていないページは自動的にプリレンダリングされないため、理解しておくことが重要です。
こちらも参照 api > commands > generate#nuxt-generate選択的プリレンダリング
ビルド中にNitroがフェッチしてプリレンダリングするルートを手動で指定したり、nuxt.config ファイルで /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: {
// プリレンダリングするように設定
"/rss.xml": { prerender: true },
// プリレンダリングをスキップするように設定
"/this-DOES-NOT-get-prerendered": { prerender: false },
// /blog 以下のすべては、他のページからリンクされている限りプリレンダリングされます
"/blog/**": { prerender: true },
},
});
省略形として、defineRouteRulesを使用してページファイル内でこれを設定することもできます。
<script setup>
// またはページレベルで設定
defineRouteRules({
prerender: true,
});
</script>
<template>
<div>
<h1>ホームページ</h1>
<p>ビルド時にプリレンダリングされました</p>
</div>
</template>
これは次のように変換されます:
export default defineNuxtConfig({
routeRules: {
"/": { prerender: true },
},
});
ランタイムプリレンダ設定
prerenderRoutes
Nuxtコンテキスト内でこれを使用して、Nitroがプリレンダリングするためのルートを追加できます。
<script setup>
prerenderRoutes(["/some/other/url"]);
prerenderRoutes("/api/content/article/my-article");
</script>
<template>
<div>
<h1>プリレンダリング時に他のルートを登録します</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;
}
},
},
},
});
※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/4.x/getting-started/prerendering