ISR (Incremental Static Regeneration) in NextJS

Introduction

ISR lets your Next.js site update static pages after you build it, without rebuilding the whole site. This keeps pages fast and fresh.

You want fast pages that update with new data every few seconds or minutes.

Your site has many pages but only some change often.

You want to avoid rebuilding the entire site for small content updates.

You want to serve static pages but still show recent info like blog posts or products.

Syntax

NextJS

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

The revalidate key tells Next.js how often to update the page.

When a user visits after revalidate seconds, Next.js regenerates the page in the background.

Examples

This example fetches posts and updates the page every 60 seconds.

NextJS

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/posts').then(res => res.json());
  return {
    props: { posts: data },
    revalidate: 60, // update every 60 seconds
  };
}

This example returns a simple message and regenerates the page every 5 seconds.

NextJS

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

Sample Program

This Next.js page shows the current time when the page was generated. It updates every 10 seconds using ISR.

NextJS

import React from 'react';

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

export async function getStaticProps() {
  const time = new Date().toLocaleTimeString();
  return {
    props: { time },
    revalidate: 10, // regenerate page every 10 seconds
  };
}

Important Notes

ISR helps balance speed and freshness by updating pages in the background.

If revalidate is not set, the page is only generated once at build time.

ISR works only with getStaticProps, not with server-side rendering.

Summary

ISR updates static pages after build without full rebuilds.

Use revalidate in getStaticProps to set update frequency.

It keeps pages fast and content fresh automatically.