Tengo una aplicación web creada con Nextjs y alojada en Vercel que usa Firebase para almacenar datos. Actualmente tengo una colección de 33 documentos, todos los cuales tienen 17 campos. Luego tengo una función que obtiene todos esos registros cuando un usuario llega a la página de índice.

Mi código para obtener los datos es:

 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()})) }

Sin embargo, mi pestaña de uso muestra un pico enorme cada vez que actualizo la página para obtener los datos: imagen que muestra el pico de uso cuando actualicé la página

Simplemente no entiendo cómo una carga puede causar 2.500 lecturas y 19 conexiones activas. ¿Esto es normal? Nadie más está usando la aplicación simultáneamente, ya que aún no es pública.

Realmente no sé cómo comenzar a depurar el problema, ¡así que todas las sugerencias son bienvenidas!

EDITAR: Reduje el problema a mi aplicación en vivo implementada en Vercel. Las lecturas altas/las conexiones activas no son un problema al navegar por mi aplicación en localhost.