Nuxt ライフサイクル

understanding-nuxt-2-12-lifecycle-hooks

どのツールを使う場合でも、ツールが内部でどのように機能するかを理解すると常に自信が持てるようになります。同じことが Nuxt.js にも当てはまります。この章の目的は、フレームワークのさまざまな部分とそれらの実行順序、およびどのように連携するかについての概要を説明することです。

Nuxt.js ライフサイクルはアプリケーションがバンドルされ、チャンク化され、縮小されるビルドフェーズの後に何が起こるかを説明します。このフェーズの後に何が起こるかは、サーバーサイドのレンダリングが有効になっているかどうかによって異なります。有効になっている場合は、選択したサーバーサイドレンダリングのタイプによってさらに異なります:

動的な SSR(nuxt start

または静的サイト生成(nuxt generate)。

ライフサイクル

サーバー

SSR の場合、これらのステップはアプリケーションへの最初のリクエストごとに実行されます。

  • サーバーを起動します(nuxt start

静的サイトの生成を行う場合、サーバーステップはビルド時にのみ実行されますが、生成されるページごとに 1 回実行されます。

  • 生成処理を開始します(nuxt generate

  • Nuxt フック

  • サーバーミドルウェア

  • サーバーサイドの Nuxt プラグイン

    • nuxt.config.js で定義されている順序
  • nuxtServerInit

    • ストアに事前にデータを詰めるためにサーバーサイドでのみ呼び出される Vuex アクション
    • 第 1 引数は Vuex context、第 2 引数は Nuxt.js context です
      • ここから他のアクションをディスパッチします → サーバーサイドの後続ストアアクションの「エントリポイント」のみです
    • store/index.js でのみ定義できます
  • ミドルウェア

    • グローバルミドルウェア
    • レイアウトミドルウェア
    • ルートミドルウェア
  • asyncData

  • beforeCreate(Vue ライフサイクルメソッド)

  • created(Vue ライフサイクルメソッド)

  • あたらしい fetch(上から下、ノード = 並列)

  • 状態のシリアライズ(render:routeContext Nuxt.js フック)

  • HTML レンダリングの開始(render:route Nuxt.js フック)

  • render:routeDone(HTML がブラウザに送信された際のフック)

  • generate:before Nuxt.js フック

  • HTML ファイルの生成

    • 完全な静的生成
      • 例えば静的ペイロードが抽出された場合
    • generate:page(HTML が編集可能)
    • generate:routeCreated(ルートが生成されます)
  • generate:done(すべての HTML ファイルが生成された際)

クライアント

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

  • HTML を受け取り
  • アセットのロード(例えば JavaScript)
  • Vue ハイドレーション
  • ミドルウェア
    • グローバルミドルウェア
    • レイアウトミドルウェア
    • ルートミドルウェア
  • クライアントサイドの Nuxt.js プラグイン
    • nuxt.config.js で定義されている順序
  • asyncData(ブロッキング)
  • beforeCreate(Vue ライフサイクルメソッド)
  • created(Vue ライフサイクルメソッド)
  • あたらしい fetch(上から下、ノード = 並列)(ノンブロッキング)
  • beforeMount(Vue ライフサイクルメソッド)
  • mounted(Vue ライフサイクルメソッド)

クライアントの章と同様に <NuxtLink> を介して遷移する場合だけすべてのステップがブラウザで発生します。さらにすべてのブロッキングタスクが実行されるまでページコンテントは表示されません。

<NuxtLink> のドキュメントで詳細を確認してください。

  • ミドルウェア(ブロッキング)
    • グローバルミドルウェア
    • レイアウトミドルウェア
    • ルートミドルウェア
  • asyncData(ブロッキング)
  • asyncData(ブロッキングまたは完全静的なペイロードをロードします)
  • beforeCreate & created(Vue ライフサイクルメソッド)
  • fetch(ノンブロッキング)
  • beforeMount & mounted

このあとは

レンダリングモードのドキュメントを参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する