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、コンポーネントへの値のセット、どちらも利用可能な柔軟性が必要である
まとめ
以上が fetch と asyncData の違いです。どちらがどちらより優れているというよりは、設計方針によって使い分けるのが良さそうです。