Caching and Revalidation

Why cache at all?

A cache is a saved copy of a result, kept so you do not have to do the slow work again. If ten thousand people open the same blog post, fetching its data from the database ten thousand times is wasteful — the post did not change. Next.js caches the result of a fetch by default, so after the first request the saved copy is reused. Pages stay fast and your database stays calm.

But a cache has a catch: if the real data changes, the saved copy can become stale (out of date). The whole art of caching is deciding when to refresh. Next.js gives you three precise ways.

Way 1 — refresh on a timer (time-based)

Tell a fetch to consider its cached copy fresh for a number of seconds with the next: { revalidate } option. After that time, the next visitor triggers a quiet refresh in the background.

// Re-fetch this data at most once every 60 seconds
const res = await fetch('https://example.com/api/prices', {
  next: { revalidate: 60 },
});
const prices = await res.json();

Way 2 — refresh a page on demand (revalidatePath)

A timer is fine for prices, but for something like "I just added a blog post, show it now", you do not want to wait 60 seconds. After you change data (usually in a Server Action), call revalidatePath to tell Next.js: "the cached version of this page is stale — rebuild it." (Recall a Server Action from the earlier lesson: a use server function a form calls to change data.)

// app/actions.js
'use server';
import { revalidatePath } from 'next/cache';

export async function addPost(formData) {
  const title = formData.get('title');
  // ...save the new post to the database...
  revalidatePath('/blog');   // the blog list is now stale — refresh it
}

Way 3 — refresh by label (revalidateTag)

Sometimes the same data appears on several pages — a product shows on /products, /products/5 and the home page. Refreshing each path by hand is error-prone. Instead, tag the fetch with a label, then later refresh everything with that tag in one call.

// Tag the fetch with a label
const res = await fetch('https://example.com/api/products', {
  next: { tags: ['products'] },
});

// Later, in a Server Action after editing a product:
import { revalidateTag } from 'next/cache';
revalidateTag('products');   // refreshes every fetch tagged 'products'

A worked example: a shop

Imagine a shop where an admin edits a product price. Here is the full flow, step by step:

1. The product list page fetches products with next: { tags: ['products'] } — so the data is cached and labelled "products".
2. Thousands of shoppers load the page; they all get the fast cached copy. The database is barely touched.
3. The admin opens an edit form and changes a price. The form calls a Server Action.
4. Inside the action, after saving the new price, you call revalidateTag('products').
5. Next.js marks every "products" fetch stale. The next shopper to load the list gets a freshly rebuilt page with the new price — instantly and automatically.