Next.js prefetching | Sajad Torkamani

Next.js automatically prefetches routes linked with the <Link> component when they enter the user’s viewport.

import Link from 'next/link'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <nav>
          {/* Prefetched when the link is hovered or enters the viewport */}
          <Link href="/blog">Blog</Link>
          {/* No prefetching */}
          <a href="/contact">Contact</a>
        </nav>
        {children}
      </body>
    </html>
  )
}

How much of a route is prefetched depends on whether the route is rendered statically or dynamically:

Static routes: the full route is prefetched.
Dynamic routes: prefetching is skipped, or the route is partially prefetched if there’s a loading.tsx file.

Tagged: Next.js