我目前正在编写一个 React + Firebase 项目用于学习目的,我想知道我应该采取哪种方法来有效地从 Firebase 中读取数据。
说我有这个只读称为产品的集合,其中包含大约 5000 个文档,因此当用户访问我的 React 应用程序时,每次访问将收取 5000 次读取费用。
来源 :Cloud Firestore:读取量是如何计算的?
由于如果用户垃圾邮件刷新以反应应用程序,这会很快消耗读取计数,是否有任何proper如何从 firebase firestore 读取数据?
-
将产品信息存储在本地存储中
- 一旦 React 应用程序成功加载数据,请继续将产品信息保存到本地存储中,以避免将来不必要的加载。
-
使用 firebase 中的 SOURCE.CACHE
- 这个想法类似于本地存储,但我们可以使用 SOURCE 来代替本地存储。
CACHE 通过强制 Firebase 进入离线模式来从缓存中检索数据。来源 :https://firebase.google.com/docs/firestore/manage-data/enable-offline
-
如何使用缓存避免不必要的 Firestore 读取,这是最接近我当前查询的,但我的集合只是只读数据,不会更新我可能无法添加快照侦听器。如果我误解了该功能,请告诉我。
-
限制读取查询?
- 限制每次加载返回固定数量的文档,但最终我仍然需要加载全套文档,因此我对此非常怀疑。
到目前为止我能想到的就是这些,请告诉我您的应用程序构建设计中是否有任何黄金标准或程序。
谢谢。
您绝对应该引入分页策略。另一种聪明的方法是根据上次突变时间进行查询。如果满足以下条件,Firestore 会自动在网络中缓存您的数据:enablePersistence
已配置(否则设置为 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
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)