Caching and Revalidation

10 min read

How Next.js Caches Data

Next.js extends the native fetch API with caching options. By default in Next.js 15, fetch calls are not cached (equivalent to cache: "no-store"). You explicitly opt into caching when you want it.

Caching Options

// No cache — always fresh data
const res = await fetch("/api/data", { cache: "no-store" });

// Cache indefinitely (until revalidated or redeployed)
const res = await fetch("/api/data", { cache: "force-cache" });

// Revalidate every 60 seconds (ISR)
const res = await fetch("/api/data", { next: { revalidate: 60 } });

// Revalidate by tag — pair with revalidateTag()
const res = await fetch("/api/data", { next: { tags: ["posts"] } });

On-Demand Revalidation

You can purge cached data on demand from a Server Action or Route Handler using revalidateTag or revalidatePath from next/cache.

import { revalidateTag, revalidatePath } from "next/cache";

// Bust all fetches tagged with "posts"
revalidateTag("posts");

// Regenerate a specific path
revalidatePath("/blog");

Use revalidateTag in a Server Action that runs after a CMS publish event to keep your site fresh without rebuilding. This is the modern replacement for webhook-triggered ISR rebuilds.

Ready to test yourself?

Practice Next.js— quiz & coding exercises