Learn why Gartner just named Builder a Cool Vendor

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Web Development

A Visual Guide to Prefetching in Next.js 13

July 6, 2023

Written By Vishwas Gopinath

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.

Introducing Visual Copilot: convert Figma designs to high quality code in a single click.

Try Visual Copilot

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
AI8 MIN
Generate Figma Designs with AI
November 25, 2024
Design to code5 MIN
Builder.io Named a Cool Vendor in the 2024 Gartner® Cool Vendors™ in Software Engineering: User Experience
November 21, 2024
AI8 MIN
How to Build Reliable AI Tools
November 15, 2024