如何發送和接收大型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