Prefetch on hover/on touch option? #11793

Assuming they don’t get a lot of complaints from their viewport prefetching, I recommend them to switch to prefetching on hover on desktop and keep viewport prefetching on mobile. It would make a lot less requests and be nearly as fast as using the viewport on all form factors.

If Next got complaints about being a server hog, also switch to touchstart prefetching on mobile.

I had realized this when I setup my first project in NextJS a few days ago. I exported my project to my website as static files and realized in the network tab that it's pre-fetching my pages when I hover my navigation links and fixed it by creating my own Link component like this

import Link from 'next/link';

export default (props) => (
    <Link
        href={props.href}
        as={props.as}
        passHref={props.href}
        prefetch={props.prefetch || false}
        replace={props.replace}
        scroll={props.scroll}
    >
        <a {...props}>{props.children}</a>
    </Link>
);

This also makes it easier to add any attributes you want to add to the <a/> element :)

@vvo I assume you haven't found a solution yet?

I have a similar problem, where I show around 20-30 links at the same time in the viewport, each of them pointing to a page themselves. It fires 20-30 requests immediately, and every network traffic freezes.

I would like to create a Link whose prefetch behavior could be controlled by hover.

What I have so far, is the following hook:

import * as React from "react"
/**
 * @note Treat `true` as `undefined`. See explanation:
 * @see https://github.com/vercel/next.js/blob/master/errors/prefetch-true-deprecated.md
 */
export default function usePrefetchOnHover(prefetch?: boolean | "onHover") {
  const [shouldPrefetch, setShouldPrefetch] = React.useState<false | undefined>(false)
  if (prefetch === "onHover") {
    return {
      prefetch: shouldPrefetch,
      onMouseOver: () => setShouldPrefetch(undefined),
      onFocus: () => setShouldPrefetch(undefined),
    }
  }
  return { prefetch: prefetch ? undefined : prefetch }
}

This, if given onHover as a parameter would make the prefetch action controllable. The result of the hook could be spread onto a next/link component. But it does not seem to work.

const Link = ({prefetch, children, ...props}) => {
  return (
    <NextLink {...usePrefetchOnHover(prefetch)}/>
      <a>{children}</a>
    </NextLink>
  )
}


<NextLink prefetch="onHover" href="/some/page">
  Some page
</NextLink>

I too need to completely disable prefetching, as it clogs the server for larger e-commerce sites.

but on lighthouse prefetch will still request when i set prefetch to false and it's reduce the performance score how can i disable prefetch?

We see a lot of 404 with this feature.

Our use case is a language selector, where you can switch to the corresponding page in another language. In our case EN | NO. When I'm on the Norwegian version of like /no/om-oss and hover the link to 'EN', Next.js will "help" me and prefetch both /en/about-us.json and /no/about-us.json. The last one does of course not exist since our URLs are translated and the result is a 404 which is bloating our logs. :/

IMO, prefetch={false} should disable prefetching at all. Users may hang up your server by simply hovering the mouse all over the page that contains a lot of links. Please, at least consider caching the prefetch response, but the best solution would be avoid prefetching when not needed.

I'd like to also vote for prefetch={false|hover|true}

where true is the default behavior we have today; hover is prefetch on link hover (what today is called false), and false is completely disabled.

this would give devs full control

alternative naming options: prefetch={"all"|"hover"|"off"}, where default behavior is "all"

I also vote on @NawarA's way of implementation.

Whether to prefetch or not should be decided solely by the developer not the framework.

I wanted a my links to never prefetch, even on hover. So, I created a custom link to use for my needs. I use it like:

const MyLink = () => (
    <MainLink href="/path/to/page">
        Click Me
    </MainLink>
)

Below is a reference of my implementation (with a few changes):

import { useRouter } from 'next/router';
import type { HTMLAttributeAnchorTarget } from 'react';
import React from 'react';

export interface MainLinkProps {
    href?: string;
    target?: HTMLAttributeAnchorTarget | undefined;
    className?: string;
    children: React.ReactNode;
}

const MainLink: React.FC<MainLinkProps> = React.forwardRef(
    (
        { href, target, className, children }: MainLinkProps,
        ref: React.Ref<HTMLAnchorElement> | undefined,
    ) => {
        const router = useRouter();

        const handleClick = React.useCallback(
            async (e: React.SyntheticEvent) => {
                if (href) {
                    e.preventDefault();
                    return await router.push(href);
                }
            },
            [router, href],
        );

        return (
            <a
                ref={ref}
                className={className}
                target={target}
                href={href || '/'}
                onClick={handleClick}
            >
                {children}
            </a>
        );
    },
);

export default MainLink;