NuxtのprerenderRoutes機能とは？〜静的サイト生成の課題を解決する

NuxtのprerenderRoutesは、Nitroサーバーに対して追加のルートをプリレンダリングするよう指示できる機能です。静的サイト生成（SSG）では、通常はルーティングに基づいてページが生成されますが、動的に生成されるページやAPIルートなど、明示的に指定しないとプリレンダリングされないパスがあります。prerenderRoutesを使うことで、こうしたルートも静的に生成でき、ユーザー体験の向上やSEO対策に役立ちます。

この機能を活用することで、以下のような課題を解決できます。

• 動的ルートの静的生成が漏れる問題を防ぐ
• APIエンドポイントを静的にプリレンダリングし、サーバーレス環境でも高速にデータ取得可能にする
• クライアント側での初期ロードを軽減し、パフォーマンスを向上させる

まず結論：prerenderRoutesのポイント

• プリレンダリング対象のルートを明示的に追加できる
  通常のルーティングに含まれないページやAPIも静的生成可能。

• Nuxtのコンテキスト内でのみ呼び出せる
  例えばasyncDataやserverPrefetchなどサーバーサイド処理中に利用。

• プリレンダリング中に実行されなければ効果がない
  クライアントサイドやビルド後の実行では無効。

• APIルートのプリレンダリングも可能
  静的に生成されたAPIレスポンスを$fetchで取得できる。

• 本番環境でのレスポンスヘッダーに注意が必要
  一部のホスティング環境でContent-Typeが適切に設定されない場合がある。

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• 動的ルートが多いサイトで、すべてのページを静的に生成したい場合
  例えばブログ記事や商品詳細ページなど、ルートが動的に生成されるが静的化したいとき。

• APIレスポンスを静的にキャッシュして高速化したい場合
  サーバーレス環境やCDN配信でAPIをプリレンダリングし、レスポンス速度を向上。

• SEO対策として、クローラーに全ページのHTMLを提供したい場合
  動的に生成されるページも含めて静的HTMLを用意することで、検索エンジンのインデックス精度が向上。

使わない方がよいケース

• クライアントサイドで動的に生成されるルートのみを対象にしたい場合
  prerenderRoutesはサーバーサイドのプリレンダリング時にのみ有効なので、クライアント側での動的生成には効果なし。

• 頻繁に更新されるデータを持つAPIルート
  静的にプリレンダリングすると更新が反映されにくくなるため、動的APIとして運用したほうがよい。

• プリレンダリング対象が膨大すぎてビルド時間が著しく増加する場合
  生成コストとパフォーマンスのバランスを考慮する必要がある。

実務でよくあるユースケースとサンプルコード

1. 動的ブログ記事の静的生成

ブログ記事のURLが動的に生成される場合、prerenderRoutesで全記事のパスを明示的に指定して静的HTMLを生成します。

export default {
  async generate() {
    const articles = await fetch('https://example.com/api/articles').then(res => res.json())
    const routes = articles.map(article => `/blog/${article.slug}`)
    routes.forEach(route => prerenderRoutes(route))
  }
}

このようにAPIから記事一覧を取得し、全記事のルートをプリレンダリング対象に追加します。

2. APIレスポンスのプリレンダリング

完全静的サイトでAPIレスポンスも静的に生成し、クライアントは$fetchで高速にデータを取得可能にします。

prerenderRoutes('/api/content/article/name-of-article')

// クライアント側でのデータ取得例
const articleContent = await $fetch('/api/content/article/name-of-article', {
  responseType: 'json',
})

これにより、APIサーバーがなくても静的にデータを配信でき、サーバーレス環境での運用が容易になります。

3. 多言語サイトのプリレンダリング

多言語対応サイトで、言語ごとに異なるルートをプリレンダリングしたい場合。

const locales = ['en', 'ja', 'fr']
locales.forEach(locale => {
  prerenderRoutes(`/${locale}/about`)
  prerenderRoutes(`/${locale}/contact`)
})

言語ごとに必要なページを明示的に追加し、全言語の静的ページを生成します。

よくある落とし穴・注意点

1. 実行タイミングの制約

prerenderRoutesはNuxtのサーバーサイドコンテキスト内でのみ有効です。ビルド時のプリレンダリング中に呼び出さなければ効果がありません。ブラウザやクライアントサイドで呼び出しても無効です。

2. SSRとHydrationの不整合

プリレンダリングしたルートがクライアントで正しくHydrationされない場合、UIの不整合や警告が発生することがあります。動的データの差分や非同期処理のタイミングに注意しましょう。

3. APIレスポンスのContent-Type問題

プリレンダリングされたAPIルートは、ホスティング環境によってはapplication/octet-streamなど不適切なContent-Typeで配信されることがあります。必ず$fetchのresponseTypeを明示的に指定し、レスポンスの扱いに注意してください。

4. ビルド時間の増加

大量のルートをprerenderRoutesで追加すると、ビルド時間が大幅に増加します。必要なルートだけを厳選して指定し、ビルド効率を保つことが重要です。

まとめ

NuxtのprerenderRoutesは、静的サイト生成の柔軟性を高める強力な機能です。動的ルートやAPIレスポンスを静的に生成し、パフォーマンスやSEOを向上させることができます。ただし、利用はサーバーサイドのプリレンダリング時に限定され、実行タイミングやホスティング環境の挙動に注意が必要です。実務では動的コンテンツの静的化や多言語対応、APIの静的キャッシュなどに活用し、ビルド時間とのバランスを考慮しながら適切に運用しましょう。