DEV Community

Cover image for Next.js ~revalidateTag~
Ogasawara Kakeru
Ogasawara Kakeru

Posted on

Next.js ~revalidateTag~

revalidateTag is a server function that is used for invalidate cache on demand follwing a specific tag of cache.

Key Features and Specifications

• Supported Enviroments: This can be useed only in server function or route handler.(This can't be used in client)

• System of revalidation: The data tagged by a specific tag is marked as 'stale', promote refetching tag latest data in the next or background.

• Second parameter(profile): Afrter Next.js 16, evalidateTag(tag, profile) format is recommended, and assign default or customized cache profile(such as max).

• Difference from revalidatePath: While revalidatePath invalidates the cache by a module of a specific URL path, revalidateTag invalidates at a time crossing multiple pages on base of the data tagged by a specific tag.

Basic Usage

  1. Attach a tag to fetching data:
const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] }
});

Enter fullscreen mode Exit fullscreen mode
  1. Invalid in server function or route handler:
import { revalidateTag } from 'next/cache';

export async function updatePost() {
  // Update data...
  revalidateTag('posts', 'max');
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)