The Link (next/link) Component
In a production build, if the linked targets of any <Link /> components are statically generated, once in the viewport, the <Link /> components will try to prefetch the linked routes from the Next.js Full Route Cache and add the Server Component Payload to the Router Cache, including the corresponding data fetched by getStaticProps(). Even when the prefetch prop of a <Link /> is set to false, it will not skip the cache permanently. When the user visits the route, the route segment will still be cached on the client-side inside the Route Cache.
The behaviour can be manipulated by manually calling router.refresh or router.prefetch of the useRouter hook.
On the other hand, Server-Side Rendered (SSR) pages and their data are requested only when the links are clicked.
The next/link component enables client-side navigation. It only updates parts of the page (through partial rendering) and changes the URL when navigating to a different page without resulting in a full page load, made possible by the auto code-splitting feature. Together with prefetching, Next.js makes navigating between pages instant and frictionless.
The routing system also caches the rendered Server Components in-memory on the client-side, split by route segments to allow updates at any level.
link component is the primary way to navigate between Next.js routes.
import Link from 'next/link'
export default function Page() {
return <Link href="/dashboard">Dashboard</Link>
}