我使用
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']
的数据,而不是在每个页面上再次获取页面更改。
当使用 nextJs 中的客户端转换从一个页面导航到下一页时,
getServerSideProps
将always 再次执行。没有内置方法可以不执行该函数。
所以这不是react查询问题,而是nextJs的问题。本质上,
getServerSideProps
从来都不是为了“播种”客户端缓存。
我知道你唯一能做的就是检查请求是否是
getServerSideProps
内的客户端请求,并提前返回而不发送props
。请参阅 nextJs 存储库中的众多讨论之一。
解决方法是:
if (req.url?.startsWith('/_next')) return { props: {} };
里面
getServerSideProps
。对服务器的请求仍然会发生,但不会获取任何内容。这是有效的,因为在第一个 SSR 渲染中,url 不以 /_next
开头,因此此条件仅适用于客户端导航。