Learning the Code Way

Prefetching in Next.js

Opeyemi Ojo's photo
Opeyemi Ojo
·

4 min read

Prefetching in Next.js

Photo by Thought Catalog on Unsplash

Prefetching in Next.js is a powerful feature that enhances the user experience by preloading the resources for a page before the user navigates to it. This process is particularly associated with the Link component in Next.js. Here's a detailed explanation:

Automatic Page Preloading

  1. How Prefetching Works: When a Link component is included in a Next.js page and rendered into the viewport, Next.js automatically starts prefetching the resources for the page that the Link points to. This prefetching happens in the background and is typically not noticeable to the user.

  2. Detection of Links in Viewport: Next.js intelligently detects which links are likely to be clicked by observing which links are in the viewport. For instance, links that are visible on the screen or about to be scrolled into view are considered candidates for prefetching.

  3. Fetching Resources: The resources that are prefetched include the JavaScript code (the bundled file for the page) and, depending on your application's setup, potentially other resources like data needed for that page (if you're using a feature like getStaticProps or getServerSideProps).

Speeding Up Navigation

  1. Immediate Availability: When a user clicks on a prefetched link, since the required resources are already loaded in the background, the page can be displayed almost instantly. This significantly speeds up the navigation as the browser doesn't need to fetch the JavaScript and other resources at click-time.

  2. Seamless User Experience: This seamless transition gives the appearance of a very fast, almost instant, navigation experience, which is a significant improvement over traditional page loads where resources are only fetched after the user clicks the link.

  3. Intelligent Resource Management: Next.js handles the prefetching intelligently, taking into account the user's bandwidth and the priority of resources. It avoids prefetching when it detects a slow network to keep the app responsive.

Prefetching involving data from an API

When prefetching in Next.js involves fetching data from an API, the process becomes slightly more complex, depending on how your application is structured and how it fetches data. Here are the key points to understand:

Prefetching Static Generation Pages (getStaticProps)

  1. Build Time Data Fetching: If your Next.js pages use getStaticProps for data fetching, the data is fetched at build time. This means the data for these pages is fetched and rendered to HTML during the build process, not at runtime.

  2. Client-Side Data Fetching: However, if your page needs to fetch data client-side (for instance, for dynamic user content), you might not benefit as much from prefetching the page itself, as the API call will still need to occur after navigation.

Prefetching Server-Side Rendered Pages (getServerSideProps)

  1. Runtime Data Fetching: For pages using getServerSideProps, data is fetched at runtime for each request. Prefetching these pages means that the page's code is prefetched, but the data fetching still happens at the time of actual navigation.

  2. No Preloading of Data: Prefetching in this case does not preload the data from your API. The API call is made when the user navigates to the page, and the server renders the page with the fresh data on each request.

Prefetching Pages with Client-Side Data Fetching

  1. API Calls on Navigation: If a page fetches data directly from an API on the client-side (using useEffect, fetch, axios, etc.), prefetching the page only loads the JavaScript bundle.

  2. Data Fetching After Navigation: The actual data fetching from the API occurs after the user has navigated to the page, which means there can still be a loading state while the API request is in progress.

Hybrid Approach

  1. Static + Client-Side Fetching: A common pattern in Next.js is to use a combination of getStaticProps (or getServerSideProps) for the initial page load, and then handle updates or dynamic content with client-side data fetching.

  2. Initial Load Advantage: This approach benefits from prefetching for the initial load, and subsequent data updates are handled client-side as the user interacts with the page.

Example of Prefetching

Consider a typical Next.js application with a navigation menu:

jsxCopy codeimport Link from 'next/link';

const Navbar = () => {
  return (
    <nav>
      <Link href="/home"><a>Home</a></Link>
      <Link href="/about"><a>About</a></Link>
      <Link href="/contact"><a>Contact</a></Link>
    </nav>
  );
};

In this example:

  • When the Navbar is rendered, Next.js starts prefetching the pages for /home, /about, and /contact.

  • As these resources are loaded in the background, when a user clicks on any of these links, the transition to the clicked page is much faster compared to a standard load.

Conclusion

Prefetching in Next.js improves the speed and fluidity of navigating a web application by loading resources before they are actually needed. This is part of what makes Next.js applications feel so responsive and contributes to a better overall user experience. It's important to note that prefetching is enabled by default in production builds of Next.js apps, reflecting its significance in performance optimization.

Next.jsReactrouting