Firebase：显示项目的最佳实践

Question

我想要一个建议。 我正在开发一个使用 react-js 作为前端和 firebase 作为后端的网络应用程序。

为了简洁起见，假设网络应用程序的目的是允许用户上传一些项目，然后显示在主页上

一个项目由两个字符串组成：1) 项目名称 2) 指向存储在 IPFS 上的图像的 url

用户提交表单后，前端会在 firestore 的集合中创建一个新文档：

await addDoc(collectionRef, newDoc)

然后，在主页中，我显示集合中的所有项目

const querySnapshot = await getDocs(collectionRef);
querySnapshot.forEach((doc) => {
    ...
});

这行得通；但是，如果我理解正确，每次刷新主页时，前端都会进行N read 调用（其中 N 是集合中的文档数）。因此，我想知道它是否正确，有没有更好的方法？

我真的很感激任何建议（也关于此设置中潜在的重大安全漏洞）

Answer 1

每次刷新主页时，前端都会进行 N 次读取调用 （其中 N 是集合中的文档数）。

const querySnapshot = await getDocs(collectionRef); 确实是这种情况：集合中的所有文档都已获取。

如果您的集合包含大量文档并且被频繁获取，这将花费您的资金，并且在某一时刻，您的应用程序的性能可能会下降（Firestore 查询执行的持续时间和从后台传输的大量文档 -到前端）。

避免这种情况的一种方法是使用分页并仅获取前 X 个文档并显示一个链接以获取接下来的 X 个文档，等等。

Firestore 文档中有一个page 专门用于分页实现。

---

您还可以实现无限滚动机制而不是链接，以便在用户向下滚动页面时连续加载下一组 X 文档。这只是一种 UI 变体，基于 Firestore 文档中详述的完全相同的方法。

---

另外关于此设置中潜在的重大安全漏洞

获取集合的所有文档或使用分页在安全性方面没有任何区别。在任何情况下，您都应该根据您的要求使用security rules（可能还有Firebase Auth）来实现安全性。不要忘记安全rules are not filters。