完全静的化への道

読むには長すぎる

1. nuxtを2.14.0にアップグレードしてください
2. nuxt.config.jsでtarget: 'static'を設定してください
3. nuxt generateを実行してください
4. これで完了です✨

ボーナス：nuxt startを実行すると、生成された静的アプリケーションを提供するローカルサーバーを実行できます。

注：このビデオではnuxt exportを使用していますが、これはnuxt generateに置き換えられました。

目次

• 読むには長すぎる
• 目次
• 履歴
• 現在の問題
• 新しい設定オプション：target
• よりスマートなnuxt generate
  • 超高速な静的アプリケーション
  • クローラーの統合
  • より高速な再デプロイ
• よりスマートなnuxt start
• プレビューモード
• コマンド
  • 次のステップ

履歴

Nuxtはv0.3.2（2016年11月）からnuxt generateによる静的生成機能を備えていましたが、それ以来、様々な方法で改善してきましたが、完全な静的生成を実現することはできませんでした。本日、Nuxt 2.13で完全静的エクスポートが可能になったことを発表できることを嬉しく思います。

現在の問題

nuxt generateは主にプリレンダリングであり、クライアントサイドでナビゲートすると、asyncDataとfetchが呼び出され、*APIへのリクエストが行われます*。多くのユーザーから、「完全静的」モード、つまり次のページがすでにプリレンダリングされているため、ナビゲーション時にこれら2つのフックを呼び出さないようにするモードのサポートが求められていました。

また、開発者エクスペリエンスも最適ではありません

• SSRではreqまたはresにアクセスできますが、nuxt generateを実行しているときはアクセスできません
• process.staticはnuxt generateを実行しているときのみtrueになるため、静的生成用のNuxtモジュールやプラグインの開発が遅くなります
• すべての動的ルートをgenerate.routesで指定する必要があるため、nuxtモジュールにアクセスできないため、より困難になります。
• SPAフォールバックを開発環境でテストできません。フォールバックは、404ページにアクセスしたときにロードされるNuxtアプリケーションのクライアント専用バージョンです
• nuxt generateはデフォルトでnuxt buildを実行するため、コンテンツのみが変更された場合、Webサイトの生成が遅くなります

nuxt-payload-extractorモジュールを使用すれば完全静的サポートを実現できましたが、使い方が複雑で制限がありました.

新しい設定オプション：target

ユーザーエクスペリエンスを向上させ、アプリケーションを静的ホスティングにエクスポートする意思をNuxtに伝えるために、nuxt.config.jsにtargetオプションを導入します

<script setup>
  import { ref, computed } from '#imports'

  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

静的ターゲットでnuxt devを実行すると、開発者エクスペリエンスが向上します

• コンテキストからreqとresを削除します
• 404、エラー、リダイレクトが発生した場合、クライアントサイドレンダリングにフォールバックします（SPAフォールバックを参照）
• $route.queryはサーバーサイドレンダリングでは常に{}になります
• process.staticはtrueです

また、モジュール作成者がユーザーターゲットに応じてロジックを追加できるように、process.targetも公開しています.

よりスマートなnuxt generate

अब v2.14.0 के साथ, आप nuxt generate का उपयोग कर सकते हैं, यह स्मार्ट तरीके से पता लगाएगा कि इसे बिल्ड करना है या नहीं.

超高速な静的アプリケーション

target: 'static'を指定したnuxt generateは、すべてのページをHTMLにプリレンダリングし、ペイロードファイルを保存して、クライアントサイドナビゲーションでasyncDataとfetchをモックします。これは、**クライアントサイドナビゲーションでAPIへのHTTP呼び出しがなくなる**ことを意味します。ページペイロードをjsファイルに抽出することで、**提供されるHTMLサイズも削減**され、最適なパフォーマンスのためにプリロードされます（ヘッダーから）。

完全静的化を行う際のスマートプリフェッチも改善し、ペイロードもフェッチすることで、ナビゲーションが瞬時に行われるようになりました👀

クローラーの統合

その上、内部にクローラーも搭載されており、すべての相対リンクを検出して生成します

多数のルートを除外したい場合は、generate.excludeを使用してください。generate.routesを使用して、クローラーが検出できなかった追加のルートを追加することもできます。

クローラーを無効にするには、nuxt.config.jsでgenerate.crawler: falseを設定してください

より高速な再デプロイ

nuxt buildとnuxt exportを分離することで、新たな改善の可能性が開かれました。コンテンツが変更された場合にのみページをプリレンダリングします。つまり、webpackビルドなし→再デプロイの高速化を意味します。

よりスマートなnuxt start

静的に生成されたNuxtアプリをdist/に配置したら、nuxt startを使用して本番HTTPサーバーを起動し、SPAフォールバックをサポートする静的アプリを提供します。

このコマンドは、お気に入りの静的ホスティングプロバイダーにプッシュする前に、静的アプリケーションをローカルでテストするのに最適です.

プレビューモード

APIを呼び出し続けるために、ライブプレビューを標準でサポートしています

export default async function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

ページデータが自動的に更新されます（nuxtServerInit、asyncData、fetchの呼び出し）。

プレビューモードが有効になっている場合、asyncDataとfetchの元のメソッドが呼び出されます。

コマンド

targetに応じて、次のコマンドを実行できます。

• サーバー
  • nuxt dev：開発サーバーを起動します
  • nuxt build：本番環境用にNuxtアプリケーションをバンドルします
  • nuxt start：本番サーバーを起動します
• 静的
  • nuxt dev：開発サーバーを起動します（静的対応）
  • nuxt generate：必要に応じて本番環境用にNuxtアプリケーションをバンドルし（静的対応）、アプリケーションをdist/ディレクトリに静的HTMLとしてエクスポートします
  • nuxt start：dist/から本番アプリケーションを提供します

次のステップ