我有这个服务器组件

const ContentSubmissions = async () => {
  const blogsData: any = await getBlogsData();
  const galleryData: any = await getGalleryData();
  const questionsData: any = await getQuestionsData();

  const fullData = [ 
    ...blogsData,
    ...galleryData,
    ...questionsData,
  ];

  return (
    <p className="text-lg md:text-2xl font-bold text-white">
      {fullData ? fullData.length : 0}
    </p>
  );
};

字符串
它被用来

<Suspense fallback={<Loading />}>
          <ContentSubmissions />
        </Suspense>

型
在客户端组件中。
问题是这是一个昂贵的调用，并且每次用户重新访问页面时它重新获取所有数据，
有没有办法处理它？像缓存？限制调用？或者什么是最好的方法来避免多个调用
类似getBlogsData的函数是fire base中的一个get docs from collection：

export async function getBlogsData() {
  const blogsData: any[] = [];
  const blogRef = query(collection(db, "blogs"));

  const snapshot = await getDocs(blogRef);
  if (snapshot.empty) {
    console.log("No matching documents.");
    return [];
  }
  snapshot.forEach((doc: any) => {
    blogsData.push({ id: doc.id, ...doc.data() });
  });
  return blogsData;
}

型