我需要在 React (Next.js) 中有效地渲染一個 6000 記錄的 Excel 或 html 文件

Question

TLDR：有沒有人知道一種可行的方法來處理從 excel 文件或從不會減慢我的網站速度的預先存在的 HTML 文件中呈現一頁上的 6000 條記錄？

我為一個有很多部門的客戶建立了一個記錄保存系統。 所有其他部門都在使用我為他們設置的 React CRUD 系統來全面跟蹤和管理數據庫。

我在一個特定部門有一個人，他曾經使用一個 HTML 文件來填充網站，該 HTML 文件是在他們的機器上從一個 excel 文件本地生成的。 他們在遷移到我構建的系統時不會以任何方式或形式讓步，並堅持要我給他們一種上傳 HTML 文件或 Excel 文件以在網站上顯示數據的方法，並且他們希望在本地管理信息，他們自己。 此外，他們希望將所有 6000 條記錄放在一個頁面上，並且也不會讓步，將任何類型的分頁扔出窗口（我之前已經內置）。

除了使用 Sheet.js (xlsx) 將 excel 文件轉換為 JSON，然后將其映射到如下所示的 HTML 表之外，我對此並沒有任何疑慮。 它只是一個簡單的映射，就像 React 中的任何其他映射一樣：

<thead className="bg-gray-50">
                  <tr>
                    {libraryColumns.map((column) => (
                      <th
                        className="px-10 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
                        key={column}
                      >
                        {column}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {books.map((book, index) => (
                    <TableRow book={book} key={index} index={index} />
                  ))}
                </tbody>
              </table>

這是有效的，但是它使網站的這一部分變得非常緩慢。

所以我有兩個選擇，我可以通過從服務器讀取 excel 文件、轉換為 JSON 並映射到該表來繼續使用數據填充頁面的這條路徑，或者我可以呈現客戶端能夠的 HTML 文件從他們的excel文件生成。 在后者的情況下，我想要自定義樣式，但我不確定這是否可能。 如果不可能，我不會嫁給它，因為在這一點上我只需要完成它並完成它。

我的問題最終是這樣的最佳實踐是什么？

不幸的是，我被要求做客戶想要的事情並且不能修改要求，我只是不確定如何有效地完成這項工作，如果可能的話。

謝謝你。

Answer 1

您需要添加無限滾動的功能（當用戶滾動您按需加載數據時），或者您也可以使用 react-window 庫，我有自定義無限滾動的工作代碼，您可以在此處查看我的倉庫https://github。 com/amansadhwani/all-features-react/tree/master/src/components/InfiniteScroll