prefetch "on-scroll" instead of "in-viewport" to optimize user experience

[dohomi]

Hi Guys,

due to https://nextjs.org/blog/next-9#production-optimizations I have on large websites a very high amount of prefetched data in my production build. It would be great if it would be possible to leverage the behaviour to change "in-viewport" to "on-scroll".

I'm requesting this this mainly because I use intersection-observer for delaying images on my websites. Now the data of prefetched pages are requested before my images and this results in a worse user experience than to disable prefetching.

Is there a solution to change that behaviour? Thanks for any input

[timneutkens]

prefetching is done through <link rel="prefetch"> so images and other high priority requests should be resolved before it by the browser automatically.

You can already achieve what you're asking for using the prefetch={false} property on <Link> and then doing the prefetching using the imperative router.prefetch(href, as)

[dohomi]

@timneutkens the images are using lazy-loading through intersection-observer, thats why I think its the reason they are getting loaded later on. But the hint with using imperatively router.prefetch(href,as) sounds very promising for what I am looking for, thanks for that!