I have a web app built with Nextjs and hosted on Vercel that uses Firebase for storing data. Currently I have a collection of 33 documents, which all have 17 fields. Then I have a function that gets all those records when a user lands on the index page.

My code for fetching the data is:

const getData = async () => {
  const q = query(collection(firestore, "data"), where("published", "==", true));
  const querySnapshot = await getDocs(q);
  return querySnapshot.docs.map(doc => ({id: doc.id, ...doc.data()}))
}

However, my usage tab shows a huge peak any time I refresh the page to get the data: image showing usage peak when I refreshed the page

I just don't understand how one load can cause 2.5k reads and 19 active connections. Is this normal? No-one else is using the app simultaneously, since it's not public yet.

I don't really know how to begin debugging the problem, so all suggestions are welcome!

EDIT: I have narrowed the problem down to my live app deployed on Vercel. High reads / active connections are not an issue when navigating around my app in localhost.