如何优化云 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. 限制读取查询？

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

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

谢谢。

Answer 1

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

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

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

Answer 2

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