NextJS prefetch bad for bandwidth?
From what I understand nextjs links prefetch pages as soon as the link is visible on the viewport. Isn't this terrible for large apps, for example my job is building headless ecommerce sites and the products page could have almost a hundred links if you include the navigation bar, footer & products. Wouldn't this be prefetching a hundred pages & very bad for bandwidth? In ecommerce the majority of consumers are mobile visitors which means they could be on limited mobile data.
I've tried to search for anything on bandwidth + prefetching on the docs but couldn't find anything. I've found some articles on how NextJS supposedly accounts for low bandwidth users but got no deeper detail how or when it does this.
10 Replies
Next prefetch is on hover, not viewport
You can globally disable prefetch if you are afraid
Docs say otherwise unless there's something I'm misunderstanding.
We have prefetch disabled globally but I want an excuse to enable it. I don't want to penalize the experience of users with high bandwidth at the expense of improving the experience of users with low bandwidth
wait
did they charge that on app dir
regardless
if you are hosting on vercel, yeah, bandwidth will suck
I had a look into it, and I'm not going to lie I have no idea what's going on with the pre-fetching. All I can say is whatever is happening is almost definetly based on viewport not on hover events (it is mentioned under the
false section though which makes me even more confused)
your best bet would be to do a quick test, change the Link tags to false prefetch and to true and compare the bundle sizes with those if that is the concern. If the concern is bandwith it might just be worth only requesting pre-fetch on the most clicked pages based on a click map or the likesI was thinking maybe I could dynamically disable/enable prefetch based on user bandwidth - no clue how I'm going to achieve that as of right now though.
Wouldn't this be a both-ways problem if this is communicating signifcant data? Ex. your usage on the server would keep scailing up and the usage on users devices would scale up
If the bundle is basically insignifcant and it's having little to no affect on the server usages, I wouldn't worry much rn
Next.js alone is already going to be heavy on mobile devices with lower bandwith
That's true.. I guess globally disabling prefetch, & instead cacheing everything as we were currently doing will be the way to go. I thought maybe prefetching could allow us to less heavily cache but doesn't seem to be worth it.
tbf not sure what would be best in this case, Theo has a pretty good video about the mistakes he made w/caching but sounds like you're going down a good path. Sucks Next.js isn't more in your face about these defaults and how it interops with serverless billing
yeah that unstable_cache vid was quite insightful, actually lead us to start refactoring the many huge fetch responses we were cacheing regularly