What is NextJs prefetching and why should I care

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 classic a’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.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X