Nextjs App 在使用 Firestore 查询后如何处理本地数据存储？

Question

我正在开发一个带有 Firestore 数据库的 React 电子商务应用程序。当应用加载时，它会获取前 50 个产品（每个都是一个 Firestore 文档），并使用数据呈现产品卡片。我的问题是在哪里存储这些数据以便于在页面刷新、导航到订购页面并返回产品页面、关闭选项卡并再次打开等情况下轻松访问。

我问这个是因为当我监控我的 Firestore 使用情况时；

我打开产品页面并加载 50 个产品，转到第二页再加载 50 个等
过滤得到另外 50 个产品，移除过滤器，再次得到前 50 个产品。
转到订单页面回来获得 50 件产品。

总而言之，一个会话可以轻松达到数千次文档阅读、大量数据使用和更长的加载时间。所以我想我在这里漏掉了一点。应该有一种方法可以存储所有这些数据，而不会降低应用程序速度和数据使用成本。什么是在会话中保存数据并完全刷新、关闭选项卡并返回等的好方法？

P.S。我正在使用 Next.js 和 Firestore，数据获取是通过 Firestore 网络库在客户端完成的。

Answer 1

从 firebase 获取数据后，只需将其存储在本地存储中，如下所示，

考虑到您像在 useEffect 中一样获取组件加载的数据，并将其作为产品存储在状态名称中。现在我的方法是通过 useEffect 查找产品变量中的任何更新并简单地更新本地存储

const [product,setproduct] = useState([]); // containing array of product
useEffect(() => {
   if(product.length>0) localStorage.setItems('products',JSON.stringify(product));
  }, [product]);

这样你就可以将它保存在本地存储中并在应用程序的任何地方使用它。同样在其他组件中，在调用 firestore 获取产品时确保首先检查本地存储。如果已经有一些数据存储在本地存储上，请不要上去调用 firestore 获取数据。

这将减少您的 API 调用，同时提高应用程序的性能。

瞧！我希望它能解决你的目的。 :)

Nextjs App 在使用 Firestore 查询后如何处理本地数据存储？

Nextjs App how to handle local data storage after querying with Firestore?

reactjs

google-cloud-firestore

next.js

state

browser-cache