【完全版】Nuxt.jsにおけるライフサイクルまとめ(SSR/SPA/SSG/layouts/pages/components別)

はじめに

Nuxtのライフサイクル記事はたくさんありますが、コンポーネント別にまとめてくれている記事がなかったため、自分用に作成しました。よく使うんですが、よく忘れるんですよね、、、。

前提

バージョン

Nuxt.js 2.14.4

補足事項

• nuxtServerInit
  store/index.jsに記述しています。

• beforeEach/afterEach
  pluginsにファイルを作成して、nuxt.config.jsで読み込んでいます。

• fetch
  fetchは、公式推奨のcontextなし(引数なし)と非推奨のcontextあり(引数あり)の2種類があります。その同時実行はできませんが、流れをわかりやすくするために「fetch(有)」と「fetch(無)」という表記で両方記載しています。

• computed
  各コンポーネント内のtemplateで呼び出した場合のタイミングを記載しています。

• SSR/SPA/SSG(静的)【2020/11/1追加】
  各モードは、nuxt.config.jsに以下を記載。
  ※SSGは下記記載しないと動作が変わるので注意。
  SSRモード： ssr: true (旧mode: 'universal')
  SPAモード：ssr: false (旧mode: 'spa')
  SSGモード：ssr:true, target: 'static

• $nextTick【2021/4/13追記】
  コンポーネントのマウントが完了したときに実行されます。

• コンポーネント【2021/4/13追記】
  コンポーネントは全て同期呼び出しを想定しています。
  非同期(<lazy-demo />や() => import(./components/demo.vue))でコンポーネントを呼び出し場合は、順番が変わるのでご注意ください。その他の項目に例を記載しています。

全体の流れ

以下のように分けてライフサイクルをまとめます。

• 初回アクセス時
  • SSRモード
  • SPAモード
  • SSGモード
• データ更新時
  • SSR/SPA/SSGモード
• ページ遷移時
  • SSR/SPAモード
  • SSGモード

初回アクセス時

SSRモード

初回アクセス時にサーバーサイドとクライアントサイドでそれぞれ1回ずつ実行されます。

■サーバーサイド

1. plugins【nuxt.config.js】
2. beforeEach【plugins:nuxt.config.js】
3. afterEach【plugins:nuxt.config.js】
4. nuxtServerInit【store】
5. middleware【nuxt.config.js】
6. middleware【layouts】
7. middleware【pages】
8. validate【pages】
9. asyncData【pages】
10. fetch(有)【pages】
11. beforeCreate【layouts】
12. data【layouts】
13. created【layouts】
14. fetch(無)【layouts】
15. computed【layouts】
16. beforeCreate【pages】
17. data【pages】
18. created【pages】
19. fetch(無)【pages】
20. computed【pages】
21. beforeCreate【component】
22. data【component】
23. created【component】
24. fetch(無)【component】
25. computed【component】

■クライアントサイド

1. plugin【nuxt.config.js】
2. beforeEach【plugin:nuxt.config.js】
3. afterEach【plugin:nuxt.config.js】
4. beforeCreate【layouts】
5. data【layouts】
6. created【layouts】
7. beforeMount【layouts】
8. computed【layouts】
9. beforeCreate【pages】
10. data【pages】
11. created【pages】
12. beforeMount【pages】
13. computed【pages】
14. beforeCreate【components】
15. data【components】
16. created【components】
17. beforeMount【components】
18. computed【components】
19. mounted【components】
20. mounted【pages】
21. mounted【layouts】
22. $nextTick【components】
23. $nextTick【pages】
24. $nextTick【layouts】

SPAモード

初回アクセス時にクライアントサイドで1回実行されます。

■クライアントサイド

1. plugin【nuxt.config.js】
2. beforeEach【plugin:nuxt.config.js】
3. afterEach【plugin:nuxt.config.js】
4. middleware【nuxt.config.js】
5. middleware【layouts】
6. middleware【pages】
7. validate【pages】
8. asyncData【pages】
9. fetch(有)【pages】
10. beforeCreate【layouts】
11. data【layouts】
12. created【layouts】
13. beforeMount【layouts】
14. fetch(無)【layouts】
15. computed【layouts】
16. beforeCreate【pages】
17. data【pages】
18. created【pages】
19. beforeMount【pages】
20. fetch(無)【pages】
21. computed【pages】
22. beforeCreate【components】
23. data【components】
24. created【components】
25. beforeMount【components】
26. fetch(無)【components】
27. computed【components】
28. mounted【components】
29. mounted【pages】
30. mounted【layouts】
31. $nextTick【components】
32. $nextTick【pages】
33. $nextTick【layouts】

SSGモード

generate時に、SSRモードのサーバーサイドでのライフサイクルが実行されて静的データが生成されます。その生成されたコードに初回アクセス以下のライフサイクルがクライアントサイドで実行されます。

■クライアントサイド

1. plugin【nuxt.config.js】
2. beforeEach【plugin:nuxt.config.js】
3. afterEach【plugin:nuxt.config.js】
4. beforeCreate【layouts】
5. data【layouts】
6. created【layouts】
7. beforeMount【layouts】
8. computed【layouts】
9. beforeCreate【pages】
10. data【pages】
11. created【pages】
12. beforeMount【pages】
13. computed【pages】
14. beforeCreate【components】
15. data【components】
16. created【components】
17. beforeMount【components】
18. computed【components】
19. mounted【components】
20. mounted【pages】
21. mounted【layouts】
22. $nextTick【components】
23. $nextTick【pages】
24. $nextTick【layouts】

データ更新時

ページ内のデータが変更されるときに実行されます。SSR/SPA/SSGモード、どのモードでも全て同じライフサイクルです。

■クライアントサイド

1. beforeUpdate【layouts】
2. beforeUpdate【pages】
3. beforeUpdate【components】
4. updated【components】
5. updated【pages】
6. updated【layouts】

ページ遷移時

SSRとSPAモードは同じライフサイクルで、SSGだけ若干異なります。違いは、asyncDataとfetchがあるかないかだけです。
※layoutは変更したときのみ

SSR/SPAモード

■クライアントサイド

1. beforeEach【plugin:nuxt.config.js】
2. middleware【nuxt.config.js】
3. middleware【layouts】
4. middleware【pages】
5. validate【pages】
6. asyncData【pages】
7. fetch(有)【pages】
8. afterEach【plugin:nuxt.config.js】
9. beforeDestroy【遷移元layouts】
10. beforeDestroy【遷移元pages】
11. beforeDestroy【遷移元components】
12. destroyed【遷移元components】
13. destroyed【遷移元pages】
14. destroyed【遷移元layouts】
15. beforeCreate【layouts】
16. data【layouts】
17. created【layouts】
18. beforeMount【layouts】
19. fetch(無)【layouts】
20. computed【layouts】
21. beforeCreate【pages】
22. data【pages】
23. created【pages】
24. beforeMount【pages】
25. fetch(無)【pages】
26. computed【pages】
27. beforeCreate【components】
28. data【components】
29. created【components】
30. beforeMount【components】
31. fetch(無)【components】
32. computed【components】
33. mounted【components】
34. mounted【pages】
35. mounted【layouts】
36. $nextTick【components】
37. $nextTick【pages】
38. $nextTick【layouts】

SSGモード

■クライアントサイド

1. beforeEach【plugin:nuxt.config.js】
2. middleware【nuxt.config.js】
3. middleware【layouts】
4. middleware【pages】
5. validate【pages】
6. afterEach【plugin:nuxt.config.js】
7. beforeDestroy【遷移元layouts】
8. beforeDestroy【遷移元pages】
9. beforeDestroy【遷移元components】
10. destroyed【遷移元components】
11. destroyed【遷移元pages】
12. destroyed【遷移元layouts】
13. beforeCreate【layouts】
14. beforeCreate【layouts】
15. created【layouts】
16. beforeMount【layouts】
17. computed【layouts】
18. beforeCreate【pages】
19. beforeCreate【pages】
20. created【pages】
21. beforeMount【pages】
22. computed【pages】
23. beforeCreate【components】
24. beforeCreate【components】
25. created【components】
26. beforeMount【components】
27. computed【components】
28. mounted【components】
29. mounted【pages】
30. mounted【layouts】
31. $nextTick【components】
32. $nextTick【pages】
33. $nextTick【layouts】

ファイル別の利用可能ライフサイクル

あれ、これってここで記述できるんだっけ？ってことが度々あるので、こちらもまとめました。

layouts

• middleware
• beforeCreate
• data
• created
• fetch(無)
• beforeMount
• computed
• mounted
• $nextTick
• beforeUpdate
• update
• beforeDestroy
• destroy

pages

• middleware
• validate
• asyncData
• fetch(有)
• beforeCreate
• data
• created
• fetch(無)
• beforeMount
• computed
• mounted
• $nextTick
• beforeUpdate
• update
• beforeDestroy
• destroy

component

middrewareが呼び出せないこと以外は、基本的にlayoutsと同じです。

• beforeCreate
• data
• created
• fetch(無)
• beforeMount
• computed
• mounted
• $nextTick
• beforeUpdate
• update
• beforeDestroy
• destroy

その他

今回整理する中で、明確になったことまとめ。

fetchの仕様変更

私の知っているfetchいつの間にか非推奨になっていた、、、
まぁ確かに、asyncDataで事足りてはいましたからね。

2020/9/10時点では、context有fetchだと、asyncDataの次に呼ばれ、なしfetchだと、SSRではcreatedの次、CSRではbeforeMountedの次に呼ばれます。

ですので、context無の場合だと、thisを使ってdataやcomputedにアクセスができるんですよね。どんな場合に利用するのかは、下記の記事がわかりやすくまとめてくれています。

Nuxt2.12.0で新しくなったfetchについて

computedの実行されるタイミング

• computedに記載しただけでは実行されない。(template内や関数などで呼ぶ必要がある)
• template内での呼び出しの場合は、beforeMountとmountedの間で実行される。
• ライフサイクルから呼び出しができるのは、beforeCreate以降。

同一レイアウトのページ遷移時はmiddlewareのみ実行

同一レイアウトの場合、ページ遷移のたびに実行されるのはmiddlewareのみで、それ以外はレイアウトが切り替わるまで実行されません。

dataにアクセスできるのはcreated以降

beforeCreateではアクセスできませんでした。地味な発見。

旧静的化モードのライフサイクル(Nuxtのバージョン2.13以前)

基本的にSSRモードでgenerateする形になると思いますので、generate時にSSRのライフサイクルが実行されます。そこで生成されたソースにアクセスする形になりますが、その後(CSRとページ遷移)は全く一緒のライフサイクルになります。(ページ遷移でasyncDataやfetchは呼ばれます。)

beforeEachとafterEachの存在

今回、この2つの存在を初めて知りました。
私は、ページ遷移の共通処理はいつもmiddlewareでやってるんですが、より細かい事をしようと思ったときに活躍してくれそうな予感、、、

Nuxt.jsでページ遷移ごとに共通の処理を実行する方法

pluginsは初回に1回しか呼ばれない

いや、これ当たり前といえば当たり前なことなんですが、改めて顕在化されました。

1回だけ処理したい系は基本ここなんですよね。

例えば、SPAモードでnuxtServerInit的なことをしたい場合も、以下の記事のようにpluginsを使って実装します。

[Nuxt.js]nuxtServerInitがSPAモードでは使えないので代替のアクションを用意する

最新の静的モードではfetchとasyncDataは呼ばれない

Nuxtのv2.13.0から静的サイト生成がバージョンアップしました。
静的サイトでリアルタイムな更新はないにもかかわらず、APIでDBを無駄に取得してしまう問題に結構な方が不満を持っていたようで、この度の更新で、fetchとasyncDataが呼ばれなくなったようです。細々したところが便利になっていますので、また別記事でまとめたいと思います。

$nextTickの実行タイミング【2021/4/13追記】

マウント完了後に実行したい時につかっている$nextTick。なんとなく、全コンポーネントのマウント処理が終わった最後に実行されるものと思っていましたが、基本的にはコンポーネント単位での実行でした。

コンポーネントを非同期呼び出し【2021/4/13追記】

コンポーネントを非同期呼び出しした場合、クライアントサイドの処理順番が変わります。
その他のマウントがすべて完了後($nextTick実行後)に、非同期呼び出しのコンポーネントに記載されているbeforeCreateが初めて実行されます。
サーバーサイドの処理は同期/非同期関係なく同じ順番で実行されます。

例：SSGモード/クライアントサイド/初回アクセス

1. plugin【nuxt.config.js】
2. beforeEach【plugin:nuxt.config.js】
3. afterEach【plugin:nuxt.config.js】
4. beforeCreate【layouts】
5. created【layouts】
6. beforeMount【layouts】
7. computed【layouts】
8. beforeCreate【pages】
9. data【pages】
10. created【pages】
11. beforeMount【pages】
12. computed【pages】
13. mounted【pages】
14. mounted【layouts】
15. $nextTick【pages】
16. $nextTick【layouts】
17. beforeUpdate【pages】 <= ここでpagesの更新前処理
18. beforeCreate【components】<= ここで非同期呼び出ししたコンポーネントの処理
19. created【components】
20. data【components】
21. beforeMount【components】
22. computed【components】
23. mounted【components】
24. updated【pages】<= ここでpagesの更新完了処理
25. $nextTick【components】

mixinsで呼び出した場合のライフサイクル【2021/7/14追記】

mixinsで挿入した場合は、基本は呼び出したコンポーネントの各ライフサイクルの先に呼ばれます。dataだけ呼び出しサイクル順が違うので注意が必要です。

例：SSGモード/クライアントサイド/初回アクセス、pagesでmixinsを呼び出している場合

1. plugin【nuxt.config.js】
2. beforeEach【plugin:nuxt.config.js】
3. afterEach【plugin:nuxt.config.js】
4. beforeCreate【layouts】
5. created【layouts】
6. beforeMount【layouts】
7. computed【layouts】
8. beforeCreate【mixins】
9. beforeCreate【pages】
10. data【pages】<= dataだけ呼び出し元が先
11. data【mixins】
12. created【mixins】
13. created【pages】
14. beforeMount【mixins】
15. beforeMount【pages】
16. computed【pages】
17. mounted【mixins】
18. mounted【pages】
19. mounted【layouts】
20. $nextTick【pages】
21. $nextTick【layouts】

おわりに

もし違いがあれば、ご指摘いただけると幸いです。

参考

Nuxt.js(Vue.js)SSRのライフサイクルを完全に理解したい(wip)
Vue.js と Nuxt.js のライフサイクル早引きメモ
Nuxt.jsにおけるサーバーサイドレンダリングの挙動とライフサイクル
Nuxt 2.13で導入されたFull Static Generationを試してみる