我的 firebase 上有大量阅读资料，如何冻结我的 React Firebase 应用程序的对象？答案

【问题标题】：I have huge reads on my firebase, how to freeze objects for my React Firebase app?我的 firebase 上有大量阅读资料，如何冻结我的 React Firebase 应用程序的对象？
【发布时间】：2021-10-31 03:49:39
【问题描述】：

所以我的 firebase 有 30k++ 大数据。它的坏处是，每次我在我的 React 页面上单击返回按钮时，它都会再次获取 30k++ 数据，这会伤害钱包。

有什么办法可以解决吗？

这是我在主页中使用的useEffect

 useEffect(() => {
        // first 5 posts
        Form.allPosts()
            .then((res) => {
                setSalesLastMonth(res.posts);
                setLastKey(res.lastKey);
            })
            .catch((err) => {
                console.log(err);
            });
        Form.postsToday()
            .then((res) => {
                setSales(res.posts)
            }).catch((err) => {
                console.log(err)
            })
    }, []);

这是 firebase 函数的示例：

postsToday: async function () {
        try {
            const yesterday = new Date(new Date().setHours(0, 0, 0, 0));

            let today = new Date();
            const data = await firestore
                .collectionGroup('form')
                .orderBy("Created At", "desc")
                .where('Created At', '>=', yesterday)
                .where('Created At', '<=', today)
                .get()

            let posts = [];
            let lastKey = "";
            data.forEach((doc) => {
                posts.push({
                    id: doc.id,
                    etc etc

                });
                lastKey = doc.data()['Created At']
            });
            return { posts, lastKey };
        } catch (e) {
            console.log(e);
        }
    },

有人可以帮我吗？

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

首先要做的是enable Firestore's client-side persistence，这意味着客户端将保留一个基于磁盘的缓存，它可以从中读取它最近看到的文档。

另一种减少读取的方法是只加载用户看到的数据。用户似乎不太可能检查所有 30K 表单，因此我建议 using cursors/queries 实现分页或无限滚动以最初仅加载第一页数据，并根据需要按需加载其余数据。您似乎已经在跟踪lastKey，这是您需要的主要内容。

最后，还要考虑每个用户是否需要单独执行此查询，或者您是否可以执行一次并与所有用户共享结果。例如，您可以为所有用户看到的内容创建一个data bundle serve that bundle from a CDN，然后将其注入到离线缓存中。

【讨论】：