Next.js Course
Next.js
/
Intermediate

revalidatePath()

Definition

A utility function that allows you to purge the cached data for a specific URL path on-demand.

Explain Like I'm New

You cached your `/blog` page so it loads instantly. You just published a new post. You call `revalidatePath('/blog')`. Next.js throws away the cached HTML for that specific URL. The next person to visit `/blog` triggers a fresh build.

Real World Example

Used at the very end of a Server Action. E.g., `updateUserProfile(data) -> revalidatePath('/profile')`.

Common Use Cases

  • •Cache invalidation
  • •Reflecting mutations in UI

Interactive Example

import { revalidatePath } from 'next/cache';

export async function updateSettings(formData: FormData) {
  'use server';
  
  await db.settings.update(formData);
  
  // Purges the cache for just the settings page
  revalidatePath('/dashboard/settings');
  
  // Purges the cache for the ENTIRE dashboard and all sub-folders!
  revalidatePath('/dashboard', 'layout'); 
}

Interview Questions

basic

  • If you call `revalidatePath('/shop')`, does it also purge the cache for `/shop/shoes`?

intermediate

  • Can you use `revalidatePath()` inside a Client Component?

Flash Cards

Question

Purge nested paths?

Click to reveal answer
Answer

No, by default it only purges the exact path `/shop`. If you want to purge all nested routes under it, you must pass a second argument: `revalidatePath('/shop', 'layout')`.

Question

Inside Client Component?

Click to reveal answer
Answer

No. `revalidatePath` is a server-side only function. It must be called from within a Server Action or a Route Handler (API route).