静的サイト生成

静的サイト生成を使用すると、ビルドフェーズでアプリケーションをレンダリングし、Netlify、GitHub pages、Vercel などの静的ホスティングサービスにデプロイすることができます。これは、アプリケーションをデプロイするためにサーバーが必要ないことを意味します。

サイトを生成する

target:static でサイトをデプロイすると、すべての .vue のページが HTML と JavaScript ファイルに生成されます。API へのすべての呼び出しは、生成されたコンテンツ内の static と呼ばれるフォルダにキャッシュされ、クライアントサイドの遷移で API を呼び出す必要がなくなります。

ステップ 1：ブラウザから CDN へ

ブラウザが最初のリクエストを送信すると、CDN にヒットします。

ステップ 2: CDN からブラウザへ

CDN は、すでに生成された HTML、JavaScript、静的アセットをブラウザに送り返します。コンテンツが表示され、Vue.js のハイドレーションが作動してリアクティブになります。この処理の後、ページはインタラクティブになります。

ステップ 3: ブラウザからブラウザへ

ページ間の遷移は <NuxtLink> を使ってクライアントサイドで行われるので、CDN に再度ヒットすることはありません。そしてブラウザをハードリフレッシュしても、すべての API への呼び出しはすでにキャッシュされている静的フォルダから読み込まれます。

SPA フォールバック

generate.exclude プロパティを使用して生成から除外されたページは、シングルページアプリケーションにフォールバックします。そのため、これらのページは CDN には存在せず、ユーザーがそのページに遷移するとクライアントサイドのブラウザでレンダリングされます。

コンテンツを更新する

API から新しいコンテンツを取得するには、サイトを再生成する必要があります。ほとんどの静的サイトのホスティングプロバイダでは、git コマンドやプルリクエストで変更を master ブランチにプッシュすることで再生成することができます。

プレビューモード

プレビューモードは API や CMS を呼び出して、デプロイ前に変更点をライブで確認できるようにします。この機能を有効にする方法についてはプレビューモード を参照してください。