Introduction

Revalidating data in Next.js is a crucial process that ensures your application always serves up-to-date content. Revalidation clears the data cache and re-fetches the latest data, either at timed intervals or based on specific events.

Types of Revalidation

1. Time-Based Revalidation

Time-based revalidation occurs automatically after a specified time interval, which is particularly useful for data that changes infrequently or for cases where data freshness isn't critical.

Using next.revalidate with fetch

You can specify the cache lifetime for a resource (in seconds) using the next.revalidate option with the fetch API:

fetch('https://...', { next: { revalidate: 3600 } }); // Revalidate every hour

Using revalidate in a Layout or Page Component

You can set the revalidation interval globally for a segment by defining the revalidate export in a layout or page file:

// layout.js or page.js
export const revalidate = 3600; // Revalidate at most every hour

Important Considerations:

• When multiple fetch requests with varying revalidation intervals exist in a static segment, the shortest interval will be used for all requests.
• In dynamic segments, each fetch request is revalidated independently.

2. On-Demand Revalidation

On-demand revalidation allows you to revalidate data based on specific events, such as form submissions or data updates. This ensures the latest data is shown as soon as possible.

Revalidation Approaches

• Path-Based Revalidation: Revalidate all cached requests associated with a specific path using revalidatePath.
• Tag-Based Revalidation: Tag cache entries and revalidate all entries associated with a particular tag using revalidateTag.

Using Cache Tags with fetch