Nuxt generate コマンドの補足解説

Nuxtのgenerateコマンドは、アプリケーションの全ルートを事前にレンダリングし、静的なHTMLファイルとして出力する機能です。これにより、サーバーサイドの処理が不要な静的ホスティング環境でもNuxtアプリを高速かつ安定的に配信できます。

本記事では、公式ドキュメントの説明を補完し、実務での活用シーンや注意点を中心に詳しく解説します。静的サイト生成（SSG）を初めて使う方や、より効果的に使いこなしたい中級者の方に役立つ内容です。

1. イントロ：なぜgenerateコマンドが嬉しいのか？

• 高速なページ表示
  事前にHTMLを生成するため、ユーザーはサーバー処理を待たずに即座にコンテンツを閲覧可能です。

• サーバー負荷の軽減
  静的ファイルを配信するだけなので、サーバーのCPUやメモリ負荷が大幅に減ります。

• セキュリティ向上
  動的処理が不要なため、サーバー側の攻撃リスクが減少します。

• 幅広いホスティング対応
  NetlifyやVercel、GitHub Pagesなど、静的ホスティングサービスに簡単にデプロイ可能です。

2. まず結論：generateコマンドの要点

• 全ルートを静的HTMLに事前レンダリングする
• nuxt buildのprerenderオプションを内部で利用している
• 作業ディレクトリやログレベルなど細かいオプション指定が可能
• 静的ホスティングに最適化されたビルドを生成する
• 動的ルートはpayloadやfallback設定で対応可能

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

使うべきケース

• コンテンツが頻繁に変わらないサイト
  ブログやドキュメントサイト、企業のコーポレートサイトなど。

• SEOを重視するサイト
  事前レンダリングによりクローラーが完全なHTMLを取得できるため、SEO効果が高い。

• サーバーコストを抑えたい場合
  静的ファイル配信はサーバー負荷が低く、コスト削減につながる。

使わない方がよいケース

• ユーザーごとに動的に変わるコンテンツが多い場合
  例えばログインユーザー専用のページやリアルタイムデータを多用するアプリ。

• 頻繁にコンテンツが更新される場合
  毎回ビルドし直す必要があり、運用コストが高くなる。

• 大規模な動的ルーティングがある場合
  すべてのルートを事前生成するのが現実的でないケース。

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

ユースケース1：ブログサイトの静的生成

ブログ記事をMarkdownで管理し、ビルド時に全記事を静的HTMLに変換。高速表示とSEO効果を両立。

// nuxt.config.ts の一部例
export default {
  target: 'static',
  generate: {
    routes: async () => {
      const posts = await fetchPosts() // APIやファイルから記事一覧取得
      return posts.map(post => `/blog/${post.slug}`)
    }
  }
}

ユースケース2：多言語サイトの静的生成

言語ごとにルートを分けて事前生成し、国際化対応を実現。

export default {
  target: 'static',
  generate: {
    routes: ['/', '/en', '/fr', '/ja']
  },
  i18n: {
    locales: ['en', 'fr', 'ja'],
    defaultLocale: 'en'
  }
}

ユースケース3：APIレスポンスを利用した静的ページ生成

ビルド時に外部APIからデータを取得し、静的ページを生成。

export default {
  target: 'static',
  generate: {
    async routes() {
      const res = await fetch('https://api.example.com/items')
      const items = await res.json()
      return items.map(item => `/items/${item.id}`)
    }
  }
}

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

SSRとCSRの違いによるHydrationエラー

静的生成されたHTMLに対してクライアント側でVueが再度マウントされる際、サーバーとクライアントのDOMが一致しないとHydrationエラーが発生します。動的な値や日時、ランダム値をテンプレートに直接埋め込む場合は特に注意が必要です。

動的ルートの扱い

すべての動的ルートをgenerate.routesで明示的に指定しないと、該当ページは生成されません。動的ルートが多い場合はビルド時間が長くなるため、必要なルートだけを絞り込む工夫が必要です。

パフォーマンスとビルド時間

大規模サイトでは全ルートの静的生成に時間がかかるため、ビルド時間の最適化やインクリメンタルビルドの検討が重要です。

環境変数の取り扱い

--dotenvオプションで.envファイルを読み込めますが、ビルド時と実行時で環境変数が異なる場合は挙動に注意してください。

6. まとめ

Nuxtのgenerateコマンドは、静的サイト生成を簡単に実現し、パフォーマンスやSEOの向上に大きく貢献します。特にコンテンツが安定しているサイトやSEO重視のプロジェクトに最適です。一方で、動的コンテンツが多い場合や頻繁に更新がある場合は運用コストやHydrationエラーに注意が必要です。

実務では、動的ルートの管理やビルド時間の最適化を意識しつつ、静的生成のメリットを最大限活かす設計を心がけましょう。