Skip to main content

How to configure revalidation?

Next.jsMiddle~2 min read
Suggest an edit

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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit