Next.js Discord

Discord Forum

Prefetch on hover not working with App Router, but works with Page Router

Unanswered
American Bobtail posted this in #help-forum
Open in Discord
American BobtailOP
So if you are to create two completely fresh nextjs installs @latest, one where you choose App Router, one where you do Page Router, create a Link with Prefetch={false} you get two completely different behaviors, page router prefetch on hover but app router dosent.

Is this expected or is it a bug?
Did I miss a config? I've spent 4 hours searching for something that talks about this to no avail.

5 Replies

American BobtailOP
Anyone?
Hi Waffe, did you get an answer to this?
Rufous-winged Sparrow
@danielvanc This topic is a bit old, but from what I understand, prefetch happens initially, when link enters the viewport. It is reloaded on hover only if data expired between link entering the viewport and hover.
Yes this is correct, but i think it would be nice to know why the behaviour is different to the Pages router.

For instance, when you set prefetch={false} in pages router, it turns off prefetching on route load but it enables prefetching on hover. This is not the case in the App router, it disables it entirely.
Rufous-winged Sparrow
You'd have to look for release notes for any explanation. I'd guess this is due to misleading consequences of prefetch={false} in pages router ( false as disabled is much more intuitive). In general App router has a lot of small differences like that when compared with Pages router.