Nuxt ライフサイクル
この章の目的は、フレームワークのさまざまな部分、その実行順序、およびそれらがどのように連携するかについて、ハイレベルな概要を提供することです。
サーバー
サーバーでは、アプリケーションへの最初のすべてのリクエストに対して、以下の手順が実行されます。
ステップ 1: Nitro サーバーと Nitro プラグインのセットアップ (1 回のみ)
Nuxt はNitro最新のサーバーエンジン、によって強化されています。
Nitro が起動すると、/server/plugins ディレクトリ下のプラグインを初期化し、実行します。これらのプラグインは以下を行うことができます。
- アプリケーション全体のエラーを捕捉して処理する。
- Nitro シャットダウン時に実行されるフックを登録する。
- レスポンスの変更など、リクエストライフサイクルイベントのフックを登録する。
ステップ 2: Nitro サーバーミドルウェア
Nitro サーバーの初期化後、server/middleware/ ディレクトリ下のミドルウェアがすべてのリクエストに対して実行されます。ミドルウェアは認証、ロギング、リクエスト変換などのタスクに使用できます。
ステップ 3: Nuxt の初期化と Nuxt アプリプラグインの実行
まず Vue と Nuxt のインスタンスが作成されます。その後、Nuxt はサーバープラグインを実行します。これには以下が含まれます。
- Vue Router や
unheadなどの組み込みプラグイン。 app/plugins/ディレクトリにあるカスタムプラグイン。これにはサフィックスなしのプラグイン (例:myPlugin.ts) や.serverサフィックスを持つプラグイン (例:myServerPlugin.server.ts) が含まれます。
プラグインは特定の順序で実行され、相互に依存関係を持つ場合があります。実行順序や並列処理を含む詳細については、「プラグインのドキュメント」を参照してください。
app:created フックを呼び出します。これは追加のロジックを実行するために使用できます。ステップ 4: ルート検証
プラグインの初期化後、ミドルウェアの実行前に、Nuxt は definePageMeta 関数で validate メソッドが定義されていればそれを呼び出します。同期または非同期で実行できる validate メソッドは、動的ルートパラメータの検証によく使用されます。
- パラメータが有効な場合、
validate関数はtrueを返すべきです。 - 検証に失敗した場合は、
falseまたはstatusCodeおよび/またはstatusMessageを含むオブジェクトを返して、リクエストを終了させるべきです。
詳細については、「ルート検証のドキュメント」を参照してください。
ステップ 5: Nuxt アプリミドルウェアの実行
ミドルウェアを使用すると、特定のルートにナビゲートする前にコードを実行できます。これは、認証、リダイレクト、ロギングなどのタスクによく使用されます。
Nuxt には 3 種類のミドルウェアがあります。
- グローバルルートミドルウェア
- 名前付きルートミドルウェア
- 匿名（またはインライン）ルートミドルウェア
Nuxt は、最初のページロード時（サーバーとクライアントの両方）にすべてのグローバルミドルウェアを実行し、その後、クライアントサイドナビゲーションの前に再度実行します。名前付きおよび匿名ミドルウェアは、対応するページコンポーネントで定義されたページ（ルート）メタのミドルウェアプロパティで指定されたルートでのみ実行されます。
各タイプとその例の詳細については、「ミドルウェアのドキュメント」を参照してください。
サーバー上でのリダイレクトは、ブラウザに Location: ヘッダーが送信されることになります。ブラウザはその後、この新しい場所へ新しいリクエストを行います。これが発生すると、Cookie に保持されている場合を除き、すべてのアプリケーションの状態がリセットされます。
ステップ 6: ページとコンポーネントのレンダリング
Nuxt はこのステップで、ページとそのコンポーネントをレンダリングし、useFetch と useAsyncData を使用して必要なデータを取得します。サーバー上では動的な更新も DOM 操作も行われないため、onBeforeMount、onMounted、およびそれに続く Vue ライフサイクルフックは SSR 中には実行されません。
デフォルトでは、Vue はパフォーマンス向上のため、SSR 中の依存関係追跡を一時停止します。
<script setup> のルートスコープでクリーンアップが必要な副作用を生じるコードは避けるべきです。そのような副作用の例としては、setInterval を使用したタイマーの設定があります。クライアントサイドのみのコードでは、タイマーを設定し、onBeforeUnmount または onUnmounted で破棄する場合があります。しかし、アンマウントフックは SSR 中には決して呼び出されないため、タイマーは永久に残ってしまいます。これを避けるには、副作用のあるコードを代わりに onMounted に移動してください。ステップ 7: HTML 出力の生成
必要なデータがすべて取得され、コンポーネントがレンダリングされた後、Nuxt はレンダリングされたコンポーネントと unhead の設定を組み合わせて、完全な HTML ドキュメントを生成します。この HTML は、関連するデータとともにクライアントに送り返され、SSR プロセスが完了します。
app:rendered フックを呼び出します。render:html フックを呼び出します。このフックを使用すると、追加のスクリプトを挿入したり、メタタグを変更したりするなど、生成された HTML を操作できます。クライアント (ブラウザ)
ライフサイクルのこの部分は、どの Nuxt モードを選択したかに関わらず、ブラウザで完全に実行されます。
ステップ 1: Nuxt の初期化と Nuxt アプリプラグインの実行
このステップはサーバーサイドでの実行と同様で、組み込みプラグインとカスタムプラグインの両方が含まれます。
app/plugins/ ディレクトリにあるカスタムプラグインは、サフィックスなしのプラグイン (例: myPlugin.ts) や .client サフィックスを持つプラグイン (例: myClientPlugin.client.ts) など、クライアント側で実行されます。
app:created フックを呼び出します。これは追加のロジックを実行するために使用できます。ステップ 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 フレンドリーなコンポーザブルを使用することをお勧めします。これらのメソッドは、サーバー側でフェッチされたデータがハイドレーション中に再利用され、繰り返しのリクエストが回避されることを保証します。新しいリクエストはハイドレーション後にのみトリガーされるべきであり、ハイドレーションエラーを防ぎます。
app:beforeMount フックを呼び出します。app:mounted フックを呼び出します。ステップ 5: Vue ライフサイクル
サーバーとは異なり、ブラウザは完全なVue ライフサイクル.