Caching and revalidation

Last reviewed May 28, 2026 Content v20260528

Track mode

client_nextjs

Means

In-browser Next.js (client components)

Reading

~1 min

Level

advanced

This lesson

This lesson teaches Caching and revalidation: the concepts, APIs, and habits you need before advancing in Next.js.

Without Caching and revalidation, you will struggle to read or extend Next.js codebases and playground exercises.

You will apply Caching and revalidation in contexts like: Marketing sites, dashboards, e-commerce, and Vercel-style deployments that need hybrid static + dynamic pages.

Write TSX for Client Components, click Run—React 18 CDN + in-browser TSX compile; use client/server lessons explain App Router concepts; mountApp renders interactive UI; printOutput feeds the terminal.

When hooks, state, and effects from intermediate lessons are familiar.

Next.js extends fetch with a Data Cache and tools to revalidate stale content—static speed with fresher data when you need it.

Time-based revalidation

fetch(url, { next: { revalidate: 3600 } }); // ISR: refresh at most every hour

On-demand revalidation

import { revalidatePath, revalidateTag } from 'next/cache';

// After a mutation:
revalidatePath('/blog');
revalidateTag('posts');

Tag fetches with next: { tags: ['posts'] } and bust cache when content changes.

Opting out of cache

fetch(url, { cache: 'no-store' }); // always fresh — dynamic rendering

Mental model

Static — build time, shared across users
Dynamic — per-request when using cookies, headers, or no-store
Revalidated — cached but refreshed on a timer or after mutations

Self-check

When would you use revalidate: 60 vs cache: 'no-store'?
What triggers on-demand revalidation after an admin edit?

Tip: Tag fetches with next: { tags: ['posts'] } and call revalidateTag after admin edits—cleaner than blanket no-store.

Interview prep

revalidate vs no-store?: revalidate: N caches with timed refresh (ISR); cache: no-store fetches fresh every request—dynamic, personalized routes.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

force-cache vs no-store?
revalidate: 60 meaning?

No discussion yet. Be the first to ask a question.