如何在页面转换期间缓存 React Query 中的请求？

Question

我使用

getServerSideProps

在 Next.js 中的服务器端获取数据。但是，当我从页面 A 转到页面 B 时，我注意到再次获取相同的请求（具有相同的

queryKey

）。由于我已将

staleTime

设置为

Infinity

，API 响应是否应该从缓存中使用？

这是一个示例

getServerSideProps

：

export const getServerSideProps: GetServerSideProps = async (context) => {
  await queryClient.fetchQuery({
    queryKey: ['posts'],
    queryFn: () => fetchPosts(), // This is a simple function to fetch posts from an API.
    staleTime: Infinity,
  });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

让我们假设页面 B 也存在相同的

getServerSideProps

。当我从页面 A 转到页面 B 或反之亦然时，我希望 React Query 使用缓存中的

queryKey: ['posts']

的数据，而不是在每个页面上再次获取页面更改。

Answer 1

当使用 nextJs 中的客户端转换从一个页面导航到下一页时，

getServerSideProps

将always 再次执行。没有内置方法可以不执行该函数。

所以这不是react查询问题，而是nextJs的问题。本质上，

getServerSideProps

从来都不是为了“播种”客户端缓存。

我知道你唯一能做的就是检查请求是否是

getServerSideProps

内的客户端请求，并提前返回而不发送

props

。请参阅 nextJs 存储库中的众多讨论之一。

解决方法是：

if (req.url?.startsWith('/_next')) return { props: {} };

里面

getServerSideProps

。对服务器的请求仍然会发生，但不会获取任何内容。这是有效的，因为在第一个 SSR 渲染中，url 不以

/_next

开头，因此此条件仅适用于客户端导航。