0PricingLogin▼
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Time-Based and On-Demand Revalidation Strategies

Combine revalidate intervals with revalidatePath and revalidateTag for precise freshness control.

Two Axes of Freshness

In the App Router, a cached route or fetch can be refreshed along two independent axes:

  • Time-based revalidation: data goes stale after a fixed number of seconds (revalidate).
  • On-demand revalidation: you explicitly invalidate cache when something actually changes, using revalidatePath or revalidateTag.

Real apps combine both. Time-based gives a safety net so content never gets too old; on-demand gives instant updates when you control the write. This lesson shows how to wire them together for precise freshness control.

Time-Based with the Segment Config

The simplest time-based strategy is the route segment revalidate export. Next.js will serve the cached render until the interval elapses, then regenerate it in the background (stale-while-revalidate).

A value of 3600 means "at most one hour old". Setting 0 opts out of caching for the segment; false caches indefinitely.

// app/products/page.tsx
// Revalidate this Server Component page at most once per hour
export const revalidate = 3600;

export default async function ProductsPage() {
  const res = await fetch('https://api.example.com/products');
  const products: { id: string; name: string }[] = await res.json();

  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

All lessons in this course

  1. The Four Caches: Request, Data, Full Route, and Router
  2. Time-Based and On-Demand Revalidation Strategies
  3. Tag-Based Invalidation for Granular Cache Busting
  4. Opting Out: Dynamic Rendering and no-store
← Back to Next.js 15 Fullstack (App Router + Server Actions)