angular - Firebase: Reduce number of reads for a large collection

Question

After a lot of searching, I've found a lot of "what not to do" when it comes to reading firebase collections (main example being the incident of the $30k bill), however I'm struggling to find a suitable solution for our problem.

Our website contains a product catalogue. The catalogue is populated from a firestore collection called 'products', with the JSON structure as:

"products"{
   "productId"{
      "name":
      "price":
      "brand":
       ...
  }
}

In order to load the collection, I use the following:

this.products = this.db.collection('products').valueChanges({idField: 'productID'});

At its peak, we expect the collection to contain anywhere up to 2000 products. My concern is that as the website scales, this is going to become extremely costly. I've noticed that every time the 'catalogue' page is navigated to, it loads the collection again. Therefore, taking a somewhat not unimaginable example, if the page was loaded 5000 times in a day and loaded the full collection, as it currently does, it'll cause 10,000,000 document reads (at the very least).

I'm sure there must be a better way to do this, however, I can't seem to crack it.

Any advice is greatly appreciated on a better way to approach this and keep the costs down.

Answer 1

Waitting for answers