Let's say you have a NextJs site with an index.js
page that links to an about page and contact page:
import Link from 'next/link'
export default () => (<div>
<h1>My Index page</h1>
<nav>
<Link href='/contact'><a>Contact</a></Link>
<Link href='/about'><a>About</a></Link>
</nav>
</div>)
Out of the box the NextJs framework will search for the Link
tags and will preload and render the linked pages. So, when user decides to click a link like<Link href="/contact">
the transition to the target page will be blazing fast. This the prefetching functionaliaty in NextJs.
Some notes on prefetching:
- it only works just for the local internal pages of the current site. For example, if we have  the google.com page will not be prefetched and so the transition will be slower
- initilay, only the pages that have links in the visible viewport will be prefetched. NextJs will watch as the user scrolls and brings new links into the viewport and will prefetched the content for those pages as their links appear on the screen
- the Nextjs prefetching will work only if you use theÂ
<Link>
 tags. Using the plain oldÂ<a>
 will not trigger a prefecthing. In general, it’s not a good idea to use the classica
’s in NextJs - what if the user press the back button? Nothing new will be loaded, because the browser still has the old index.js bundle in place, ready to instantly show the /index route. It’s all automatic.
- if the server sends theÂ
save-data
 HTTP header NextJs prefetching will not work - the prefetching behavior is only being triggered in production mode. In order to see it in action be sure to stop the app if in development mode. You will need to stop
npm run dev
and after useÂnpm run build
 andÂnpm run start
 to use the production bundle. You can see here more instructions on how to setup our first NextJs project. - you can disable the prefeching of link by setting the
prefetch
atrribute:<Link href='/index' prefetch={false}>
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.