title: Nextjs App how to handle local data storage after querying with Firestore?
body: <p>I'm developing a react e-commerce app with Firestore database. When the app loads it fetches first 50 products (each one is a Firestore doc), and renders the product card with the data. My question is where to store this data for easy access in case of page refresh, navigation to say to order page and come back to the products page, close the tab and open again etc.</p>
  <p>I'm asking this because when I monitor my Firestore usage for following;</p>
  <ol>
  <li>I open products page and load 50 products, go to second page load another 50 etc.</li>
  <li>Do filtering get another 50 products, remove filters, get the first 50 products again.</li>
  <li>Go to orders page come back get 50 products.</li>
  </ol>
  <p>All in all one session can easily reach thousands of doc reads, lots of data use and longer load times. So I think I`m missing a point here. There should be a way to store all these data without making the app slower and data usage more expensive. What would be a good approach here to save the data in session and full refresh, close the tab and come back etc. ?</p>
  <p>P.S. I'm using Next.js and Firestore, data fetching is done on the client side via Firestore web library.</p>