如何在一次对客户端的调用中获得10000个数据而不延迟

Question

当我在一个get请求中从数据库获得超过10000个原始数据时，响应需要花费大量时间才能到达客户端。

有没有一种方法可以将这些数据分成小块传输到客户端？

当向客户端发送大量数据时，客户端必须等待请求完成才能使用这些数据。

这会导致客户端出现滞后。每次客户端重新加载页面时，都会发出一个请求，客户端将等待成千上万的数据到达客户端。

我想在客户端发出GET请求时将其作为小数据块发送，客户端在不断完成来自服务器端的请求时立即接收数据，

这就像流数据，有没有这样的东西我可以用来实现上面的逻辑？

示例代码

/**
* SERVER SIDE DASHBOARD ENDPOINT
*/
import { Request, Response } from 'express';
public dashboard = (req: Request, res: Response) => {
// I get more than 10k of data that contains a lot of jsonb AKA Large data
let data = await knex('dashboard').select();
// Here I want to send data as chunks and translate it in client side
res.status(200).json({ status: 'success', data });
};
/**
* CLIENT SIDE
* MOBX STORE HOOK
*/
import axios from 'axios';
import { makeAutoObservable, runInAction } from 'mobx';
// The rest of the class code is here
// I call this method in App.tsx
public getData = async () => {
try {
let response = await axios({
url: 'http://localhost:3000/dashboard',
method: 'GET',
});
runInAction(() => {
if (response.status === 'success') {
this.data = response.data;
} else {
console.error(response.msg);
}
});
} catch (err) {
console.error(err.message || err);
}
};

/**
* REACT DASHBOARD COMPONENT
*/
import { FC, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { Table } from 'antd';
import { useStore } from 'hooks/context';
const CustomTable: FC = () => {
const { store } = useStore();
const { data } = store;
useEffect(() => {
}, [data]);

let columns: any = [
{
title: 'id',
dataIndex: 'id',
}
];
return (
<>
<div className={`table-responsive`}>
<Table
rowKey="id"
className={`home__table`}
columns={columns}
dataSource={data}
/>
</div>
</>
);
};
export default observer(CustomTable);

Answer 1

您必须使用一些类似react虚拟化或react窗口的包只有这些元素才能在屏幕上显示

Answer 2

和其他答案一样，您可能希望使用虚拟化来实现无延迟滚动用户体验。

但它并不能解决大量GET请求的问题，在这里，你可以使用分页，比如请求服务器只发送前500个项目，在用户将表滚动到这500个项目的底部后，你就向服务器请求下500个项目等等

寻呼可以用不同的方式来实现；页码"-当你询问CCD_ 1或用"；ids"-当您要求服务器发送位于客户端afterId=123&limit=500上最后一个项目之后的项目时