この章の目的は、フレームワークの異なる部分、それらの実行順序、およびそれらがどのように連携するかについての概要を提供することです。

サーバー

サーバーでは、アプリケーションへの初回リクエストごとに次のステップが実行されます。

ステップ 1: Nitro サーバーと Nitro プラグインのセットアップ（1回のみ）

Nuxt は、モダンなサーバーエンジンである Nitro によって動作しています。

Nitro が起動すると、/server/plugins ディレクトリ内のプラグインを初期化して実行します。これらのプラグインは以下を行うことができます：

• アプリケーション全体のエラーをキャプチャして処理する。
• Nitro がシャットダウンする際に実行されるフックを登録する。
• レスポンスの修正など、リクエストライフサイクルイベントのフックを登録する。

ステップ 2: Nitro サーバーミドルウェア

Nitro サーバーを初期化した後、server/middleware/ 内のミドルウェアが各リクエストに対して実行されます。ミドルウェアは、認証、ログ記録、リクエストの変換などのタスクに使用できます。

ステップ 3: Nuxt の初期化と Nuxt アプリプラグインの実行

まず、Vue と Nuxt のインスタンスが作成されます。その後、Nuxt はサーバープラグインを実行します。これには以下が含まれます：

• Vue Router や unhead などの組み込みプラグイン。
• plugins/ ディレクトリにあるカスタムプラグイン（例：myPlugin.ts）や .server サフィックスを持つプラグイン（例：myServerPlugin.server.ts）。

プラグインは特定の順序で実行され、互いに依存関係を持つことがあります。実行順序や並行性を含む詳細については、プラグインのドキュメントを参照してください。

ステップ 4: ルートのバリデーション

プラグインの初期化後、ミドルウェアを実行する前に、definePageMeta 関数で定義されている場合、Nuxt は validate メソッドを呼び出します。validate メソッドは同期または非同期であり、動的ルートパラメータのバリデーションによく使用されます。

• パラメータが有効な場合、validate 関数は true を返すべきです。
• バリデーションが失敗した場合、リクエストを終了するために false または statusCode や statusMessage を含むオブジェクトを返すべきです。

詳細については、ルートバリデーションのドキュメントを参照してください。

ステップ 5: Nuxt アプリミドルウェアの実行

ミドルウェアを使用すると、特定のルートに移動する前にコードを実行できます。認証、リダイレクト、ログ記録などのタスクによく使用されます。

Nuxt には、次の3種類のミドルウェアがあります：

• グローバルルートミドルウェア
• 名前付きルートミドルウェア
• 匿名（またはインライン）ルートミドルウェア

Nuxt は、アプリケーションへの初回アクセス時とルートナビゲーションの前に毎回グローバルミドルウェアを自動的に実行します。名前付きおよび匿名ミドルウェアは、対応するページコンポーネントで定義されたページ（ルート）メタのミドルウェアプロパティで指定されたルートでのみ実行されます。

各タイプの詳細と例については、ミドルウェアのドキュメントを参照してください。

サーバー上でのリダイレクトは、Location: ヘッダーがブラウザに送信され、新しい場所への新しいリクエストが行われることになります。この際、アプリケーションの状態はクッキーに保存されない限りリセットされます。

ステップ 6: ページとコンポーネントのレンダリング

このステップでは、Nuxt がページとそのコンポーネントをレンダリングし、useFetch や useAsyncData を使用して必要なデータを取得します。サーバー上では動的な更新や DOM 操作が行われないため、onBeforeMount、onMounted などの Vue ライフサイクルフックは SSR 中には実行されません。

デフォルトでは、Vue はパフォーマンス向上のために SSR 中の依存関係追跡を一時停止します。

ステップ 7: HTML 出力の生成

必要なデータがすべて取得され、コンポーネントがレンダリングされた後、Nuxt は unhead の設定とレンダリングされたコンポーネントを組み合わせて完全な HTML ドキュメントを生成します。この HTML と関連データがクライアントに送信され、SSR プロセスが完了します。

クライアント（ブラウザ）

このライフサイクルの部分は、選択した Nuxt モードに関係なく、ブラウザで完全に実行されます。

ステップ 1: Nuxt の初期化と Nuxt アプリプラグインの実行

このステップはサーバーサイドの実行と似ており、組み込みプラグインとカスタムプラグインの両方が含まれます。

plugins/ ディレクトリ内のカスタムプラグイン（例：myPlugin.ts）や .client サフィックスを持つプラグイン（例：myClientPlugin.client.ts）はクライアントサイドで実行されます。

ステップ 2: ルートのバリデーション

このステップはサーバーサイドの実行と同じで、definePageMeta 関数で定義されている場合、validate メソッドが含まれます。

ステップ 3: Nuxt アプリミドルウェアの実行

Nuxt ミドルウェアはサーバーとクライアントの両方で実行されます。特定の環境でコードを実行したい場合は、クライアント用に import.meta.client、サーバー用に import.meta.server を使用して分割することを検討してください。

ステップ 4: Vue アプリケーションのマウントとハイドレーション

app.mount('#__nuxt') を呼び出すことで、Vue アプリケーションが DOM にマウントされます。アプリケーションが SSR または SSG モードを使用している場合、Vue はクライアントサイドアプリケーションをインタラクティブにするためにハイドレーションステップを実行します。ハイドレーション中、Vue はアプリケーションを再作成し（サーバーコンポーネントを除く）、各コンポーネントを対応する DOM ノードにマッチさせ、DOM イベントリスナーをアタッチします。

適切なハイドレーションを確保するためには、サーバーとクライアントのデータの一貫性を維持することが重要です。API リクエストには、useAsyncData、useFetch、または他の SSR フレンドリーなコンポーザブルを使用することをお勧めします。これらの方法は、サーバーサイドで取得したデータがハイドレーション中に再利用され、リクエストの繰り返しを避けることを保証します。新しいリクエストはハイドレーション後にのみトリガーされ、ハイドレーションエラーを防ぎます。

ステップ 5: Vue ライフサイクル

サーバーとは異なり、ブラウザでは完全な Vue ライフサイクル が実行されます。

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useAuthUser()
  if (!user.value && to.path !== '/login') {
    return navigateTo('/login')
  }
})

// plugins/apiClient.ts
export default defineNuxtPlugin(() => {
  const apiClient = $fetch.create({
    baseURL: 'https://api.example.com'
  })
  return {
    provide: {
      apiClient
    }
  }
})

// plugins/analytics.client.ts
export default defineNuxtPlugin(() => {
  if (window.ga) {
    window.ga('send', 'pageview')
  }
})