Full Route Cache in Next.js: What It Is and How It Works

In Next.js, full route cache refers to storing the entire rendered page output for a route so it can be served instantly on repeat visits without rebuilding. This caching speeds up page loads by delivering pre-built HTML and data, improving performance and user experience.

How It Works

Imagine you have a favorite recipe book. Instead of cooking the dish from scratch every time, you keep a ready-made meal in the fridge to grab quickly. Full route cache in Next.js works similarly by saving the complete page output after it is first built.

When a user visits a page, Next.js builds the page by running React code and fetching data. With full route caching, this built page is saved so that the next visitor gets the ready page instantly, without waiting for the build process again.

This cache stores the full HTML and data for the route, making the page load very fast. It’s like having a shortcut to the final page instead of retracing all the steps every time.

Example

This example shows how Next.js can cache a page using getStaticProps with revalidate to enable Incremental Static Regeneration, which is a form of full route caching.

javascript

export async function getStaticProps() {
  // Simulate fetching data
  const data = { message: 'Hello from cached page!' };

  return {
    props: { data },
    // Rebuild the page every 10 seconds to update cache
    revalidate: 10,
  };
}

export default function CachedPage({ data }) {
  return <div>{data.message}</div>;
}

Output

<div>Hello from cached page!</div>

When to Use

Use full route cache in Next.js when your pages have data that does not change on every request but should update occasionally. It is perfect for blogs, marketing pages, or product listings where fast load times improve user experience.

It helps reduce server load and speeds up delivery by serving pre-built pages. If your page data changes frequently or depends on user-specific info, full route cache might not be suitable.

Key Points

• Full route cache stores the entire page output for fast repeat delivery.
• Next.js uses features like getStaticProps with revalidate to enable this caching.
• It improves performance by serving pre-built HTML and data.
• Best for pages with mostly static content that updates occasionally.
• Not ideal for highly dynamic or user-specific pages.

Key Takeaways

Full route cache saves the entire rendered page to serve instantly on repeat visits.

Next.js supports this caching using static generation with revalidation.

It greatly improves page load speed and reduces server work.

Ideal for mostly static pages that update infrequently.

Avoid full route cache for pages needing real-time or user-specific data.