Nextjs App如何在使用Firestore查詢后處理本地數據存儲？

Question

我正在使用 Firestore 數據庫開發一個反應電子商務應用程序。 當應用程序加載時，它會獲取前 50 個產品（每個產品都是 Firestore 文檔），並使用數據呈現產品卡片。 我的問題是在哪里存儲這些數據以便在頁面刷新、導航到訂單頁面並返回產品頁面、關閉選項卡並再次打開等情況下輕松訪問。

我問這個是因為當我監控我的 Firestore 使用情況時；

1. 我打開產品頁面並加載 50 個產品，go 到第二頁加載另外 50 個等。
2. 過濾得到另外 50 個產品，刪除過濾器，再次得到前 50 個產品。
3. Go 到訂單頁面回來獲得 50 件產品。

總而言之，session 可以輕松實現數千次文檔讀取、大量數據使用和更長的加載時間。 所以我想我在這里漏掉了一點。 應該有一種方法來存儲所有這些數據，而不會使應用程序變慢並且數據使用成本更高。 將數據保存在 session 中並完全刷新、關閉選項卡並返回等的好方法是什么？

PS 我正在使用 Next.js 和 Firestore，數據獲取是通過 Firestore web 庫在客戶端完成的。

Answer 1

從 firebase 獲取數據后，只需將其存儲在本地存儲中，如下所示，

考慮到您像在 useEffect 中一樣獲取組件負載數據並將其存儲在 state 名稱中作為產品。 現在我的方法是通過 useEffect 查找產品變量中的任何更新，並簡單地更新本地存儲

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

這樣你就可以在本地存儲中使用它，並在應用程序的任何地方使用它。 同樣在其他組件中，在調用 firestore 獲取產品時，請務必先檢查本地存儲。 如果已經有一些數據存儲在本地存儲上，不要 go 調用 firestore 來獲取數據。

這將減少您的 API 調用並同時提高應用程序的性能。

瞧。 我希望它能解決你的目的：:)