Revalidation strategies (time-based) in NextJS

Introduction

Revalidation strategies help keep your website data fresh by updating it automatically after a set time. This way, users see recent content without waiting for a full rebuild.

You want your blog posts to update every 10 seconds without rebuilding the whole site.

You have a product page that should refresh data every minute to show latest prices.

You want to cache a page but still update it regularly to keep content fresh.

You want to balance fast page loads with up-to-date information.

Syntax

NextJS

export async function getStaticProps() {
  // fetch data here
  return {
    props: { data },
    revalidate: 10, // seconds
  };
}

The revalidate value is in seconds and tells Next.js how often to update the page.

Next.js will serve the cached page until the revalidation time passes, then update in the background.

Examples

This example updates the page every minute.

NextJS

export async function getStaticProps() {
  return {
    props: { message: 'Hello!' },
    revalidate: 60, // update every 60 seconds
  };
}

This example shows the current time and refreshes it every 5 seconds.

NextJS

export async function getStaticProps() {
  return {
    props: { time: new Date().toISOString() },
    revalidate: 5, // update every 5 seconds
  };
}

Sample Program

This Next.js page shows the time it was generated. It updates automatically every 10 seconds using time-based revalidation.

NextJS

import React from 'react';

export async function getStaticProps() {
  const currentTime = new Date().toISOString();
  return {
    props: { currentTime },
    revalidate: 10, // revalidate every 10 seconds
  };
}

export default function TimePage({ currentTime }) {
  return (
    <main>
      <h1>Current Time</h1>
      <p>The page was generated at:</p>
      <time dateTime={currentTime}>{currentTime}</time>
    </main>
  );
}

Important Notes

Revalidation happens in the background, so users see the old page until the new one is ready.

If you set revalidate to 0 or omit it, the page will not update automatically.

Use time-based revalidation to balance performance and freshness.

Summary

Time-based revalidation updates static pages automatically after a set number of seconds.

This keeps content fresh without rebuilding the whole site manually.

Set revalidate in getStaticProps to control update frequency.