Warning: Data for Page Exceeds the Threshold of 128 kB
Last updated: Aug 17, 2022
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
. 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?
Aug 15, 2022, 5:40 PM
It may be helpful to check out this article on pagination with GROQ!
Aug 15, 2022, 5:47 PM
Thank you! I'll give this a read and let you know if I run into any hurdles
Aug 15, 2022, 5:52 PM
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
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?
Aug 15, 2022, 9:24 PM
Aug 16, 2022, 7:16 AM
Your static data contains the first 6, and then the rest is done on the client.
Aug 16, 2022, 7:16 AM
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.
Aug 16, 2022, 7:17 AM
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?