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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 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
运行
AI代码解释
复制
// 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 01:24:02

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

复制
相关文章
java删除文件时总是返回false,删不掉「建议收藏」
我的文件都是存在的,但是就是经常性的删不了,不知道怎么回事,我单独测试的时候是可以的,感觉很是奇怪,上网查,人家说是可能的情况有:
全栈程序员站长
2022/06/27
1.5K0
Java删除文件时总是返回false,删不掉,且无异常
今天在利用 File 类中的 delete() 方法删除文件时总是返回 false 。查看路径文件路径正确,文件也存在。测试可以正常,唯独在项目中那是一个删不掉啊。后来与测试用例仔细比对了一下,发现有个 IO 类在使用,因此得出:在删除文件是因为没关闭 IO,导致文件无法删除,后来加上 close() 就可以删除文件了。
全栈程序员站长
2022/08/27
1.5K0
Ajax处理success回调函数返回的json数据。
站长最近在项目中用调用一个分类的子数据,由于表单要填写的数据较多,为了实现无刷新的选择操作,就使用ajax做了异步查询。查询的结果因为是多条数据,一直以来动用ajax查的都是单数据,还第一次使用多数据,惭愧。TP5中查询的结果已经是一个数组对象,如果直接return回去,那么success函数获取的是一个对象,对象操作的结果还是要再一次转换成数组,讲起来都觉得麻烦,别说操作了。最好是直接返回字符串或者json。
世纪访客
2018/08/02
3.5K0
Ajax处理success回调函数返回的json数据。
回调
回调简单而言:在一个类(A)的方法(a)中调用另一个类(B)的方法(b),当方法(b)执行完之后就调用类(A)中的方法(c),这就是回调的过程,是不是很简单?简单分析可以知道一个类(A)持有另一个类(B)的引用,方法(c)就叫做回调函数,画成UML图就如下所示:
晚上没宵夜
2020/03/10
2.6K0
​29 - 回调函数和回调地狱
原文地址:https://dev.to/bhagatparwinder/callback-functions-callback-hell-79n
前端黑板报
2022/12/01
4.6K0
什么是回调地狱?如何解决回调地狱问题_地狱回调
这个问题呢,需要从Node.js的API说起,这里就会有人问了?博主你不是说回调地狱的问题吗,怎么说到API了,别急,看博主一步一步的解释给你听:
全栈程序员站长
2022/11/15
3.2K0
七、回调
修改PspNotifyEnableMask为00000009,创建和退出进程时就不会触发回调
zhang_derek
2022/09/29
1.6K0
关于回调
爱学习的前端歌谣
2023/10/18
1760
关于回调
回调函数
什么是回调函数,上面的问题说的是不是很空洞,不是太形象,下面是知乎上的一位网友给的答案:
LiosWong
2018/10/29
3.8K0
回调函数
  有点类似模板的功能,可以使用函数指针作为参数,当调用函数时,使用void *进行传递参数,细致比较时,再用int *之类的进行强制转换。回调函数,其实就是在参数中定义函数,调用时,回到主函数去调用这个函数。仔细用法如下: 首先定义查找函数 Node * search_list(Node *node, void const *value, int (*compare)(void const *,void const *)){ while(node!=NULL){ if(compar
用户1154259
2018/01/17
3.3K0
回调函数
回调地狱
一个函数,作为参数的形式传给另一个函数调用,那么这个这个函数就叫做回调函数。 当然回调函数很常见,如下
用户4793865
2023/01/12
1.4K0
【工作笔记】PathFileExists 返回 FALSE
在参数传递正确,文件确实存在的情况下,PathFileExists偶尔返回FALSE
全栈程序员站长
2022/09/14
5830
回调地狱
前言 从前一文中你真的了解回调?我们已知道回调函数是必须得依赖另一个函数执行调用,它是异步执行的,也就是需要时间等待,典型的例子就是Ajax应用,比如http请求,在不刷新浏览器的情况下,当你执行DO
itclanCoder
2020/10/28
2.3K0
回调地狱
回调函数
原文链接:https://note.noxussj.top/?source=cloudtencent 什么是回调函数? 简单的来说,一个函数作为另外一个函数的参数,可以称为回调函数。这个理解其实不完全
菜园前端
2023/05/20
1.7K0
使用委托实现同步回调与异步回调
使用委托可以执行的一项有用操作是实现回调。回调是传入函数的方法,在函数结束执行时调用该方法。 例如,有一个执行一系列数学操作的函数。在调用该函数时,也向其传递一个回调方法,从而在函数完成其计算工作时,调用回调方法,向用户通知计算结果。 同步回调    首先声明两个方法: AddTwoNumbers():接受两个整型实参以及一个类型委托 ResultCallback():接受一个字符串,并显示出来。代码如下: using System; using System.Collections.Generic
hbbliyong
2018/03/05
3K0
使用委托实现同步回调与异步回调
电脑拥有GOU却仍返回False
电脑拥有独立显卡,pycharm中torch.cuda.is_available()总是返回false。
算法与编程之美
2023/01/03
5440
电脑拥有GOU却仍返回False
为什么1000==1000返回false,100==100返回true?
这可能是个讨论得较多的话题,但是我觉得它很有趣:为什么1000==1000返回false,100==100返回true?
三哥
2018/12/19
1.2K0
Fragment回调Activity
如果你需要在fragment中处理一些事情,事情的处理结果或者你需要告 诉activity马上要做什么事,这时候就需要和activity进行通讯。包括很多fragment在viewpager中的情况,而且可以保证activity能即时进行响应。相比发送广播,性能更好,代码更少。
坑吭吭
2018/08/31
1.8K0
回调函数案例
内置数据类型: #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> //回调函数---通用数组型打印案例 //参数1:数组首地址 参数2:数组中每个元素的大小 参数3:数组元素个数 参数4:回调函数对数组内容进行输出 void printArray(void* array, int size, int len, void(*MyPrint)(void *)) { //void*没有数组的概念,因此如果想通用可以用char*,如果用int*的话,打印字符串
大忽悠爱学习
2021/03/04
3.9K0
JavaScript回调函数
JavaScript中的回调函数是一种特殊类型的函数,它被传递给其他函数作为参数,并在特定的事件或条件发生时被调用。回调函数用于处理异步操作、事件处理、定时器等情况,以确保代码在合适的时机执行。在JavaScript中,回调函数常用于处理非阻塞的操作,以避免程序的停顿和等待。
堕落飞鸟
2023/05/17
2.5K0

相似问题

CodeIgniter:表单验证回调总是返回False

10

为什么$result总是给我返回false?

25

yepnope的完全回调问题

24

Droid X相机自动对焦回调总是返回false

30

Task<DocumentSnapshot>.Result.Exists总是返回False

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文