3

so it seems I'm using the latest version of Nextjs which is 13.2.4v, i also not using the app or src directory. the problem is when i hover on the Link Next component, it will send a request to the server, we know that will reduce the performance. i found this solution and nothing works:

// pages/blog/[articleId]

const index = ({ articles }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div>
      {articles.map(({ id, title }) => (
        <div key={id}>
          <h1>{id}</h1>
          <Link href={`blog/${id}`} prefetch={false}>
            <h2>{title}</h2>
          </Link>
        </div>
      ))}
    </div>
  );
};

this will just disable the pre-rendering on page load, until you hover on it will then pre-fetching and send the request to the server.

so is there any way to disable this prefetching on each hover?

kxown
  • 95
  • 1
  • 6
  • 1
    Does this answer your question? [How can turn off page prefetching Next.js Link on hover?](https://stackoverflow.com/questions/75047263/how-can-turn-off-page-prefetching-next-js-link-on-hover) – matthiasgiger Mar 24 '23 at 16:17
  • @matthiasgiger not really – kxown Mar 24 '23 at 20:42

1 Answers1

2

By default any <Link /> that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch={false}. When prefetch is set to false,

prefetching will still occur on hover.

Pages using Static Generation will preload JSON files with the data for faster page transitions. Prefetching is only enabled in production.

It seems that in Next 13 this is the expected behavior, which it wasn't in older versions. https://github.com/vercel/next.js/issues/38360

Refer the comment by a Vercel member. I found this weird as well.

If you want to bypass this however, refer this

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;

courtesy: https://github.com/vercel/next.js/discussions/24437#discussioncomment-1247003

mmmcho
  • 209
  • 2
  • 7