Whenever I navigate to a new page with a NextLink component, it takes 2-3 seconds, and then the entire page is refreshed
#Navigating to a new page with NextLink results in a force refresh after 2-3s after loading the new p
young star
tawny tinselBOT
Hi @young star. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
It seems like you're experiencing slow navigation with the <Link> component in Next.js. The <Link> component is designed to provide prefetching and client-side navigation between routes, which should improve the performance of client-side navigations.
import Link from 'next/link';
export default function Page() {
return <Link href="/dashboard">Dashboard</Link>;
}
(Source: Linking and Navigating (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating))
By default, prefetching is enabled, and any <Link> in the viewport will be preloaded. However, prefetching is only enabled in production.
<Link href="/dashboard" prefetch={false}>
Dashboard
</Link>
(Source: Next.js > app > api-reference > components > link > <Link> > Props > prefetch (https://nextjs.org/docs/app/api-reference/components/link))
If you're experiencing slow navigation, it could be due to several factors:
-
You might be running your application in development mode, where prefetching is disabled. Make sure you're running your application in production mode to take advantage of prefetching.
-
If a new page (with an old version) has already been prefetched by
next/link, Next.js will use the old version. Navigating to a page that has not been prefetched (and is not cached at the CDN level) will load the latest version.(Source: Automatic Updates (https://nextjs.org/docs/app/building-your-application/deploying))
-
Network latency or server-side rendering could also contribute to slow navigation. You might want to optimize your application by using static generation or server-side rendering with caching.