Topic

Revalidate stale data

Definition

Revalidation marks cached data or rendered output stale so a later request obtains a fresh representation.

In simpler words

After a change, tell the cache that its old answer is no longer safe to reuse.

The correct revalidation mechanism depends on which cache contains the stale representation.

Open official example (opens in new tab)

After this you can

Invalidate browser queries after a Nest write
Explain path versus tag revalidation
Avoid using revalidation as authorization

Refresh the layer that is stale

A client ticket list cached by TanStack Query should be invalidated through Query after a successful mutation. That marks the corresponding browser resource stale and lets active observers refetch it.

revalidatePath and revalidateTag are Next server-cache mechanisms. They matter only when the affected server-rendered route or tagged fetch is actually using that caching strategy.

Invalidate a ticket list

onSuccess: (_ticket, variables) => {
  queryClient.invalidateQueries({ queryKey: ['tickets'] });
  queryClient.invalidateQueries({ queryKey: ['ticket', variables.id] });
}

Invalidate the list and detail representation that a completed write made stale.

Mistake: calling a Next API for a Query cache

// Wrong — does not refresh browser Query data
revalidatePath('/tickets');

// Right for a client Query list
queryClient.invalidateQueries({ queryKey: ['tickets'] });

Revalidation APIs are scoped to their own cache layer.

Use paths and tags precisely

Definition

Path revalidation targets rendered output for a route; tag revalidation targets server fetches that share a declared tag.

In simpler words

Tags are useful when several routes depend on the same server-side resource.

Do not add tags before you know which server-rendered resources must refresh together.

A revalidated representation still passes through the same backend authorization rules on its next request.

Live playground

Revalidating playground

Choose the cache layer that must refresh after a ticket edit.

Query cache: stale

Next revalidatePath/tag is for Next server caches — not Nest auth.

Keep in mind

Invalidate Query after interactive Nest mutations.
Use revalidatePath or revalidateTag only for Next server caches you actually use.
Match the invalidation scope to the changed resource.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. What is revalidation?

Concept

Re-authenticating the user before serving cached pagesRe-running validation on form input before caching itRebuilding the entire app to publish any content changeRefreshing cached data/output so users see updates

2. Time-based revalidate?

Syntax

revalidate: N requests before the cache refreshesA cron job you register in next.config to purge the cacherevalidate: N seconds style freshness windowssetInterval in the layout that refetches every N seconds

3. On-demand revalidation?

Practical

revalidatePath/Tag after a mutationLowering revalidate to 1 second so it feels on-demandCalling router.refresh() from the server after the writeDeleting the fetch cache entry by its URL key manually

4. Tagging fetch caches helps how?

Logic

Give each cached entry a longer time-to-liveMake tagged entries share a single revalidate windowInvalidate related entries together by tagNamespace entries so different users get separate caches

5. After creating a post in a blog?

Concept

Lower the whole app’s revalidate window to force a refreshRevalidate the list/detail paths or tagsCall router.push to the new post so the list updatesWait for the time-based window to expire before showing it

6. Client Query vs Next cache?

Practical

The same layer — invalidating one clears the otherDifferent layers — invalidate both if both usedQuery caches on the server; the Next cache is client-siderevalidateTag also clears the matching Query cache key

7. Too aggressive revalidate?

Syntax

Lower memory use because entries expire fasterNo downside — shorter windows always improve UXIt disables the CDN cache to keep data freshMore origin load — balance freshness vs cost

8. Webhook-driven revalidate?

Logic

The CMS pushes new HTML directly into the Next cacheThe CMS triggers a full redeploy for every content editThe webhook lowers the route’s revalidate window to zeroCMS webhook calls your revalidate endpoint

9. Stale-while-revalidate mindset?

Concept

Block the request until the fresh data is readyServe stale data and never refresh it in the backgroundRefresh first, then serve, so users only ever see fresh dataServe cached while refreshing in background when configured

10. Which is correct?

Practical

Revalidation always triggers a full production rebuildRevalidation only works during next build, not at runtimeRevalidation clears the cache but can’t refresh it automaticallyRevalidation updates cached results without necessarily rebuilding the whole app by hand

11. What does this do after a mutation?

Conceptintermediate

import { revalidatePath } from 'next/cache';
revalidatePath('/blog');

Immediately refetches /blog and returns the fresh HTMLRedirects the user to a freshly rendered /blog pageClears the cache for every route, not just /blogMarks the /blog route’s cached data stale so it refetches

12. What does tagging enable here?

Syntaxadvanced

fetch(url, { next: { tags: ['tickets'] } });
// later:
revalidateTag('tickets');

Refreshing only the most recent fetch with that tagSetting a shared 60-second TTL on the tagged fetchesGrouping the tagged fetches into one network requestInvalidating all fetches with that tag together

13. What does this segment export configure?

Practicalintermediate

export const revalidate = 3600;

A 3600-second timeout after which the route errorsRevalidation after 3600 requests to the routeTime-based revalidation every 3600 seconds (ISR-style)A build that regenerates the route 3600 times

14. What pattern is this?

Logicadvanced

// CMS publishes -> POST /api/revalidate
export async function POST(req) { revalidateTag('posts'); }

Webhook-driven on-demand revalidation triggered by the CMSTime-based ISR scheduled by the CMS every hourA client-side refetch triggered when the CMS updatesA redeploy hook that rebuilds the whole site on publish

15. Both caches hold the tickets list. After a mutation, what must you do?

Conceptintermediate

// both TanStack Query and the Next cache hold the tickets list

Invalidate Query; revalidateTag handles the Next cache automaticallyInvalidate both layers — the Query cache and the Next cacheInvalidate the Next cache; the Query cache follows itRestart the dev server to clear both caches at once

Checking your session…