如何发送和接收大型JSON数据

Question

我是全栈开发的新手，目前正在设法找到一种有效的方式在前端（React）和后端（Express）之间send和fetch大数据，同时最大程度地减少内存使用。 具体来说，我正在构建一个映射应用程序，该应用程序需要我处理大型JSON文件（10-100mb）。

我当前的设置适用于较小的JSON文件：

后端：

const data = require('../data/data.json');

router.get('/', function(req, res, next) {
  res.json(data);
});

前端：

componentDidMount() {
      fetch('/')
      .then(res => res.json())
      .then(data => this.setState({data: data}));
  }

但是，如果data大于〜40mb，则由于内存不足，如果在本地进行测试，后端将崩溃。 同样，使用require()保留数据也会占用大量内存。

我已经进行了一些研究，并对JSON解析，字符串化，流式传输有一个大致的了解，我认为答案就在于使用分块的JSON流来一点一点发送数据，但是在实现上却有很多损失，特别是使用单个fetch()这样做（甚至可以吗？）。

绝对感谢有关如何解决此问题的任何建议。

Answer 1

首先，40mb是巨大的空间，对于您的用户而言，这可能是不合理的，尤其是在移动使用可能性很高的情况下。

如果可能的话，最好是在后端收集此数据，可能将其放到磁盘上，然后根据需要仅将必要的数据提供给前端。 当地图需要更多数据时，您将进一步调用后端。

如果无法做到这一点，则可以通过客户端捆绑程序加载此数据。 如果数据更新不是太频繁，您甚至可以将其缓存在前端。 这至少将防止用户需要重复获取它。

另外，您可以通过服务器上的流读取JSON并将数据流传输到客户端，并使用JSONStream之类的内容来解析客户端上的数据。

这是如何通过套接字从服务器流JSON的示例： 如何通过套接字从服务器流JSON