asyncData / fetchはどちらもライフサイクルのタイミングが同じなので混同されがちですが、しっかりと使い分ける必要があります！！

使用方法をしっかり理解しましょう。

説明するにもNuxtは公式ドキュメントが綺麗にできすぎていてだいたいのことはドキュメントを見ればわかります。困ったときはドキュメントを見ましょう。

fetchの説明は以下のようになっています。

fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては asyncData メソッドとよく似ています。

公式ですらasyncDataと似ているといっています笑。大事なのは以下の部分

fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。

そして、asyncDataはこのような説明になっています。

サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。

つまり、fetchとasyncData明確な違いは、データをどこにセットするかで使い分けます。

これだけ覚えておけばだいたい大丈夫です笑。

次は、それぞれの処理の特徴を細かく見ていきましょう。

fetch

fetchが呼び出されるタイミング

サーバーサイド

Nuxt アプリケーションへの最初のリクエスト時に１度だけ呼び出されます

クライアントサイド

他のルートへ移動したときに呼び出されます。

※使用する時の注意

また、ストアアクションを呼び出す場合は、fetch 内の store.dispatch を使用する必要があります。
その際、async/awaitを用いてアクションの終了を待つようにしましょう。

front.vue

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

index.js

// ...
export const actions = {
  async GET_STARS ({ commit }) {
    const { data } = await axios.get('http://my-api/stars')
    commit('SET_STARS', data)
  }
}

asyncData

サーバーサイドでデータを取得し、それをレンダリングしたいことがあるでしょう。Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。

asyncDataが呼び出されるタイミング

ページコンポーネントがロードされる前に毎回呼び出されます。
サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。

第一引数として context（オブジェクト）を受け取り、context を使ってデータを取得してコンポーネントのデータを返します。

asyncData の結果は data とマージされます。

export default {
  data () {
    return { project: 'default' }
  },
  asyncData (context) {
    return { project: 'nuxt' }
  }
}

説明はこれで以上です。

asyncData と fetchの使用方法の違いはわかりましたか？

データをどこにセットするかを意識すれば、迷うことはなくなると思います。

それでは素敵なNUXTライフを〜。