服务器端API响应缓存与React和下一个JS
服务器端API响应缓存与React和下一个JS
提问于 2022-08-10 14:12:10
我有服务器端呈现的基本设置和react设置，它的工作方式与预期的一样。我知道react query在客户端维护一个缓存，如果特定的查询键是新的并且它存在的话，它可以从这个缓存中服务器数据。这个装置看起来是这样的-
// pages/_app.tsx
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider, Hydrate } from "react-query";
function MyApp({ Component, pageProps }: AppProps) {
const [queryClient] = React.useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<Component {...pageProps} />
</Hydrate>
</QueryClientProvider>
);
}
export default MyApp;// pages/index.tsx
import React from "react";
import { GetServerSideProps, NextPage } from "next";
import { dehydrate } from "react-query";
import { useQuery } from "react-query";
import { exampleApi } from "@src/modules/my-plans/apis";
const ListingPage: NextPage = () => {
const { data: list, isLoading } = useQuery(["list-api-key"], exampleApi);
return (
<main>
{...}
</main>
);
};
export const getServerSideProps: GetServerSideProps = async (context) => {
const queryClient = new QueryClient();
await queryClient.prefetchQuery(["list-api-key"], exampleApi);
return {
props: {
dehydratedState: dehydrate(queryClientTopDog)
}
};
};
export default ListingPage;在上面的片段中，由于API是在getServerSideProps中预取的，所以useQuery从水化缓存中获取数据，而不是调用API。
我想弄清楚的是，在getServerSideProps中缓存是否可行。由于API已经被调用过一次，我如何使它从第二个请求开始，而不是再次调用API，而不是从服务器端缓存中获取数据，类似于react query如何维护客户端缓存？
如果我没有误解文档中的这页面，它似乎表明维护服务器端缓存是可能的，但我无法弄清楚如何做到这一点。为此，我尝试在pages/_app.tsx上创建一个pages/_app.tsx，并将其导出到getServerSideProps中使用，但我无法让它工作。
回答 1
Stack Overflow用户
发布于 2022-09-06 09:24:02
您需要在getServerSideProps函数之外声明客户机。
此外，您还需要配置staleTime，就像通过卸载它是0一样。
const queryClient = new QueryClient();
export const getServerSideProps: GetServerSideProps = async (context) => {
await queryClient.prefetchQuery(["list-api-key"], exampleApi, { staleTime: STALE_TIME });
return {
props: {
dehydratedState: dehydrate(queryClientTopDog)
}
};
};
export default ListingPage;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73307822
复制相关文章
相似问题
腾讯云开发者
