Posted at

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

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


asyncData と fetch の共通点

asyncDatafetch は、両者ともページコンポーネントの初期化前に実行される関数です。これはサーバーサイド、もしくはクライアントサイドでのナビゲーションが発生した際に呼び出されます。どちらも第1引数に 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公式サイトより引用)


どう使い分けるか

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

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


  • Vuexをセントラルレポジトリとして使用している

  • アプリケーション全体において、Vuex storeを通じてデータを取得している

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


  • Vuexをセントラルレポジトリとして使用している

  • 初期化前に非同期処理によってコンポーネントに値をセットすることがある

  • 特定のルートで取り出されたデータは、1つのコンポーネントでのみ使用される

  • Vuex store、コンポーネントへの値のセット、どちらも利用可能な柔軟性が必要である

(Stackoverflowの回答より引用)


まとめ

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