Reducing data size in getStaticProps

Hello,

I am working on a project with Next JS and Prismic.

I need to fetch all pages of a custom type to pass it in a component that will list a link toward every single page of this type of custom type.
Here's the getStaticProps:

export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData })

  const page = await client.getSingle('jobs_main')
  // const pillarPages = await client.getAllByType('pillar_page')
  const pillarPages = await fetchPillarPages(client)
  return {
    props: {
      metaTitle: page.data.meta_title,
      metaDescription: page.data.meta_description,
      title: page.data.title,
      ogImage: page.data.og_image.url,
      page: page,
      pillarPages: pillarPages
    }
  }
}

My issue is that since I have 100+ pillar_page, the data loaded for the page containing the component is super heavy: Warning: data for page "/xx" is 1.38 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance.

As I am already fetching at build time, how could I reduce the size?

Best,

Thanks!

Hello @Marving

Thanks for reaching out to us.

Unfortunately, we can not do anything on our end, as you are fetching a lot of data (more than 128kb) in getStaticProps, so the warning is pretty much warranted. Even the query helpers like getSingle retrieve a full response from the API.
You can try to render the essential data to render the page. You can apply some predicates and query parameters to render the essential data.
You can find different methods here: Rest API Technical Reference - Documentation - Prismic

Thanks,
Priyanka

1 Like

Hi @Marving - I think you'll find this article I wrote a while back really useful.

1 Like

Appreciate it. Thank you for your reply guys!

1 Like