NuxtにはasyncDataがあります。Vueはdataのみが使えますが、NuxtはasyncDataとdataどちらも使えます。
では、asyncDataとdataはNuxtでどう使い分ければ良いのか？
これが疑問でしたので、asyncDataとdataの違いについて調査してみました。結論から言うと、私はasyncDataのみを使い、mountedでwindowやdocumentにアクセスする方針に決めました。
なおfetchはasyncDataと似た挙動をしますが、コンポーネントに値をセットすることはできません。fetchはVuexに値をセットする目的で使用されます。
以下は私の調査結果と、考察になります。間違いがあればご指摘をお願いいたします。
asyncDataとdataのに違いについて調査してみた
async/awaitについて調査
まずはなぜasyncDataが必要なのかを調べるために、dataをasync functionにして非同期処理を含めてみました。
すると、dataが実行されていることは確認できましたが、コンポーネントに値がセットされていませんでした。
dataはawaitなしで実行され、asyncDataはawaitつきで実行されているようです。
今回のケースでは、dataはPeomiseを返していたため、コンポーネントに値がセットされていなかったということです。
SSR時の実行順序について調査
サーバーでasyncDataの呼び出し→
サーバーでdataの呼び出し→
クライアントでdataの呼び出し
となりました。クライアントでasyncDataは実行されないので、windowやdocumentにアクセスできるのはdataだけとなります。(サーバーでアクセスしないように、process.clientがtrueかチェックする必要あり)
SSRする初回アクセス時に、windowやdocumentにアクセスできるのがdataの唯一のメリットといえそうです。
SPAページ遷移時の実行順序について
クライアントでasyncDataの呼び出し→
クライアントでdataの呼び出し
となりました。
それぞれがreturnしたオブジェクトの上書きについて
コンポーネントへ値をセットすることに関しては、asyncDataの値が優先されます。
ややこしいことにdataの方が後に実行されるのですが、同じプロパティについてはasyncDataの値が優先されます。
結論
**asyncDataだけで良さそうです。**繰り返しになりますが私はasyncDataのみを使い、mountedでwindowやdocumentにアクセスする方針に決めました。
好みの問題ですが、非同期処理のみをasyncDataに書いて、それ以外をdataにするセマンティックを重視した方針もあるかと思います。
asyncDataとdataうまく使い分けたところで、ページの表示が大幅に速くなることはなさそうです。
終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話