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

Stack Overflow用户

提问于 2022-08-10 06:12:10

回答 1查看 714关注 0票数 0

我有服务器端呈现的基本设置和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中使用，但我无法让它工作。

server-side-rendering

react-query

reactjs

typescript

next.js

腾讯云BI 新春特惠

首年仅需9.9元，续费同价

回答 1

Stack Overflow用户

发布于 2022-09-06 01: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;