いがにんのぼやき

WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

Nuxt3+Vue Apollo v4でSSR時に同時にGraphQLにアクセスできない問題が解消する

Nuxt2+NuxtのApollo moduleを使用したときに、各コンポーネントでGraphQLにアクセスするとそれぞれのリクエスト時にそこで処理待ちが発生し、とてもパフォーマンスの悪いものになっていた。
これは BatchHttpLink を導入しても変わりわない。(CSR時は1つのリクエストにまとめてくれる)
本当は処理待ちせず同時に実行をしてほしい。

だが色々実験していたところ、どうやらNuxt3とVue Apollo v4ではその問題が解消するようだ。

以下のリポジトリApollo Serverを立ててNuxt2とNuxt3の動きを色々試していた。 github.com

各resolverで3秒待ってからレスポンスを返すようなGraphQLのサーバーを用意。
ページでは2つのコンポーネントを呼び出し、各コンポーネントでGraphQLへのアクセスを実行する。(今回のケースは /batch で試すことができる)
そのときにレスポンスが返ってくる時間が3秒~6秒なら同時に実行が出来ていて、6秒以上かかるならそれぞれのGraphQLのアクセスの処理待ちをしてしまっているだろうと判断。
そうするとNuxt3で試していた方が同時実行が確認でき、Nuxt2のほうが処理待ちをしてしまっていることが確認できる。

NuxtのApollo moduleは内部的にはVue Apolloのv3を使っている。
v3とv4ではComposition APIへの対応という大きなトピックがある。

この同時実行が可能となった変更はVue3、Nuxt3の改善なのかVue Apolloの改善によるものなのかはよく分かっていない。
このSSRでGraphQLへのリクエストの同時実行ができるというのは凄く大きなことだ。今までパフォーマンス問題でなるべくルートのコンポーネントにGraphQLとの通信処理を寄せる必要があったが、その考慮は必要なくなり、コンポーネントの設計にも大きくかかわる。