您绝对应该引入分页策略。另一种聪明的方法是根据上次突变时间进行查询。如果enablePersistence已配置，Firestore 会自动将您的数据缓存在网络中（否则设置为 false）。

您可能会引入一种策略，仅在经过一段时间后才使用网络进行查询。但是，您需要在进行最后一次在线查询时跟踪每个module。

function strategicFirestoreReadWrite(moduleKey, actionFn) {
  const lastFetchedDate = sessionStorage.getItem(moduleKey) || new Date();
  const difference = Math.abs(lastFetchedDate.getTime() - new Date().getTime())
  const hourDifference = difference  / 1000 / 3600
  const logToStorageFn = () => {
    sessionStorage.setItem(moduleKey, new Date())
  }

  // Performing operation offline when last fetch earlier than 3 hours
  if (hourDifference < 3) {
   firebase
     .firestore()
     .disableNetwork()
     .then(actionFn)
     .then(logToStorageFn)
  } else {
   firebase
       .firestore()
       .enableNetwork()
       .then(actionFn)
       .then(logToStorageFn)
  }
}

这可以是Firestore特定页面会话的所有操作的实用函数。现在您要做的是传递一个唯一标识符以及您想要执行的任何离线或在线操作；可能是获取、插入、更新或删除；带功能。您将确保该函数根据上次读写时间在离线或在线模式下执行。

strategicFirestoreReadWrite(window.location.href, () => {

   //whatever operation you want to perform in online or offline mode
})

您列出了很多不错的选择。我们在我们的应用程序中使用分页来限制读取查询并提高加载速度。例如，我们每页只显示 50 个项目，并且在点击或滚动时加载更多（无限滚动）如果数据不经常更改，您可以将其缓存在前端，但这会引入很多额外的问题:)。