Revalidation

Definition

The process of purging the Next.js Data Cache and re-fetching fresh data.

Explain Like I'm New

Next.js caches your fetch requests to make your site fast. But if you update a blog post, the cache is now wrong. Revalidation is how you tell Next.js: 'Hey, throw away that old cached version and grab the new one.'

Real World Example

Time-based: Revalidating a 'Live Weather' API every 60 seconds. On-demand: Revalidating the 'Products' page the exact millisecond an admin clicks 'Save' in the CMS.

Common Use Cases

•Keeping cached data fresh
•CMS webhooks
•ISR (Incremental Static Regeneration)

Interactive Example

/* 1. Time-based Revalidation (ISR) */
export default async function Weather() {
  // Fetches fresh data every 60 seconds
  const res = await fetch('https://api.weather.com', { 
    next: { revalidate: 60 } 
  });
}

/* 2. On-demand Revalidation Tags */
export default async function Articles() {
  // We tag this fetch request with 'articles'
  const res = await fetch('https://api.cms.com/articles', { 
    next: { tags: ['articles'] } 
  });
}

// Later, in an API route or Server Action, when an admin publishes a new article:
// import { revalidateTag } from 'next/cache';
// revalidateTag('articles'); // Instantly purges the cache!

Interview Questions

basic

What are the two main types of revalidation in Next.js?

intermediate

If you set `revalidate: 3600`, how often does the data refresh?

Flash Cards

Question

Two types?

Click to reveal answer

Answer

1. Time-based (Background revalidation every X seconds). 2. On-demand (Triggered manually via an API route or Server Action).

Question

How often?

Click to reveal answer

Answer

Every 3,600 seconds (1 hour). Next.js will serve the cached version for an hour, and then rebuild it in the background on the next request.