NextJS Firestore fetch with SSR具有巨大的文件大小

Question

我正试图通过NextJS SSR从firestore提取数据。但是，数据量非常大，并且经常收到警告。

是否有一个解决方案，以拉小块，但完整的数据迭代?

export async function getStaticProps() {
  const collectionRef = collection(db, 'posts');
  const q = query(collectionRef, orderBy('id', 'asc'));
  const querySnapShot = await getDocs(q);
  let posts = [];
  querySnapShot.forEach((doc) => {
    posts(doc.data());
  });
  return {
    props: { posts },
  };
}

我得到的错误如下所示。

警告:数据页"/profile"是15.3 MB，超过了128kb的阈值，这个数据量可能会降低性能。查看更多信息:https://nextjs.org/docs/messages/large-page-data

Answer 1

似乎你在getStaticProps中获取了大量的数据(超过128kb)，正如在这个github线程中提到的，在将数据作为数据作为道具传递之前，将数据减少到基本要素。通过在控制台上运行以下命令来检查大小:document.getElementById("__NEXT_DATA__").text在getStaticProps中返回数据之前转换该数据以仅保留所需的值

你也可以查看github issue