Please add an option to disabled completely prefetch on hover on links

[meotimdihia]

Describe the feature you'd like to request

On my websites, a lot of links were stacked. Once the visitor wants to click a link, his mouse will be hover over 10 links+ which degrade performance on the visitor's device and make too many requests server.

This problem is very critical on my website.

And I search people met this problem too:

• Prefetch on hover/on touch option? #11793
• Prefetch + Revalidate or Fallback: true + "non-serverless" DB = overloaded server #20521
• Disable prefetch on Link component when hovered #24120

Describe the solution you'd like

Add delay to mouse hover on prefetch request

Describe alternatives you've considered

Add delay to mouse hover on prefetch request

[acdotme]

I second this, especially as NextJS is being used more for e-commerce applications. I'm currently working on a large ecomm app (half a million products) with category links in the sidebar.

Even with prefetch disabled, when a user moves their mouse into that region they inevitably hover over several category links before clicking the one they want. This then results in a long delay before the category page the user clicked on is loaded while the app is still prefetching the ones they unintentionally hovered over.

An optional hover delay for prefetching would be great for cases where there are lots of links on a page. Unfortunately at the moment, the user experience is degraded in these cases and lots of unnecessary server requests are being sent.

[acdotme]

@meotimdihia while it would be nice to have this as an option on the core next/link component, it has occurred to me that we can probably get around this by creating a CustomLink component which returns an tag using router.push() as an onClick. This gives us client side routing but without prefetching.

I'm just trying it on my app now and it seems to be working ok.

Update: Upon testing this in a production build I've found that router.push() doesn't work quite the way I expected on an tag. It seems to trigger a client side route change so I can show a progress loader, but it also trigger an http request at the same time. This might still be a better solution than having prefetching on a large number of links. Hopefully the next/link component might get some more configuration options.

[acdotme]

I obviously hadn't had enough coffee yesterday. It occurred to me not long after I posted that my solution wasn't working that I hadn't used preventDefault() on the link click. As soon as I added that in, I got client side routing without prefetching exactly as I wanted it.

import router from 'next/router';

function CustomLink(props) {
  const linkHref = props.href;

  function customLinkOnClick(e) {
    e.preventDefault();
    router.push(linkHref);
  }

  return (
    <a href={linkHref} onClick={customLinkOnClick}>
      {props.children}
    </a>
  );
}

export default CustomLink;

Probably not the most elegant solution, but it works for my purposes.

In theory this could be expanded to allow prefetching with a hover delay.

[shpan93]

I don't think that it should be changed globally. For your use case it seems like you just need to make prefetch={false} persistent, and it's quite easy to achieve with wrapper component:
const CustomLink = (props) => <Link prefetch={false} {...props}/>
And then change your import across application.

[meandillar]

Setting prefetch to false only disables viewport prefetching, and doesn't prevent prefetch on hover. This is also a problem for us and it causing thousands of excess serverless invocations every hour because of getStaticProps being run for every link that is hovered.

[bennettdams]

Just an additional use case: I don't have many elements for prefetching, but the pages have a bigger size of data.

This means that I can't use <Link> right now, because it will prefetch on hover, even when it's prefetch option is set to false.
This destroys my UX, because for my pages the prefetched data is big (and takes a "long" time), so e.g. going with the mouse through the navbar will trigger some "long"-running requests. These will block the page transition, so the user has to wait before all requests are done before he can switch to another route. With "long" I mean a few seconds, but obviously when you just want to go from one site to another via the navbar, these few seconds of blocking are unbearable as a user.

Building your own link to opt out of prefetching probably works, but I would really like to stick to Next.js' <Link>, because I don't know what (and if) the <Link> component is doing under the hood. I don't want to work around the "defaults" (<Link> component) of the framework just because other defaults (prefetching) don't suit my case. I just want to disable prefetching 😅

[pierreburel]

I really don't understand the choice here. Even the with-prefetching example show how to implement other way to prefetch by setting prefetch={false} and using router.prefetch.

Setting prefetch to false should disable all prefetching.

[TimoWilhelm]

In my opinion, the current behaviour is misleading. I think the cleanest solution would be something like:

 prefetch={'viewport'|'hover'|'off'}

I also agree, that setting prefetch to false should disable all prefetching.

To fix the expected behavior, I use the following patch with patch-package.

diff --git a/node_modules/next/dist/client/link.js b/node_modules/next/dist/client/link.js
index 3264681..0c44959 100644
--- a/node_modules/next/dist/client/link.js
+++ b/node_modules/next/dist/client/link.js
@@ -287,7 +287,7 @@ const Link = /*#__PURE__*/ _react.default.forwardRef((props, forwardedRef)=>{
             if (legacyBehavior && child.props && typeof child.props.onMouseEnter === 'function') {
                 child.props.onMouseEnter(e);
             }
-            if ((0, _router).isLocalURL(href)) {
+            if ((0, _router).isLocalURL(href) && p) {
                 prefetch(router, href, as, {
                     priority: true
                 });

[pierreburel]

I created a PR (#37214) with this exact change but it was rejected… I created a new one with a new prefetchOnHover prop (#37299) but I'm starting to wonder if it's going to be reviewed.

[nghiepdev]

👍🏼

[TimoWilhelm]

This seems to have been fixed with #39866

Setting prefetch={false} will no longer prefetch on hover in my case

https://github.com/vercel/next.js/pull/39866/files#diff-8acbf39f6c8f78de00c1be9339c3f839cd7f9a21f3c1d825cd23c14d4f11d718L477-R466

[pierreburel]

Well, it seems so. Good news.

That's weird cause my last attempt to "fix" this behaviour got refused (#37214).

[timneutkens]

https://github.com/vercel/next.js/pull/39866/files#diff-8acbf39f6c8f78de00c1be9339c3f839cd7f9a21f3c1d825cd23c14d4f11d718R463

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.

[trompx]

Hi @timneutkens,
I had previously posted a possible improvement that I found valuable and if I am not mistaken, it is not possible to control the delay after which the prefetch is triggered on hover.
I just watched a video on tanstack router where Tanner exactly implemented that feature.
Would you consider adding this to the new next router/link? We as developper should be in control of every requests our apps fires as it directly correlates to hosting costs, it should not be imposed by the framework.

[hazae41]

in your _app.tsx

const router = useRouter()

useMemo(() => {
  router.prefetch = async () => { }
}, [router])

[lucasbasquerotto]

@hazae41 The code return () => { router.prefetch = prefetch } won't run when the component is unmounted, because it's a useMemo, not a useEffect hook. In my case, I created a custom link (with a tag only), and call router.push() instead of using the next link component. This was a very easy solution to this problem IMO.

[selimatac]

i want to just trigger one time. this solution same prefetch={false}
not working with me. :/

[selimatac]

[selimatac]

after much effort on our part i found a solution. thats is on next config.

experimental: { optimisticClientCache: false, }

[topolanekmartin]

@selimatac Unfortunately this is not working anymore in [email protected] 😕 Whenever I hover over Link component it do prefetch.

[craigwardman]

I had to use @hazae41 monkey patch to disable pre-fetching. In my case the combination of prefetch with next-auth middleware and a secure page using "getServerSideProps" meant the prefetch call was responding with a 200 with an empty body and lacking any specific cache control headers my CDN was caching the empty response which then got served for the "real" call.

[csrinu236]

I had to use custom links.

MyLink.js

import React from 'react';
import { useRouter } from 'next/router';
const MyLink = ({ children, href, ...props }) => {
  const router = useRouter();
  const handleClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    router.push(props.href);
  };
  return (
    <a onClick={handleClick} href={href} {...props}>
      {children}
    </a>
  );
};
export default MyLink;`

But this will NOT do the complete job.

In case of a page component having getServerSideProps, each json call should go because, for each request, getServerSideProps should run and serve the latest json data.

---

But, if you have a component with getStaticProps, you will see this same request going for each click, those redundant requests(with status 304, it's a HEAD request and its preview is empty) might not not go.

Solution:-

diff --git a/node_modules/next/dist/shared/lib/router/router.js b/node_modules/next/dist/shared/lib/router/router.js
index 98227eb..7ec0bdd 100644
--- a/node_modules/next/dist/shared/lib/router/router.js
+++ b/node_modules/next/dist/shared/lib/router/router.js
@@ -1249,13 +1249,13 @@ class Router {
             }
             // we kick off a HEAD request in the background
             // when a non-prefetch request is made to signal revalidation
-            if (!this.isPreview && routeInfo.__N_SSG && process.env.NODE_ENV !== "development" && !isQueryUpdating) {
-                fetchNextData(Object.assign({}, fetchNextDataParams, {
-                    isBackground: true,
-                    persistCache: false,
-                    inflightCache: this.sbc
-                })).catch(()=>{});
-            }
+            // if (!this.isPreview && routeInfo.__N_SSG && process.env.NODE_ENV !== "development" && !isQueryUpdating) {
+            //     fetchNextData(Object.assign({}, fetchNextDataParams, {
+            //         isBackground: true,
+            //         persistCache: false,
+            //         inflightCache: this.sbc
+            //     })).catch(()=>{});
+            // }
             props.pageProps = Object.assign({}, props.pageProps);
             routeInfo.props = props;
             routeInfo.route = route;

I am still finding the significance of HEAD requests....

---

If you are using middleware.js, this patch still works, but you will notice single json call for Only Client Components(Components without getSP or getSSP or getIP).

My package.json

{
  "name": "nextjs-nginx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --port 5000",
    "build": "rm -rf build && next build && next start --port 3000",
    "start": "next start",
    "lint": "next lint",
    "export": "next export",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.12",
    "next": "13.4.12",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.64.1",
    "sharp": "^0.32.4"
  },
  "devDependencies": {
    "patch-package": "^8.0.0"
  }
}