On-Demand Revalidation Strategies

Q: What is on-demand revalidation in Next.js, and how is it different from time based revalidation?

Time based revalidation refreshes cached content automatically after a set number of seconds, while on-demand revalidation lets you manually trigger a cache refresh at the exact moment your content actually changes, such as right after publishing a new blog post, giving you precise control over when fresh data appears.

Q: How do you use revalidatePath to refresh the cache for a specific page after content changes?

You call revalidatePath with the exact path of the page you want to refresh, typically inside a server action or route handler right after a database update completes, and Next.js will discard the cached version of that page so the next visitor gets freshly rendered content.

Q: How do you use revalidateTag to refresh multiple related pieces of cached content at once?

You tag your fetch requests with a specific tag name using the next options, and later call revalidateTag with that same tag name to invalidate every cached fetch result sharing that tag simultaneously, which is useful when one piece of data appears in several different places across your site.

Q: How would you build a webhook endpoint that automatically revalidates your site whenever content changes in an external content management system?

You create a route handler that receives a webhook notification from your CMS whenever content is published or updated, verify the request is legitimate using a shared secret, and then call revalidatePath or revalidateTag for the affected content, keeping your site automatically synchronized with your CMS without any manual steps.

Q: What are the tradeoffs between using revalidatePath and revalidateTag for a large application with many interconnected pages?

revalidatePath is simple and direct but requires you to know every specific path affected by a change, which can be error prone in complex apps, while revalidateTag is more flexible and scalable since you tag data once and can revalidate everything using that data across the entire site with a single call, though it requires careful tag naming and organization.

5 questions found

What is on-demand revalidation in Next.js, and how is it different from time based revalidation?

Beginner

Time based revalidation refreshes cached content automatically after a set number of seconds, while on-demand revalidation lets you manually trigger a cache refresh at the exact moment your content actually changes, such as right after publishing a new blog post, giving you precise control over when fresh data appears.

// Time based: refreshes automatically every 60 seconds
fetch(url, { next: { revalidate: 60 } });

// On-demand: refreshes only when you trigger it
revalidatePath('/blog');

Real-world example A news website uses on-demand revalidation to instantly update its homepage the moment an editor publishes breaking news, rather than waiting up to a minute for the next scheduled time based refresh.

Common follow-ups: When would time based revalidation be a better choice than on-demand?;Can you combine both time based and on-demand revalidation on the same page?

Caching;Rendering (SSR/SSG/ISR)

How do you use revalidatePath to refresh the cache for a specific page after content changes?

Intermediate

You call revalidatePath with the exact path of the page you want to refresh, typically inside a server action or route handler right after a database update completes, and Next.js will discard the cached version of that page so the next visitor gets freshly rendered content.

'use server';
import { revalidatePath } from 'next/cache';

export async function publishPost(postId) {
  await db.post.update({ where: { id: postId }, data: { published: true } });
  revalidatePath('/blog');
  revalidatePath(`/blog/${postId}`);
}

Real-world example A blogging platform revalidates both the blog listing page and the individual post page immediately after an author publishes an article, ensuring readers see the update right away on both pages.

Common follow-ups: Can revalidatePath refresh dynamic routes with different parameters at once?;How quickly does the revalidated content become visible to users?

Server Actions & Mutations;Database Integration with Next.js

How do you use revalidateTag to refresh multiple related pieces of cached content at once?

Intermediate

You tag your fetch requests with a specific tag name using the next options, and later call revalidateTag with that same tag name to invalidate every cached fetch result sharing that tag simultaneously, which is useful when one piece of data appears in several different places across your site.

// Tagging a fetch request
const res = await fetch(url, { next: { tags: ['products'] } });

// Later, revalidate everything tagged 'products'
import { revalidateTag } from 'next/cache';
revalidateTag('products');

Real-world example An online store tags every fetch related to its product catalog with a single products tag, letting it refresh the homepage, category pages, and search results all at once whenever product data changes.

Common follow-ups: What is the advantage of tags over revalidating each individual path manually?;Can a single fetch request have multiple tags at the same time?

Caching;Data Fetching

How would you build a webhook endpoint that automatically revalidates your site whenever content changes in an external content management system?

Advanced

You create a route handler that receives a webhook notification from your CMS whenever content is published or updated, verify the request is legitimate using a shared secret, and then call revalidatePath or revalidateTag for the affected content, keeping your site automatically synchronized with your CMS without any manual steps.

// app/api/revalidate/route.js
import { revalidateTag } from 'next/cache';

export async function POST(request) {
  const secret = request.headers.get('x-webhook-secret');
  if (secret !== process.env.WEBHOOK_SECRET) {
    return new Response('Unauthorized', { status: 401 });
  }
  const { tag } = await request.json();
  revalidateTag(tag);
  return Response.json({ revalidated: true });
}

Real-world example A marketing website automatically refreshes its cached pages the moment an editor publishes new content in their headless CMS, thanks to a webhook that triggers revalidation without any manual redeployment.

Common follow-ups: How do you secure a public revalidation endpoint from misuse?;What happens if the webhook is called for content that does not actually exist?

Headless CMS Integration;Security Best Practices in Next.js

What are the tradeoffs between using revalidatePath and revalidateTag for a large application with many interconnected pages?

Advanced

revalidatePath is simple and direct but requires you to know every specific path affected by a change, which can be error prone in complex apps, while revalidateTag is more flexible and scalable since you tag data once and can revalidate everything using that data across the entire site with a single call, though it requires careful tag naming and organization.

// revalidatePath requires knowing every affected path
revalidatePath('/blog');
revalidatePath('/blog/featured');

// revalidateTag revalidates everywhere the tag is used
revalidateTag('blog-posts');

Real-world example A large media company switches from manually listing dozens of paths to revalidate after every content change, to a well organized tagging system that automatically refreshes every affected page with far less code.

Common follow-ups: How do you organize a consistent tagging strategy across a large codebase?;Is there a performance difference between the two approaches at scale?

Caching;On-Demand Revalidation Strategies