nuxt spa, ssg, ssrそれぞれのasyncData, fetchのタイミング

Nuxtのサーバーサイドでデータ取得のために使用するasyncDataとfetchがspa, ssg, ssrそれぞれのモードでどういうタイミングで呼ばれるのか調査した。

Nuxt 2.14.0

API: asyncData メソッド - NuxtJS
The fetch Method - NuxtJS

spa

nuxt.config.js

{
  mode: 'spa',
  target: 'static',
}

$ nuxt generate
$ nuxt start

spaモードでasyncDataもfetchも呼ばれないということはなく、クライアントサイドでちゃんと呼ばれる。

【PageAにアクセス】
Client PageA asyncData
Client PageA beforeCreate
Client PageA data
Client PageA created
Client PageA beforeMount
Client PageA fetch
Client PageA mounted

【nuxt-linkでPageBにアクセス】
Client PageB asyncData
Client PageA beforeDestroy
Client PageA destroyed
Client PageB beforeCreate
Client PageB data
Client PageB created
Client PageB beforeMount
Client PageB fetch
Client PageB mounted

ssg

nuxt.config.js

{
  mode: 'universal',
  target: 'static',
}

$ nuxt generate
$ nuxt start

asyncDataとfetchはgenerate時に呼ばれ、クライアントサイドでは呼ばれない。

【generate】
Server PageA asyncData
Server PageB asyncData
Server PageA beforeCreate
Server PageA data
Server PageA created
Server PageA fetch
Server PageB beforeCreate
Server PageB data
Server PageB created
Server PageB fetch

【PageAにアクセス】
Client PageA beforeCreate
Client PageA data
Client PageA created
Client PageA beforeMount
Client PageA mounted

【nuxt-linkでPageBにアクセス】
Client PageA beforeDestroy
Client PageA destroyed
Client PageB beforeCreate
Client PageB data
Client PageB created
Client PageB beforeMount
Client PageB mounted

ssr

nuxt.config.js

{
  mode: 'universal',
  target: 'server',
}

$ nuxt build
$ nuxt start

直接アクセスするとサーバーサイドでasyncDataとfetchが呼ばれる。
nuxt-linkでアクセスすると、クライアントサイドでasyncDataとfetchが呼ばれる。

【PageAにアクセス】
Server PageA asyncData
Server PageA beforeCreate
Server PageA data
Server PageA created
Server PageA fetch
Client PageA beforeCreate
Client PageA data
Client PageA created
Client PageA beforeMount
Client PageA mounted

【nuxt-linkでPageBにアクセス】
Client PageB asyncData
Client PageA beforeDestroy
Client PageA destroyed
Client PageB beforeCreate
Client PageB data
Client PageB created
Client PageB beforeMount
Client PageB fetch
Client PageB mounted