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時代の寄付サイトを作った話