Vercel部署的Next.js应用导致Google Firebase高读取量与连接数问题

• 先确认getData的调用次数与调用时机
  Next.js部署在Vercel时默认会触发服务端渲染+客户端hydrate两次执行，如果你的组件未做请求去重，或者开启了路由预取、ISR增量静态再生逻辑，同一查询会被重复触发多次。可以给getData加日志埋点，打印调用栈与触发时间，部署到Vercel后确认真实调用次数是否远超预期。33个文档的单次查询计33次读取，只要重复调用70次左右就会产生2.3k次读取，和你观测到的2.5k峰值匹配。
• 检查Firebase实例是否做了单例复用
  多数场景下该问题是因为没有做Firebase实例全局复用，每次导入Firebase配置时都会重新初始化新的Firestore实例，每一个新实例都会建立独立的连接，每一次实例发起的查询都会单独计数读取次数。本地开发因为运行环境是单进程，实例不会反复初始化，所以不会出现该问题。可以参考如下代码实现单例复用：

  let firestoreInstance = null
  export const getFirestore = () => {
    if (firestoreInstance) return firestoreInstance
    // 原有初始化逻辑
    const app = initializeApp(firebaseConfig)
    firestoreInstance = getFirestore(app)
    return firestoreInstance
  }
  

• 确认缓存配置是否生效
  本地开发环境Firestore默认会启用本地持久化缓存，重复查询会走本地缓存不计入读取次数。但Vercel的服务端运行环境是无状态的，每次请求都会生成新的运行实例，没有本地缓存空间，所有查询都会直接请求Firebase服务端计入读取次数。如果你的页面有多个子组件都独立调用了getData，就会触发多次全量查询。建议使用SWR/React Query等请求库做全局请求缓存，同一次页面加载周期内同一查询只发起一次真实请求。
• 快速验证方案
  可以临时给查询语句加上limit(1)限制，刷新页面后观测读取次数的变化，如果读取次数同步下降为之前的1/33左右，即可确认是同一全量查询被重复调用导致的计数异常。

19个活跃连接的问题和实例重复初始化直接相关，每一个新的Firebase实例都会建立独立的WebSocket连接，修复实例单例问题后活跃连接数会回归正常。

内容的提问来源于stack exchange，提问作者Markus