Next.js Caching: When and How to Revalidate Data

Why it exists

Modern web apps need to be both fast and accurate. Serving data from a cache is fast, but the data can become stale. Fetching fresh data for every request is accurate but slow. Caching with revalidation provides a necessary compromise, allowing developers to define rules for when to invalidate and refetch data.

The mental model

Think of the Next.js data cache as a smart pantry. By default, it stocks an item (a piece of data) and keeps it forever. Revalidation is your instruction list for the pantry. Time-based revalidation is like a note saying, "Toss the milk after 7 days." On-demand revalidation is like pressing a button that says, "We just used the last egg, go buy more now."

How it works

Next.js extends the native fetch API to integrate with its caching system. By default, any data fetched with fetch in a Server Component is cached indefinitely. You control this behavior in two main ways. First, for time-based revalidation, you add an option to your fetch call: fetch('...', { next: { revalidate: 3600 } }) to refetch the data at most once per hour. Second, for on-demand revalidation, you use functions like revalidatePath('/products') or revalidateTag('product-list') inside Server Actions. These are typically called right after a database mutation to invalidate the relevant cached data.

When to use it

Use time-based revalidation for data that updates periodically but doesn't need to be real-time, like a news homepage. Use on-demand revalidation for data that changes as a direct result of user actions, such as updating a profile or posting a comment. This ensures the UI reflects the change on the next page load.

When not to use it

Avoid caching for data that must be absolutely real-time and is unique to a user session, like a shopping cart's contents. For these cases, you can explicitly opt out of caching by using fetch('...', { cache: 'no-store' }). Using dynamic functions like cookies() or headers() also opts a route out of static caching.

One canonical example

A user submits a form to update their bio. The form calls a Server Action. This action first updates the bio in the database. Immediately after the database write succeeds, the action calls revalidatePath('/profile'). The next time anyone navigates to /profile, Next.js knows its cached version is stale and will fetch the new data, displaying the updated bio.