Warning: Data for Page Exceeds the Threshold of 128 kB

Hi all,
I'm getting the following:

Warning: data for page "/numeros" is 1.16 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance.

I have a query that outputs 137 blog results in a grid. Only 6 are displayed at a time on first load, with a "load more" button displaying 6 additional articles on every click using

.slice()

.
Is there a better (more performant) way of going about this, such that I don't need to query all the data on page load?

It may be helpful to check out this article on pagination with GROQ!

Thank you! I'll give this a read and let you know if I run into any hurdles

Hey! Sorry for the delayed reply, something came up.
So just to make sure I'm understanding the implementation correctly, the groq query formation for loading more posts would be done within the component it will be used in, rather than with something like getStaticProps?

In other words, if I'm currently querying ALL articles of type

numeros

in getStaticProps, I would instead query for my initial set of results that would be displayed on page load (6 "numero" articles for example), then, to load an additional subset of posts after a button is clicked, I would use an async function with a groq query within my component to retrieve that data?

Exactly. 🙂

Your static data contains the first 6, and then the rest is done on the client.

Another thing you should consider before bothering with client-side pagination is reducing the amount of data you query for each of your posts.
If you say your posts are displayed in a grid, I assume they need very little information: title, image URL and short excerpt perhaps? Even with 137 posts, it shouldn’t amount to 1Mb+. My gut feeling is that you fetch too much data for each post, perhaps even their entire content?

Try fetching only what’s needed, and try again to see how much data is really needed for that entire page.

Thanks!! I reduced the amount of fields I'm querying and brought it down to 176kb. This still exceeds the nextjs "threshold" though -- do you think it's really worth refactoring the code for this extra bit of performance?

Probably not at this stage. 🙂

You can always do it when you have more posts.

thank you :)) you're always such a great help!