Next.js Caching: A Practical Guide

Caching in Next.js can feel overwhelming — there are multiple layers, each with its own behavior. Let's break them down.

The Four Caching Layers

1. Request Memoization

React automatically deduplicates fetch requests with the same URL and options during a single render pass.

// These two calls result in ONE actual request
async function Layout() {
  const user = await fetch("/api/user");
  return <Nav user={user} />;
}

async function Nav({ user }) {
  const sameUser = await fetch("/api/user"); // Deduplicated!
  return <nav>{sameUser.name}</nav>;
}

2. Data Cache

Next.js caches the result of fetch requests in a persistent data store.

// Cached indefinitely (default in production)
fetch("https://api.example.com/data");

// Revalidate every 60 seconds
fetch("https://api.example.com/data", { 
  next: { revalidate: 60 } 
});

// Never cache
fetch("https://api.example.com/data", { 
  cache: "no-store" 
});

3. Full Route Cache

Static routes are rendered at build time and cached as HTML.

4. Router Cache

The client-side router caches visited route segments for instant back-navigation.

Opting Out of Caching

Sometimes you need fresh data. Here's how:

// Route-level
export const dynamic = "force-dynamic";

// Or use unstable_noStore
import { unstable_noStore } from "next/cache";

async function Component() {
  unstable_noStore();
  const data = await fetchFreshData();
}

Revalidation Strategies

Time-based: { next: { revalidate: seconds } }
On-demand: revalidatePath() or revalidateTag()

Understanding these layers helps you build blazing fast applications without sacrificing data freshness.