Next.jsでページ遷移した際、APIが無駄に叩かれる

Question

事象

現在、Next.jsで商品管理のCMSを作成しています。
next/linkを使って、TOPページから、商品一覧や、商品詳細に遷移した時、ブラウザからフォーカスを当てると毎回APIを叩いてしまう事象が発生しています。

直パスや、遷移後にリロードした場合には、起きません。
故に、なにか依存配列の変更があるなどの、基本的な問題ではないと断定

推察

原因を探ったところ、おそらく、next/linkを使用して、マウント・アンマウントを自動的に行っているので、それが全体の変更とみなされ実行されてるのではないかと推察しています。

質問

上記の問題を解決する方法はないでしょうか？

個人的に考えている解決方法としては、useStateを使用し、マウント時にuseStateに取得したデータを格納
useEffectでuseStateがnullのときのみ、APIでデータを取得するように変更が妥当な解決方法なのかなと考えていますが、API毎に、useEffectとuseStateの記述が必要なので、もっと簡単な解決方法があれば知りたいです。

該当のソースコード

// API
export const getProductListApi =async (authParam: authInterface, page: number) => {

  // apiClientはaxiosのWrapper
  const response = await apiClient.get(API_PRODUCT, {
    headers: {
      'access-token': authParam.accessToken,
      'uid': authParam.uid,
      'client': authParam.client,
    },
    params: {
      page
    }
  })

  return response
}

// API Hooks
export const useProductList = (page: number) => {
  const [auth] = useRecoilState(authState);
  // ここでuseStateにデータを格納
  // authに変更があった場合にのみ、refetchするようにuseEffectを書くのが正解？
  return useQuery<any, Error>(['productList'], () => getProductListApi(auth as authInterface, page), {retry: 0});
};

// レンダリング
const ProductList = memo(function ProductListContents() {
  const { data, isLoading, isError, error, refetch } = useProductList(productListPageNumber);

  return(
    {data & data.map((item, index) => {
      <li key={index}>data.name</li>
    })}
  )
)};

補足情報（FW/ツールのバージョンなど）

package	version
Next.js	v13(TypeScript)
Recoil.js	v0.7.6
react-query	v3.3

Answer 1

こちらに記載のあるprefetchで解決する可能性があります。

<Link href="/example" prefetch={false}>
  <a>リンク</a>
</Link>