首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >服务器端API响应缓存与React和下一个JS

服务器端API响应缓存与React和下一个JS
EN

Stack Overflow用户
提问于 2022-08-10 14:12:10
回答 1查看 714关注 0票数 0

我有服务器端呈现的基本设置和react设置,它的工作方式与预期的一样。我知道react query在客户端维护一个缓存,如果特定的查询键是新的并且它存在的话,它可以从这个缓存中服务器数据。这个装置看起来是这样的-

代码语言:javascript
代码运行次数:0
运行
复制
// 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;
代码语言:javascript
代码运行次数:0
运行
复制
// 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中使用,但我无法让它工作。

EN

回答 1

Stack Overflow用户

发布于 2022-09-06 09:24:02

您需要在getServerSideProps函数之外声明客户机。

此外,您还需要配置staleTime,就像通过卸载它是0一样。

代码语言:javascript
代码运行次数: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;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73307822

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档