What is NextJs prefetching and why should I care

📖 Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

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}>

📖 Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

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

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X