Nextjs应用程序如何处理与Firestore查询后的本地数据存储?

Question

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

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

1. 我打开产品页面加载50个产品，转到第二页加载另外50个等等
2. 进行过滤，获得另外50个产品，删除过滤器，再次获得前50个产品。
进入订单页面返回50个产品。

总之，一个会话可以很容易地达到数千个文档读取，大量的数据使用和更长的加载时间。我想我漏掉了一点。应该有一种方法来存储所有这些数据，而不会使应用程序变慢和数据使用成本更高。在这里保存数据并完全刷新，关闭选项卡并返回等的好方法是什么?

注:我使用Next.js和Firestore，数据获取是通过Firestore web库在客户端完成的。

Answer 1

一旦从firebase获得数据，只需将其存储到本地存储，如下所示

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

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

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

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

瞧!我希望它能解决你的问题。:)