javascript - How can turn off page prefetching Next.js Link on hover? - Stack Overflow

admin管理员组

文章数量:1296505

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>

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>

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Apr 28, 2023 at 9:07 Youssouf Oumar 46.3k1616 gold badges101101 silver badges104104 bronze badges asked Jan 8, 2023 at 11:06 IrushanIrushan 15522 silver badges1212 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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/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.

am facing same issue i add experimental: { optimisticClientCache: false, } in next.config file.It works for me

本文标签： javascriptHow can turn off page prefetching Nextjs Link on hoverStack Overflow