reactjs - 如何优化云 Firestore 中的读写操作？

Question

我目前正在为学习目的编写一个 react + Firebase 项目，我想知道我应该采用哪种方法来有效地从 firebase 读取数据。

假设我有一个名为 product 的 只读 集合，其中包含大约 5000 个文档，因此当用户访问我的 react 应用程序时，每次访问将收取 5000 次读取的费用。

来源:Cloud Firestore: How is read calculated?

由于如果用户垃圾邮件刷新以响应应用程序，这会很快消耗读取计数，是否有任何正确方法可以从 firebase firestore 读取数据？

1. 在本地存储中存储产品信息

   • React 应用成功加载数据后，继续将产品信息保存到本地存储中，以避免将来不必要的加载。

2. 使用 Firebase 中的 SOURCE.CACHE

   • 这个想法类似于 localstorage，但是我们可以使用 SOURCE 来代替使用 localstorage。CACHE 通过强制 firebase 进入离线模式从缓存中检索数据。 来源:https://firebase.google.com/docs/firestore/manage-data/enable-offline
   • How to avoid unnecessary Firestore reads with Cache ，这是最接近我当前查询的，但我的集合只是只读数据，不会更新我可能无法添加快照监听器。如果我对功能有误解，请告诉我。

3. 限制读取查询？

   • 限制每次加载的固定数量的文档返回，但最终我仍然需要加载完整的文档集，因此我对此持怀疑态度。

这是我目前能想到的，如果您的应用程序构 build 计中有任何黄金标准或程序，请告诉我。

谢谢。

Answer 1

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

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

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)
  }
}

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

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

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