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

Question

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

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

来源：Cloud Firestore：读取是如何计算的？

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

1. 将产品信息存储在 localstorage 中

   • 一旦 react app 成功加载数据，继续将产品信息保存到 localstorage 中，以避免将来不必要的加载。

2. 使用来自 firebase 的 SOURCE.CACHE

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

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