A Visual Guide to Prefetching in Next.js 13

Picture this: a user clicks on a link, eagerly anticipating the next page. In the blink of an eye, the content magically appears, as if the website knew exactly what the user wanted. It's like having a psychic web server that predicts your every move. Welcome to the powerful concept of prefetching in Next.js 13.

Prefetching

Prefetching is a technique used to speed up the loading of web pages by preloading some content in the background before it's actually needed. Instead of waiting for the user to click on a link and then fetching the content from the server, prefetching proactively loads the anticipated pages or parts of a website. This way, when the user eventually requests that content, it can be displayed almost instantly, eliminating any noticeable delay.

<link rel="prefetch" href="https://www.builder.io/about-us" />

The prefetch keyword for the rel attribute of the link element is a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource.

📖 Other resource hints worth looking at include dns-prefetch, preconnect and preload.

Prefetching during development

During the development process in Next.js 13, prefetching routes is as smooth as it gets. It happens when you simply hover over a Link component in the user interface. This means that as you navigate through your application during development, Next.js automatically fetches and caches the content of the next page based on your interactions. It provides a seamless experience and gives you a glimpse of how the final performance will look and feel.

Visualization

Prefetching in production builds

Once your application is built and ready for production, Next.js 13 takes prefetching a step further. In production, routes are prefetched as they become visible in the viewport. This can occur during the initial page load or when the user scrolls through the website. As soon as a Link comes into view, Next.js proactively fetches and caches the route content, ensuring that when the user clicks on a link to navigate, the page transition is instantaneous.

Visualization

Turning off prefetching

While prefetching greatly enhances user experience, it's crucial to consider specific scenarios where you might want to customize or limit its behavior. Next.js offers flexibility in this regard.

If you want to disable prefetching for specific links, you can easily achieve that by using the prefetch attribute on the Link component and setting it to false.

<Link href="/blog" prefetch={false}>Blog</Link>

This prevents Next.js from prefetching the content when the user hovers over the link. It can be handy for conserving bandwidth or addressing privacy concerns related to data access or tracking through prefetching.

Programmatically prefetching routes

Next.js provides a powerful method to programmatically prefetch routes using the prefetch method on the router object returned from the useRouter hook.

import { useEffect } from "react";
import { useRouter } from "next/router";

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    router.prefetch("/predicted-route");
  }, [router]);

  return (
    // Component content
  );
};

By calling router.prefetch() with the full path of a route, you can prefetch that specific route. This is particularly useful when you know beforehand that the user is likely to navigate to a particular page. By prefetching it in advance, you ensure a seamless and instant transition without any additional requests.

Conclusion

Prefetching routes is a powerful technique that Next.js 13 offers to optimize web page loading and create a smooth navigation experience. By prefetching the content in advance, based on user behavior predictions, Next.js significantly reduces perceived loading time and provides a seamless transition between pages.

During development, routes are prefetched when you hover over Link components, giving you a real-time preview of how your application will perform. In production builds, routes are prefetched as they become visible in the viewport, ensuring lightning-fast transitions.

You have the flexibility to fine-tune prefetching behavior by disabling prefetching for specific links or programmatically prefetching routes that you know the user is likely to visit. With the right implementation, prefetching can take your Next.js application to new heights, providing an exceptional user experience.