Next.js のgetServerSidePropsとswrやReact Queryなどのデータフェッチライブラリを一緒に使うと、効率が悪い場合があるという話を聞いた
getServerSidePropsとはNext.jsのデータフェッチ手法で、getServerSidePropsという関数をページからexportすると、リクエストごとにこの関数で返されるデータを使ってページ単位で事前フェッチする仕組み
もう一方のswrやReact Queryなどは、Hooks時代から利用され始めたコンポーネント単位でフェッチするデータフェッチライブラリ
これら２つは相互補完的に使うことができるが組み合わせた時に効率が悪い場合がある
具体的には、戻るや進む時にnext/linkかnext/routerを使ったページ遷移でそのページをリクエストした場合など
この時、データフェッチライブラリのキャッシュが有効であっても、getServerSidePropsによるデータフェッチが発生してしまう問題がある
※getServerSidePropsの実行タイミングは以下に記載がある
nextjs.org
つまり、getServerSidePropsとデータフェッチライブラリのキャッシュが連携しない場合があるということ
この解決案としてはgetServerSidePropsの用途を限定するなどを紹介してもらったが、具体的な方法は公開されていないので記憶に留めておくとしてNext.js使うときは気をつけたい
