Please allow to globally disable prefetching

[tacone]

Describe the feature you'd like to request

Please allow <Link> prefetching to be globally disabled, or enabled one a one-to-one basis.

In development mode prefetching raises the noise to signal ratio, and makes it difficult to get a sense of the page footprint.

In production mode prefetching is not always desirable and Next should not try to outsmart the developer.

Globally disabling prefetching currently involves implementing your own Link element which is cumbersome, or making sure that every in your app has prefetch set to false.

Describe the solution you'd like

One solution may be to allow prefetching to be globally disabled by setting an entry in next.config.js. Setting such entry should set the default prefetching strategy of <Links> when a value is not set.

Possible values may be:

prefetch: 'auto'  // current behaviour
prefetch: 'off'  // prefetching defaults to false, but can be overriden by <Link prefetching
prefetch: 'force-off'  // disable prefetching, no matter what

An alternative solution may be to let the developer writing a JS function to determine if the fetch should happen or not.

Describe alternatives you've considered

I found none.

[timneutkens]

In development mode prefetching raises the noise to signal ratio, and makes it difficult to get a sense of the page footprint.

In development prefetching is disabled.

Globally disabling prefetching currently involves implementing your own Link element which is cumbersome, or making sure that every in your app has prefetch set to false.

This comes down to just this code:

import Link from 'next/link'

export default function MyLink(props) {
  // defaults prefetch to false if `prefetch` is not true
  return <Link {...props} prefetch={props.prefetch ?? false}>
}

[hatsumatsu]

@timneutkens setting prefetch={false} still prefetches on mouseover without any way to disable it completely, right?
There seem to be use cases where this isn't ideal like #20521 or #23641 .

[bennettdams]

Now that next/link will be updated for v13, maybe this is a good time to add this feature as well (as it may be a breaking change)? Some people including me can't use next/link now at all, as even prefetching on hover can be very critical - e.g. in a navbar of data-heavy pages. A user just has to mindlessly strafe the mouse from left to right over the navbar and the navigation is blocked until all data is loaded...

[elie222]

Is there a nice TS version of this component?

[jakevollkommer]

TypeScript option:

import Link from 'next/link'
import { ComponentProps } from 'react'

export default function NoPrefetchLink(props: ComponentProps<typeof Link>) {
  return <Link {...props} prefetch={props.prefetch ?? false}>
    {props.children}
  </Link>
};

[JamieMason]

What I've done is create a Babel plugin local to my project which adds prefetch={false} everywhere we use <Link /> from 'next/link'.

1 - Create a file at eg ./babel/disable-nextjs-link-prefetching.js or wherever you like:

/**
 * Based on the docs at https://nextjs.org/docs/api-reference/next/link, the
 * only way to disable prefetching is to make sure every <Link /> has <Link
 * prefetch={false} />
 *
 * We don't want to create a wrapper Component or go around changing every
 * single <Link />, so we use this Babel Plugin to add them in at build-time.
 */
module.exports = function (babel) {
  const { types: t } = babel
  return {
    name: 'disable-link-prefetching',
    visitor: {
      JSXOpeningElement(path) {
        if (path.node.name.name === 'Link') {
          path.node.attributes.push(
            t.jSXAttribute(
              t.jSXIdentifier('prefetch'),
              t.JSXExpressionContainer(t.booleanLiteral(false)),
            ),
          )
        }
      },
    },
  }
}

2 - Add/modify ./.babelrc to load your local plugin:

{
  "presets": ["next/babel"],
  "plugins": ["./babel/disable-nextjs-link-prefetching"]
}

[JamieMason]

I'm not sure off the top of my head but if you check the docs for what prefetch={false} does that should clear it up. All the plug-in does is make sure that prop is always set.

EDIT: I was on mobile when I replied earlier, I see from your original comment that there's also a prefetch: 'force-off' – the babel plugin could be modified to set that value instead:

t.jSXAttribute(
  t.jSXIdentifier('prefetch'),
- t.JSXExpressionContainer(t.booleanLiteral(false)),
+ t.stringLiteral("force-off"),
),

Examples on AST Explorer

• Babel plugin to set prefetch={false} on next/link
• Babel plugin to set prefetch="force-off" on next/link

[0oooooooo0]

The above code changes all prefetch to false, but I made it to false only if there is no prefetch.

module.exports = function ({ types: t }) {
  return {
    name: 'nextjs-link-prefetch-default',
    visitor: {
      JSXOpeningElement({ node }) {
        if (node.name.name === 'Link') {
          const defaultValue = false
          const prefetchAttributes = node.attributes.filter(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'prefetch')
          if (prefetchAttributes.length <= 0) {
            node.attributes.push(t.jSXAttribute(t.jSXIdentifier('prefetch'), t.JSXExpressionContainer(t.booleanLiteral(defaultValue))))
          }
        }
      },
    },
  }
}

[JamieMason]

Great @0oooooooo0, much better 👍

[0oooooooo0]

By the way, this makes swc unusable. I'm thinking of another way 🥲

[JamieMason]

That would be great. I only know of this Babel way and you're right, using Babel locks you out of using SWC.

[bennettdams]

[NawarA]

No, you're wrong. That's a different request than this request.

This request has to do with having a global config, so you can set a flag as the default behavior, so devs can override default settings.

The one you say is a dupe, is talking about how prefetch has a specific behavior of "pre-fetching on mouse hover`. It says there's no way to disable that mouse hover pre-fetch, even when pre-fetch equals false,

These are two different discussions, and neither should be sidelined because it looks like its a "dupe". They're not dupes, two different requests

❤️

[bennettdams]

Right, deleted my comment.

[BertrandBordage]

A workaround that I use for disabling hover prefetch as well is essentially this:

import React from "react";
import { Router, withRouter } from "next/router";

type Props = {
  href: string;
  children: React.ReactNode;
  router: Router;
};

class LinkNoPrefetch extends React.PureComponent<Props> {
  onClick = async (event: React.MouseEvent) => {
    const { router, href } = this.props;
    event.preventDefault();
    await router.push(href);
  }

  render() {
    const { href, children } = this.props;
    return (
      <a href={href} onClick={this.onClick}>
        {children}
      </a>
    );
  }
}

export default withRouter(LinkNoPrefetch);

[jiv-e]

This helped me to resolve my issue. Thanks!

[jiv-e]

PROBLEM: Unreliable page view logs
Not being able to disable the prefetching is especially problematic when I need to create a log event for every page view. This can be a requirement on some internal pages.

The idea is that admins could read from the logs which pages are viewed and by whom. If the user only hovers over the link it now creates a request. This can give a false information about what pages the user really visited.

[arch-user-france1]

just run a second request on the client that is only run when the page is really loaded

[kc980602]

After trying a few workaround, I decided to patch nextjs router directly

diff --git a/node_modules/next/dist/shared/lib/router/router.js b/node_modules/next/dist/shared/lib/router/router.js
index df2ec1d..e64e85f 100644
--- a/node_modules/next/dist/shared/lib/router/router.js
+++ b/node_modules/next/dist/shared/lib/router/router.js
@@ -1082,7 +1082,7 @@ class Router {
                     unstable_skipClientCache
                 };
                 const data = yield withMiddlewareEffects({
-                    fetchData: ()=>fetchNextData(fetchNextDataParams),
+                    fetchData: null,
                     asPath: resolvedAs,
                     locale: locale,
                     router: _this

[2-fly-4-ai]

The prefetching should come with warnings and the next/link component should not be forced on you. The only reason I used it was that during build time, It would not allow me to proceed until I changed all internal tags to a link component. This absolutely destroyed my serverless functions limit in 8 days and forced me to take down my projects due to the crazy costs that would have incurred. Even after disabling prefetch it still fetches every single link the person's mouse scrolls over while navigating down the page. So much extra tax on the backend slows the site down and costs you a bunch of extra money for nothing.

*Edited to be a bit less obscene. I may have jumped the gun on this one. I still think they should warn newcomers and put a warning for sites with lots of links on the documentation. But they obviously know what they are doing when it comes to optimizing. It just leaves a pretty sour taste in the mouths of newcomers when they get stung with nasty bills. Prefetch behavior + WP jam stack is a total fail on ecom sites with lots of links. Especially since the behavior is different in dev vs production. It's a costly lesson to learn.

[2-fly-4-ai]

I think you are wrong, mate. Why should I optimize my backend to be smashed by a million requests as people scroll down the page? WordPress backends are not ideal, but they're the gateway drug to full-stack software engineering for many newcomers.

Pretty hilarious that they refused to refund this. It speaks volumes about their business practices. We've all seen those absolutely ridiculous charges racked up for the weirdest things.

It's not intuitive at all. And I can assure you that many devs have been hustled by this.

Thankfully, I now understand it as default behavior and can work around it. Very costly lesson, though, as it absolutely murdered my rankings at the time.

This is one of those "overoptimized" and unintuitive features that catch people off guard. In a normal app, it totally makes sense to prefetch like this. But people are encouraged to build full sites with this, which is what I did at the time.

It took quite a while to even figure out what was going on. Had I not checked my bill 3 days into the month??? I don't even wanna imagine what would have happened. They could have straight-up bankrupted me at the time.

It's funny to laugh about in retrospect, but damn. I would love to see the numbers on how many people got stung by this and how much money was accumulated from just this one issue.

I haven't run into a single issue close to as expensive as this for the last year+ of development with next. So that says to me, this is actually a huge blunder in terms of being at least intuitive to newer developers.

It also put me off using Vercel for quite some time. Pretty bad start to a business relationship.

If you go back now and read your response, it doesn't really make sense. Of course, most customers would be happy with it as they are not running into issues with the types of apps they built.

---

[azizoid]

I wander how stupid was a person who brought the prefetching idea in the table. And how did others agreed on that. Today internet speed is fast enough to load any page after the click. The the hell needs prefetching? Are we in 90s or what?

[2-fly-4-ai]

Nextjs is trying to be as perfomant as possible out of the box. But this one issue really grinds my gears. And I absolutely loathe the thought of a billion-dollar+ company pinching pennies from new devs.

The next team has some of the smartest people in the world working there, and there is a reason for the things they do. But I don't think it's worth tainting the relationship with new customers over something so trivial.

It also sucks that you have to signup for the 20$ plan to test any website that has any sort of outward affiliate link. I could have definitely avoided this issue if that hadn't been the case. It's like the perfect recipe for disaster(or profit).

But alas. Goodluck to new devs running into this issue. It sucks. They should have an auto refund policy on this.

[unleashit]

One reason (exercise of the reader to speculate on the possible $ incentive) I think aggressive prefetching came about with Next.js because of how aggressively they code split. If the balance were even a bit more towards slightly larger initial bundle sizes, client navigation could be smoother and quicker with less need to prefetch (though I think it's useful selectively). I've come to realize that this is actually the heart of many problems with the way Next was designed. But considering the hivemind is moving away from SPAs and to treat the client as dumb as possible (never mind that mobile phones these days are super computers of 20 yrs ago), it seems like we'll have to get used to it unless you want to roll your own.

[daveycodez]

How many people have been ripped off an overcharged for this feature?

Note: It appears this feedback is related to Vercel, not Next.js.

The prefetching should come with warnings and the next/link component should not be forced on you.

The default for next/link helps improve page transition performance, leading to faster applications – we still believe this is the correct default to provide a "single-page app experience". If you do not want to use prefetching, you can disable it on a per-link basis or globally by wrapping links for a component (there's a snippet above).

The only reason I used it was that during build time, It would not allow me to proceed until I changed all internal tags to a link component.

This sounds like your ESLint rules, you can change this if you would like.

So much extra tax on the backend slows the site down and costs you a bunch of extra money for nothing.

You can use the a tag if you prefer – you don't have to use next/link if you are worried about your backend performance. Although, I would say this is likely going to be an issue regardless. When the user clicks on the link, now users are staring at a browser loading spinner for 4 seconds. I would recommend trying to address the slow backend.

I for one am very disappointed in Vercel and their endless crusade to monetize the dumb things.

I'm sorry you had a poor experience here. As mentioned above, we still believe the design of next/link to be correct. It sounds like in this instance should would prefer using a instead.

I'm sure there are many large companies and individuals that have run tests and come to the same conclusion.

The majority of customers I talk to are very happy with next/link and prefetching.

First 1000gb is free then 55 dollars

This is no longer the case – it's now $40 – and we're continually re-evaluating pricing based on feedback, so thank you!

How come the Next.js documentation website doesn't use prefetching then?

[unleashit]

There's another option that the framework could provide that could provide a balance to this issue. Rather than prefetch all the things, why not provide the developer with a little control over the way things are bundled. In the pre-framework isomorphic days, it used to be simple to control code splitting. Use dynamic import when you want it, and don't when you don't. Per page resources is safe and a good starting point, but it is a valid performance trade off decision to consider an initial bundle with a few common routes. In my experience, that's a better overall UX for the client and doesn't require hitting the server needlessly.

Of course that goes against Google's holy grail of of small initial payload over everything else no matter what. So you'd have to go easy with this power to please the SEO gods (and yeah of course mobile), but in my experience adding 25k or so to gain a handful of "pre" prefetched routes doesn't hurt "nearly" as bad as adding 2mb+ of ad and tracking libraries.

[khuezy]

So the new Link prefetch behavior seems to be broken? If you set prefetch={false}, then it doesn't even cache the request. So if you click on a static link multiple times, it keeps sending a request to the server. Why doesn't it cache the first request and reuse subsequent ones?

[daveycodez]

$$$

[arch-user-france1]

Just write your own link tag, it's easy:

// components/main.js
import { useRouter } from "next/router"
export function Link({ href, prefetch, hoverPrefetch, Components }) {
  if (prefetch) {
    Router.prefetch(href)
  }
  if (hoverPrefetch) {
    // implement with useEffect
  }
  return (
  <a href={href}>{...Components}</a>
  )
}

Note that this is an example and probably has one or two mistakes.

[brogr]

From what I can tell, v13.2.4 (app directory) doesn't prefetch on hover.
I've solved it like this for links that should only prefetch on hover but with a little bit of a delay:

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

/* 
 * Prefetch link with delay on hover instead of instantly or when in view (default next/link behaviour)
*/
const DELAY = 1500;
export default function LinkHoverPrefetch({
	children,
	href,
	className,
}) {
	const router = useRouter();
  const [delayed, setDelayed] = useState(false);
  const [prefetched, setPrefetched] = useState(false);

	const onMouseOver = (e) => {
    if (!prefetched) {
      const timeout = setTimeout(function () {
				if (!prefetched) {
					console.log("delayed hover prefetch", href);
					router.prefetch(href);
					setPrefetched(true);
				}
			}, DELAY);
			setDelayed(timeout);
		}
	};

	const onMouseOut = (e) => {
    if (delayed) {
      console.log("clear timeout, abort hover prefetch", href);
			clearTimeout(delayed);
			setDelayed(false);
		};
	};

	return (
		<a
			href={href}
			className={className}
			onMouseOver={onMouseOver}
			onMouseOut={onMouseOut}
		>
			{children}
		</a>
	);
}

[wimbarelds]

With prefetch={false}, I'm also not seeing prefetch on hover with Next 13.4.3.

Granted, the API docs don't say that it should prefetch on hover, however the Code-docs do say it will still prefetch on hover.

[azizoid]

the question is why. why the f they add a feature without letting us to disable it

[youminkim]

I found that this is still same case in 14.0.3. with prefetch=false, no prefetch happening on hover. The code doc is outdated

[unleashit]

I can't speak for why they didn't in the past, but as someone mentioned above it's now possible. What I'd do is make a little wrapper over Link and change the default prefetch to false. Something like:

import NextLink, { type LinkProps } from 'next/link';

type CustLink = LinkProps & { children: React.ReactNode };

export function Link({ href, prefetch = false, children, ...rest }: CustLink) {
  return (
    <NextLink href={href} prefetch={prefetch} {...rest}>
      {children}
    </NextLink>
  );
}

[JohnAlbin]

@unleashit Thanks for the code! I was getting a Type error when adding a className to that component and fixed it with the code below.

next/link supports Ref, so if y'all want to add Ref forwarding, the component would look like this:

// components/Link.tsx

import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from "react"
import NextLink, { type LinkProps as NextLinkProps } from "next/link"

type LinkProps = NextLinkProps &
  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof NextLinkProps> & {
    children?: ReactNode
  }

export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  function LinkWithRef(
    {
      // Turn next/link prefetching off by default.
      // @see https://github.com/vercel/next.js/discussions/24009
      prefetch = false,
      ...rest
    },
    ref
  ) {
    return <NextLink prefetch={prefetch} {...rest} ref={ref} />
  }
)

[g-wozniak]

Took me two hours to realise why my users are automatically logged off upon logging in to the admin panel; because one of the links was "Sign off" without damn prefetch. Now, when they hover over on "sign off" without the intention of being logged off, it will still happen unless I use .

[kc980602]

I'm using v14.1.0 pages router with getInitialProps, it's still prefetch on hover.

The easiest way to disable prefetching is to patch nextjs source code, forget about the workarounds mentioned above, just patch it!

patches/next+14.1.0.patch

diff --git a/node_modules/next/dist/shared/lib/router/router.js b/node_modules/next/dist/shared/lib/router/router.js
index 904f2c5..c949658 100644
--- a/node_modules/next/dist/shared/lib/router/router.js
+++ b/node_modules/next/dist/shared/lib/router/router.js
@@ -1110,7 +1110,7 @@ class Router {
                 isBackground
             };
             let data = isQueryUpdating && !isMiddlewareRewrite ? null : await withMiddlewareEffects({
-                fetchData: ()=>fetchNextData(fetchNextDataParams),
+                fetchData: null,
                 asPath: isNotFound ? "/404" : resolvedAs,
                 locale: locale,
                 router: this
@@ -1395,23 +1395,7 @@ class Router {
             }
         }
         const data = process.env.__NEXT_MIDDLEWARE_PREFETCH === "strict" ? null : await withMiddlewareEffects({
-            fetchData: ()=>fetchNextData({
-                    dataHref: this.pageLoader.getDataHref({
-                        href: (0, _formaturl.formatWithValidation)({
-                            pathname: originalPathname,
-                            query
-                        }),
-                        skipInterpolation: true,
-                        asPath: resolvedAs,
-                        locale
-                    }),
-                    hasMiddleware: true,
-                    isServerRender: this.isSsr,
-                    parseJSON: true,
-                    inflightCache: this.sdc,
-                    persistCache: !this.isPreview,
-                    isPrefetch: true
-                }),
+            fetchData: null,
             asPath: asPath,
             locale: locale,
             router: this
@@ -1443,19 +1427,7 @@ class Router {
         }
         await Promise.all([
             this.pageLoader._isSsg(route).then((isSsg)=>{
-                return isSsg ? fetchNextData({
-                    dataHref: (data == null ? void 0 : data.json) ? data == null ? void 0 : data.dataHref : this.pageLoader.getDataHref({
-                        href: url,
-                        asPath: resolvedAs,
-                        locale: locale
-                    }),
-                    isServerRender: false,
-                    parseJSON: true,
-                    inflightCache: this.sdc,
-                    persistCache: !this.isPreview,
-                    isPrefetch: true,
-                    unstable_skipClientCache: options.unstable_skipClientCache || options.priority && !!process.env.__NEXT_OPTIMISTIC_CLIENT_CACHE
-                }).then(()=>false).catch(()=>false) : false;
+                return false;
             }),
             this.pageLoader[options.priority ? "loadPage" : "prefetch"](route)
         ]);

[blackbing]

Here is how I fix it simply.
Add this script to overwrite the Link Component in _app.tsx

import Link from 'next/link';
import type { LinkProps } from 'next/link';

const OriginalLink = Link;

Object.defineProperty(Link, 'default', {
  configurable: true,
  writable: true,
  value: (props: LinkProps) => {
    return <OriginalLink {...props} prefetch={props.prefetch ?? false} />;
  },
});