プリレンダリング

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 クローラーの動作

  1. アプリケーションのルートルート (/) の HTML、~/pages ディレクトリ内の非動的ページ、および nitro.prerender.routes 配列内のその他のルートをロードします。
  2. HTML と payload.json を ~/.output/public/ ディレクトリに保存して、静的に提供します。
  3. HTML 内のすべてのアンカータグ (<a href="...">) を見つけて、他のルートに移動します。
  4. これ以上クロールするアンカータグがなくなるまで、見つかった各アンカータグに対して手順 1 ～ 3 を繰り返します。

これは、検出可能なページにリンクされていないページは自動的にプリレンダリングできないため、理解することが重要です。

nuxt generate コマンドについて詳しく読む。

選択的プリレンダリング

nuxt.config ファイルで、Nitro がビルド中に取得してプリレンダリングするルートを手動で指定したり、/dynamic のようにプリレンダリングしたくないルートを無視したりできます。

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2'],
      ignore: ['/dynamic'],
    },
  },
})

これを crawlLinks オプションと組み合わせることで、/sitemap.xml や /robots.txt のようにクローラーが検出できない一連のルートをプリレンダリングできます。

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml', '/robots.txt'],
    },
  },
})

nitro.prerender を true に設定することは、nitro.prerender.crawlLinks を true に設定することに似ています。

プリレンダリングの詳細については、Nitro のドキュメントをお読みください。

最後に、routeRules を使用して手動で設定できます。

nuxt.config.ts
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 },
  },
})
Nitro の routeRules 設定について詳しく読む。

省略形として、defineRouteRules を使用してページファイル内で設定することもできます。

この機能は実験的なものであり、使用するには nuxt.config で experimental.inlineRouteRules オプションを有効にする必要があります。
app/pages/index.vue
<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>

これは以下のように翻訳されます

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
  },
})

ランタイムプリレンダリング設定

prerenderRoutes

Nuxt コンテキスト内でこれをランタイムに使用して、Nitro がプリレンダリングするルートを追加できます。

app/pages/index.vue
<script setup>
prerenderRoutes(['/some/other/url'])
prerenderRoutes('/api/content/article/my-article')
</script>

<template>
  <div>
    <h1>This will register other routes for prerendering when prerendered</h1>
  </div>
</template>
詳しくは、prerenderRoutesをお読みください。

prerender:routes Nuxt フック

これは、追加のルートが登録されるプリレンダリングの前に呼び出されます。

nuxt.config.ts
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 フック

これは、プリレンダリング中に各ルートに対して呼び出されます。これは、プリレンダリングされる各ルートのきめ細かい処理に使用できます。

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    hooks: {
      'prerender:generate' (route) {
        if (route.route?.includes('private')) {
          route.skip = true
        }
      },
    },
  },
})