Firebase Firestore. "Cost" onSnapshot

Question

I need to place an approximately 20 Vue component on the page. Each component, when mounted, creates an onSnapshot for itself and, accordingly, unsubscribe() when it is deleted.

const ref = firebase.firestore().collection('components').doc('comp1')

var unsubscribe = ref.onSnapshot(querySnapshot => {
  querySnapshot.forEach(doc => {
     ...
  })
}

What is the cost of each onSnapshot / unsubscribe :

1. in the sense of the execution time
2. in the sense of money (according to the price of Firebase)

How much will I pay, for example, if each of 1000 users update a page with 20 components 100 times in half an hour?

Perhaps it would be better to make onSnapshot on the whole collection of components?

Answer 1

Found the information you need in Firestore documentation

Listening to query results

Cloud Firestore allows you to listen to the results of a query and get realtime updates when the query results change.

When you listen to the results of a query, you are charged for a read each time a document in the result set is added or updated. You are also charged for a read when a document is removed from the result set because the document has changed. (In contrast, when a document is deleted, you are not charged for a read.)

Also, if the listener is disconnected for more than 30 minutes (for example, if the user goes offline), you will be charged for reads as if you had issued a brand-new query

So every time you update a record in your collection, all the suscribed users will perform a read. You should take your time in estimating the amount of active users you are going to have and the amount/frequency of your data, that will help in taking the cheapest and best solution that suits for your app.

I'm also adding the default Firebase pricing calculator which is at the bottom at the page and will definitely help you to take a decision.