How can turn off page prefetching Next.js Link on hover?-CodePudding

In my production, when we hover over whatever link in the application, the XHR request will send to the server. Therefore I need to prevent that option.

I used prefetch={false} it doesn't work. Any solution for this issue?

 <Link href={`${path}${card.post_details.slug}`} prefetch={false}> 
   Read More
 </Link>

CodePudding user response：

prefech={false} disable prefetching in all scenarios but not on hover, as you can read on the doc:

When prefetch is set to false, prefetching will still occur on hover.

In this GitHub issue, one of the mainters says about a pull request he made about prefech:

To be precise, only the new router for https://nextjs.org/blog/layouts-rfc will disable prefetching on hover. For the existing router, it is still relevant to do prefetching on hover as it is not a single pass to load code and data.

So if this is so important to you, maybe try migrating to Next 13, and use the app directory.