如何在没有延迟的情况下一次调用客户端获取 10,000 条数据？答案

【问题标题】：How to get 10,000 of data in one call to client side without lag?如何在没有延迟的情况下一次调用客户端获取 10,000 条数据？
【发布时间】：2023-04-08 21:53:02
【问题描述】：

当我在一个 Get 请求中从数据库中获取超过 10,000 个原始数据时，响应需要很长时间才能到达客户端。

有没有办法将这些数据分成小块传送到客户端？

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

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

我想在客户端发出 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);

【问题讨论】：

标签： reactjs typescript express knex.js mobx

【解决方案1】：

你必须使用一些包，比如 react-virtualized 或 react-window 这些元素只渲染它们在屏幕上可用

【讨论】：

嗨，我正在寻找类似延迟渲染表中数据的东西，就像我尝试使用 react-virtualized 作为 antd 文档推荐的那样。但它需要有 scroll.y ，这与表格的设计相冲突。我一直在寻找类似不渲染整个表格而只渲染第一页中的 10 行的东西，但是当我尝试在表格中搜索一个项目时，我需要数据在搜索中可用，而不会出现一瞬间的延迟.
请查看 react virtualized 的文档，您将看到一些在数组上搜索的示例

【解决方案2】：

就像其他答案所说，您可能希望为您的表格使用虚拟化以实现无延迟滚动 UX。

但是它并不能解决巨大的 GET 请求的问题，在这里你可以使用像请求服务器这样的分页只发送前 500 个项目，并且在用户将表格滚动到这 500 个项目的底部之后，你可以向服务器请求下一个500 项等等。

分页可能以不同的方式实现，例如使用“pages” - 当您询问 page=1&limit=500 或使用“ids” - 当您要求服务器发送在客户端上已有的最后一个项目之后的项目 @987654322 @

【讨论】：

我实际上是这么想的，但是如果客户端就像管理仪表板一样需要始终提供所有网站数据，那么您最好的建议是什么？
你为什么需要所有的数据，比如 10k 行，有人怎么能用它呢？例如，最好有过滤器和搜索字段。