Nuxt.jsを使用するうちに、 asyncData と fetch の違いが気になって調べてみたので、その備忘録を記事にします。

2020/4/07追記: Nuxt 2.12 より fetch の動作が変更されています。以降に記載している内容はNuxt 2.11 以前のものを対象しているのでご注意ください。

asyncData と fetch の共通点

asyncData と fetch は、両者ともページコンポーネントの初期化前に実行される関数です。これはサーバーサイド、もしくはクライアントサイドでのナビゲーションが発生した際に呼び出されます。どちらも第１引数に context を取るため、クエリパラメータなどの値にアクセスして、それらの値に応じた処理を行うことが可能です。また、これらの処理はコンポーネントのインスタンスが生成される前に行われるため、 this を通してコンポーネントのインスタンスにアクセスすることはできません。

何が違うのか

それでは両者の違いについて確認してみましょう。

asyncData

asyncData は、コンポーネントへデータをセットすることを目的として使用されます。そのため、 asyncData によって返された値はコンポーネントのテンプレートからアクセス可能であり、以下のように利用することができます。

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

(Nuxt.js公式サイトより引用)

fetch

fetch は、Vuex storeにデータを格納することを目的として使用されます。そのため asyncData と違ってコンポーネントに値をセットすることはできません。 fetch は以下のように利用することができます。

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
</script>

(Nuxt.js公式サイトより引用)

どう使い分けるか

以下のような方針で fetch と asyncData を使い分けるのが良さそうです。

以下の条件に該当する場合は fetch

Vuexをセントラルレポジトリとして使用している
アプリケーション全体において、Vuex storeを通じてデータを取得している

以下の条件に該当する場合は asyncData

Vuexをセントラルレポジトリとして使用している
初期化前に非同期処理によってコンポーネントに値をセットすることがある
特定のルートで取り出されたデータは、1つのコンポーネントでのみ使用される
Vuex store、コンポーネントへの値のセット、どちらも利用可能な柔軟性が必要である

(Stackoverflowの回答より引用)

まとめ

以上が fetch と asyncData の違いです。どちらがどちらより優れているというよりは、設計方針によって使い分けるのが良さそうです。

Nuxt.jsのasyncDataとfetchは何が違うのか

asyncData と fetch の共通点

何が違うのか

asyncData

fetch

どう使い分けるか

まとめ