Revalidation patterns in NextJS

Introduction

Revalidation patterns help keep your website data fresh by updating content after it is first loaded. This means users see up-to-date information without waiting for a full reload.

You want to show blog posts that update occasionally without rebuilding the whole site.

You have product prices that change and want to refresh them every few minutes.

You want to cache API data but still update it regularly for users.

You want to improve performance by serving cached pages but keep content fresh.

You want to avoid slow page loads by updating data in the background.

Syntax

NextJS

export const revalidate = 60; // seconds

export default async function Page() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <main>{JSON.stringify(data)}</main>;
}

The revalidate export sets how often Next.js updates the page in seconds.

Using cache: 'no-store' in fetch disables caching for fresh data on each request.

Examples

This example updates the page every 10 seconds to show new posts.

NextJS

export const revalidate = 10;

export default async function Page() {
  const data = await fetch('https://api.example.com/posts').then(res => res.json());
  return <div>{data.length} posts loaded</div>;
}

Setting revalidate to 0 disables caching and fetches fresh data on every request.

NextJS

export const revalidate = 0;

export default async function Page() {
  const data = await fetch('https://api.example.com/data', { cache: 'no-store' }).then(res => res.json());
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

This example updates the page once every hour (3600 seconds).

NextJS

export const revalidate = 3600;

export default async function Page() {
  const data = await fetch('https://api.example.com/stats').then(res => res.json());
  return <p>Stats updated hourly: {data.count}</p>;
}

Sample Program

This Next.js page fetches a todo item from an API and shows it. The page content updates every 30 seconds to keep data fresh without full reloads.

NextJS

export const revalidate = 30;

export default async function Page() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const todo = await response.json();

  return (
    <main>
      <h1>Todo Item</h1>
      <p><strong>ID:</strong> {todo.id}</p>
      <p><strong>Title:</strong> {todo.title}</p>
      <p><strong>Completed:</strong> {todo.completed ? 'Yes' : 'No'}</p>
      <p><em>Page revalidates every 30 seconds.</em></p>
    </main>
  );
}

Important Notes

Revalidation helps balance fast loading and fresh data.

Set revalidate to 0 for always fresh data but slower loads.

Use longer revalidation times for rarely changing data to save resources.

Summary

Revalidation patterns let Next.js update cached pages after a set time.

Use export const revalidate = seconds; to control update frequency.

This improves user experience by showing fresh data with good performance.