I'm using next 13 for my project and want to enable prefetch for <Link> but only on hover instead of everytime when link is in viewport
#Next 13: Prefetch on hover
polar ravine
wet eagleBOT
Hi @polar ravine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, it seems that there is currently an open issue on GitHub regarding the prefetching behavior of the Link component in Next.js when prefetch=false is set. The user reports that the Link component is not prefetching the route on hover as expected (source (https://github.com/vercel/next.js/issues/50412)).
The Next.js documentation states that by default, the Link component automatically prefetches routes when they become visible in the viewport. This behavior can be disabled by setting the prefetch prop to false (source (https://nextjs.org/docs/pages/api-reference/components/link#prefetch), source (https://nextjs.org/docs/app/api-reference/components/link#prefetch), source (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)).
However, it's important to note that even when prefetching is disabled, the route will still be cached client-side when the user visits the route (source (https://nextjs.org/docs/app/building-your-application/caching#link)).
There is also a closed GitHub issue that mentions a rework of the client-side cache in next@13.4.0, which includes a timer of 30 seconds for dynamic pages. The issue also mentions potential future updates that would allow for prefetching on hover and setting the stale time on the client-side cache (source (https://github.com/vercel/next.js/issues/42991)).