In my root page.tsx, I have some basic content as well as some links.
One of these <Link>s lead to a page that fetches data from an external API.
This page (and the API calls on it) are prefetched whenever the button is visible on the root.tsx.
#I have a website that loads slowly at times
buoyant horizon
subtle lavaBOT
Hi @buoyant horizon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, the <Link> component has a prefetch prop that defaults to true. This means that when a <Link> is in the viewport (initially or through scroll), Next.js will prefetch the page denoted by the href prop in the background. This is useful for improving the performance of client-side navigations.
Here's an example of how you might use it in your page.tsx:
import Link from 'next/link'
export default function Page() {
return (
<Link href="/dashboard" prefetch={false}>
Dashboard
</Link>
)
}
In this example, the prefetch prop is set to false, which means that the page /dashboard will not be prefetched. If you want to enable prefetching, you can either set prefetch={true} or simply omit the prefetch prop, as it defaults to true.
Please note that prefetching is only enabled in production.
For more information, you can refer to the Next.js documentation on the Link component (https://nextjs.org/docs/pages/api-reference/components/link).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
buoyant horizon
@subtle lava I disabled prefetching for any Links to this page, but that also disabled fetching when the Link was hovered
subtle lavaBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, when you set the prefetch prop to false in the <Link> component, it disables all types of prefetching, including on hover. This is because the prefetch prop controls whether or not the page denoted by the href prop is fetched in the background before the link is clicked.
If you want to prefetch the page when the link is hovered, you would need to keep the prefetch prop set to true (or simply omit it, as it defaults to true). However, this would also enable prefetching when the link is in the viewport.
Unfortunately, based on the information provided in the extracts, there doesn't seem to be a built-in way in Next.js to enable prefetching on hover while disabling it when the link is in the viewport.
For more information, you can refer to the Next.js documentation on the Link component (https://nextjs.org/docs/pages/api-reference/components/link).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
buoyant horizon
@subtle lava Let's say I have a page, /dashboard, that is an async server component that fetches data.
Would a prefetch to this page make the first paint slower on the root page.tsx?
subtle lavaBOT
Let me check the knowledge base for you. One moment! :books:
Prefetching in Next.js is designed to improve the performance of client-side navigations by fetching the page in the background before it's visited. The rendered result of prefetched routes is added to the router's client-side cache, making navigating to a prefetched route near-instant (source (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating)).
However, prefetching does consume network and CPU resources. If a page has a lot of links that are being prefetched, it could potentially slow down the initial paint of the page, especially if the prefetched pages are large or complex, or if the user's device or network is slow.
In the case of your /dashboard page, if it's an async server component that fetches data, prefetching it would involve fetching the data and rendering the component on the server, then sending the result to the client. This could potentially slow down the first paint of the root page.tsx if the data fetching or server-side rendering is slow, or if the resulting HTML and JavaScript is large.
However, it's also worth noting that prefetching in Next.js is smart. If the route is static, all the Server Component payloads for the route segments will be prefetched. If the route is dynamic, the payload from the first shared layout down until the first loading.js file is prefetched. This reduces the cost of prefetching the whole route dynamically (source (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating)).