CODEWITHSUNDEEP
reactjsgoogle-cloud-firestorenext.jsserver-side-rendering
LonelySoul
LonelySoul

Reputation: 1232

NextJS Firestore fetch with SSR having huge file size

I am trying to pull data from firestore through NextJS SSR. However, the data size is really large and gets frequent warnings.

Is there a solution to pull small chunks but complete data iteratively?



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 },
  };
}

The error I am getting is given below.

Warning: data for page "/profile" is 15.3 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance. See more info here: https://nextjs.org/docs/messages/large-page-data

Upvotes: 0

Views: 806

Answers (1)

Sathi Aiswarya
Sathi Aiswarya

Reputation: 2940

Seems like you are fetching a lot of data (more than 128kb) in getStaticProps,As mentioned in this github thread reduce the data to essentials before passing it as data as props. check the size by running this on the console: document.getElementById("__NEXT_DATA__").text transform that data before you return it in getStaticProps to keep only the values you need

You can also check this github issue

Upvotes: 0

Related Questions