NextJS SSR从Firestore拉取数据文件过大的解决方案

你当前在NextJS的getStaticProps中一次性拉取Firestore全量posts数据，导致页面数据量达15.3MB，触发NextJS的性能警告：

警告：页面"/profile"的数据量为15.3 MB，超过了128 kB的阈值，这么大的数据量会降低性能。

可以通过Firestore的分页API（limit+startAfter）实现分批迭代拉取全量数据，同时修正你代码中的小错误（原代码中posts(doc.data())应该是posts.push(doc.data())），修改后的代码如下：

export async function getStaticProps() {
  const batchSize = 100; // 自定义每批拉取的文档数量
  let posts = [];
  let lastDoc = null;

  while (true) {
    const collectionRef = collection(db, 'posts');
    // 根据是否存在上一批最后文档，构建分页查询
    const q = lastDoc 
      ? query(collectionRef, orderBy('id', 'asc'), startAfter(lastDoc), limit(batchSize))
      : query(collectionRef, orderBy('id', 'asc'), limit(batchSize));
    
    const querySnapshot = await getDocs(q);
    // 没有更多数据时退出循环
    if (querySnapshot.empty) break;

    // 追加当前批次数据到数组
    querySnapshot.forEach(doc => {
      posts.push(doc.data());
    });

    // 更新上一批最后文档的引用
    lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];
  }

  return {
    props: { posts },
  };
}

额外优化建议 #

• 客户端分页：即使分批拉取全量数据，15MB的数据仍会导致页面加载性能问题。建议只在getStaticProps中拉取第一页数据，后续分页逻辑放在客户端，通过Firestore SDK动态拉取对应批次的数据，避免一次性传递所有数据到前端。
• 精简数据字段：使用Firestore的select()方法只拉取页面实际需要的字段，大幅减少数据体积。例如：

  query(collectionRef, orderBy('id', 'asc'), select('id', 'title', 'summary'), limit(batchSize))
  

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