Revalidation
After saving, refetch exactly what changed
Instead of switching caching off, you tell Next.js precisely when something is stale. The page stays fast and is still current.
The previous lesson ended with a dilemma: caching makes things fast, but data goes stale. The resolution is not to turn the cache off – it is to invalidate it at the right moment.
Two routes
By time revalidate: 60
"at most a minute old" – without you doing
anything. Good for third-party content.
On demand revalidatePath() / revalidateTag()
"stale as of right now" – after YOU changed
something. Good for your own data.The difference in one sentence: by time you are guessing how quickly something goes stale. On demand you know.
By time
// For the whole page
export const revalidate = 3600; // hourly
// Or per request
const rates = await fetch(url, { next: { revalidate: 300 } });Next.js serves the cached version and rebuilds in the background. Only the next visitor sees the fresh data. That is deliberate: nobody has to wait for the rebuild. The term for it is ISRA static page with an expiry date: after the configured time Next.js rebuilds it in the background.Short for Incremental Static Regeneration. Configured through `revalidate`.→.
On demand
"use server";
import { revalidatePath, revalidateTag } from "next/cache";
export async function savePost(id: string, data: FormData) {
await db.post.update({ where: { id }, data: … });
// Option 1: one specific address
revalidatePath("/blog/" + id);
revalidatePath("/blog"); // the overview as well
// Option 2: everything carrying this tag
revalidateTag("posts");
}// Attach a tag when fetching …
await fetch(url, { next: { tags: ["posts"] } });
// … and invalidate everything with it later.
revalidateTag("posts");After editing a post, not only /blog/my-post is stale but also /blog and perhaps the home page. Clear only the single case and you will wonder why the list still shows the old title. Tags solve exactly that.
Which one when
- +
By time for data you do not control: exchange rates, weather, a third-party feed
- +
On demand for everything you change yourself – from inside a server action
- +
Both together: on demand as the rule, time as a safety net
- −
no-storeeverywhere just to dodge the topic - −
Very short intervals (
revalidate = 1) – that is dynamic with extra steps - −
Doing nothing after saving and hoping
If the content lives in an external CMS, that system can call an address on your site after publishing (a webhook). Inside it you call revalidateTag(...). The site then becomes current the moment somebody publishes – with no interval to guess.
▸ In more depth: what revalidate does not touch optional
revalidatePath clears the server-side cache. The Router cacheThe store in the browser: navigating back shows the page instantly from memory.→ in the user's browser is untouched at first – which is why you sometimes still see the old state after saving.
"use client";
import { useRouter } from "next/navigation";
const router = useRouter();
router.refresh(); // refetches the current page from the serverIf you call revalidatePath within a server action, Next.js refreshes the current view along with it. You only need router.refresh() when the change happened outside React's knowledge.
Does it stick?
4 questions on this lesson. Wrong answers show up in your stats.