Why is prefetching disabled on hover in the App Router?

[developer-choi]

In the Pages Router, prefetching used to happen on hover.
(Reference: https://nextjs.org/docs/pages/api-reference/components/link#prefetch)

false: Prefetching will not happen when entering the viewport, but will happen on hover.

However, this feature has been removed in the App Router.
Why was it removed?

In our application, we are considering extending the Link component to call prefetch() on the MouseEnter event.

But since this feature existed in the Pages Router but is missing in the App Router,
we would like to know why the Next.js team decided to remove it.

Was it removed because excessive prefetching could put too much load on the server,
for example, when users rapidly move their mouse and trigger multiple prefetch requests on hover?

Could you explain the reasoning behind this change?

[icyJoseph]

People didn't like it, and pushed over and over, for a total disable of prefetch, even on hover.

#24437

Here is the PR where these semantics where introduced: #48383

[developer-choi]

@icyJoseph
Thank you so much for your detailed response! I really, really appreciate it.

[bdlowery]

Ok, but they could have added prefetch={hover} instead if completely disabling it.... I don't get the logic.

[bohdan-shulha]

I am building a no-code directory builder and prefetching everything and everywhere is a huge performance & costs hit for me.

I decided to disable built-in prefetching altogether, yet I replaced it with prefetching on mousedown/touchstart events to achieve, at least, minor improvements.

"use client";

/* eslint-disable no-restricted-imports */
import NextLink from "next/link";
import { useRouter } from "next/navigation";
import { PrefetchKind } from "next/dist/client/components/router-reducer/router-reducer-types";

export const Link = ({
  href,
  children,
  className,
}: {
  href: string;
  children: React.ReactNode;
  className?: string;
}) => {
  const router = useRouter();

  const handleMouseDown = () => {
    router.prefetch(href, {
      kind: PrefetchKind.FULL,
    });
  };

  return (
    <NextLink
      href={href}
      className={className}
      prefetch={false}
      onMouseDown={handleMouseDown}
      onTouchStart={handleMouseDown}
    >
      {children}
    </NextLink>
  );
};