Suggest an edit

Improve this article

Refine the answer for “How to configure revalidation?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Revalidation in Next.js is a setting that says: **"you can serve data/a page from cache, but refresh it periodically"**. In Next.js this can be configured in several ways, depending on whether you use the **App Router** or the **Pages Router**, and whether you want **periodic** or **manual (on-demand)** refresh.

---

## 1) App Router: revalidation for a specific `fetch`

The most common option is to set revalidate right in the request:

```ts
const res = await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 }, // refresh once every 60 seconds
});
const posts = await res.json();
```

What this means:

- data is taken from cache
- Next.js will refresh the cache **no more often** than once every 60 seconds
- users usually get a fast response from cache

If you need it to be **always fresh**, disable the cache:

```ts
await fetch(url, { cache: "no-store" })
```

---

## 2) App Router: revalidation for a whole segment (page/layout)

You can set a caching "policy" for an entire routing segment:

```ts
export const revalidate = 300; // 5 minutes
```

This is usually placed in `page.tsx` or `layout.tsx`.

The point:

- Next.js will treat this segment as "cacheable"
- and will rebuild/refresh it no more often than the given interval

> Important: if a `fetch(..., { cache: "no-store" })` exists inside the segment, it "breaks" the caching idea for that data - it will always be fresh.

---

## 3) Pages Router: ISR via `getStaticProps`

If the project uses the Pages Router, revalidation is configured like this:

```ts
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

return {
    props: { posts },
    revalidate: 60, // an update can happen once every 60 seconds
  };
}
```

This is classic ISR:

- the page is static
- but it's refreshed periodically

---

## 4) On-demand revalidation (event-based refresh)

Sometimes you don't want to wait "60 seconds", but need to refresh **right away**, for example:

- a new article was published
- a product changed
- an admin clicked "publish"

### App Router: `revalidatePath` and `revalidateTag`

You can "reset" the cache:

- by path (page/route)
- by tag (a group of requests)

**a) Refresh a specific path**

```ts
import { revalidatePath } from "next/cache";

revalidatePath("/blog");
```

**b) Refresh everything marked with a tag**

On the request:

```ts
await fetch(url, { next: { tags: ["posts"] } });
```

Then reset:

```ts
import { revalidateTag } from "next/cache";

revalidateTag("posts");
```

This is usually done in a server action or a route handler after data changes.

---

## 5) How to choose the way

- Need "once every N seconds" → `next: { revalidate: N }` (or `export const revalidate = N`)
- Need always fresh → `cache: "no-store"`
- Need to refresh on an event → `revalidatePath()` / `revalidateTag()`

---

## Short summary

- Revalidation is automatic cache refresh, either on an interval or manually.
- **App Router**:
  - for a request: `fetch(url, { next: { revalidate: 60 } })`
  - for a segment: `export const revalidate = 60`
  - manually: `revalidatePath`, `revalidateTag`
- **Pages Router**: ISR via `getStaticProps` + `revalidate: 60`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts524 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.