Blog ブログ

Nuxt.jsのasyncDataとfetchの違いについて

Nuxt.jsの公式のドキュメントを読んでもいまいちピンと来ないasyncDataメソッドとfetchメソッドの違いについて解説します。

公式ドキュメントにはそれぞれ以下のように記述があります。

・ asyncDataメソッド

asyncData はコンポーネント（ページコンポーネントに限ります）がロードされる前に毎回呼び出されます。サーバーサイドレンダリングや、ユーザーがページを遷移する前にも呼び出されます。そしてこのメソッドは第一引数として context（オブジェクト）を受け取り、context を使ってデータを取得してコンポーネントのデータを返します。

・ fetchメソッド

fetch メソッドが設定されている場合、コンポーネント（ページコンポーネントに限ります）がロードされる前に毎回呼び出されます。サーバーサイドレンダリングや、ページを遷移する前にも呼び出されます。
fetch メソッドは第一引数として context オブジェクトを受け取るので、データを取得し、取得したデータをストアに入れることができます。fetch メソッドを非同期にするためには Promise を返却してください。そうすれば nuxt.js はコンポーネントがレンダリングされる前に promise が解決されるまで待機します。

説明から分かる通り、両メソッドの機能で共通しているのは以下の点です。

  • ページコンポーネントがロードされる前に呼び出される。
  • サーバサイドレンダリング、ページ遷移前にも呼び出される。
  • 引数にcontextを受け取る。

asyncDataとfetchの違いは

では結局asyncDataとfetchの違いはなにかというと、

  • asyncDataは、取得したデータをページコンポーネント内で使用する場合に使うメソッド。
  • fetchは取得したデータをvuexストアに入れる場合に使うメソッド。

つまり、両メソッドには機能的にはほぼ違いがなく、取得したデータの使用目的によって使い分けるべきであるということです。

具体的には、ページ読み込み時にstoreのdispatchを呼び出して、vuexにデータをセットする場合にはfetchメソッドを使うべきだということです。
それに対して、ページ読み込み時に取得したデータを、そのままそのページのプロパティとして使うような場合はasyncDataを使うべきです。

本当にそうか

この説明を読んでも本当にそうなのか？という気持ちになると思います。私はそうでした。
Nuxt.jsのGithub上や、公式Twitter上でも同じような議論がありますので、それらを読むことで納得していただければと思います。

どちらの議論でも、readabilityのために使い分けるという回答がされています。
どっちのメソッド使っても同等の動作をする実装は可能だとしても、可読性のために使い分けましょう。

  • twitterでシェア
  • facebookでシェア

制作や技術的なご相談など
お気軽にお問い合わせください

お問い合わせ