How to Use Incremental Static Regeneration in Next.js

In Next.js, use getStaticProps with the revalidate property to enable Incremental Static Regeneration (ISR). This tells Next.js to regenerate the page in the background at a specified interval, keeping static pages fresh without rebuilding the entire site.

Syntax

Use getStaticProps in your page component and return an object with props and a revalidate number. The revalidate value is the time in seconds after which Next.js will regenerate the page on the next request.

• props: The data your page needs.
• revalidate: Seconds to wait before regenerating the page.

javascript

export async function getStaticProps() {
  // Fetch data here
  const data = await fetchData();

  return {
    props: { data },
    revalidate: 10, // Regenerate page every 10 seconds
  };
}

Example

This example shows a Next.js page that fetches a timestamp and updates it every 5 seconds using ISR. The page is statically generated at build time and then regenerated in the background when a request comes after 5 seconds.

javascript

import React from 'react';

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

export async function getStaticProps() {
  const time = new Date().toLocaleTimeString();

  return {
    props: { time },
    revalidate: 5, // Regenerate page every 5 seconds
  };
}

Output

<main>
  <h1>Current Time (ISR)</h1>
  <p>The page was generated at: 10:30:15 AM</p>
</main>

Common Pitfalls

• Not setting revalidate: Without it, the page is only generated once at build time and never updates.
• Expecting instant updates: ISR regenerates pages in the background after the revalidate period, so users may see stale content until regeneration finishes.
• Using getServerSideProps instead: This disables static generation and ISR.

javascript

export async function getStaticProps() {
  const data = await fetchData();

  // Wrong: missing revalidate disables ISR
  return {
    props: { data },
  };
}

// Correct way with ISR
export async function getStaticProps() {
  const data = await fetchData();

  return {
    props: { data },
    revalidate: 60, // Regenerate every 60 seconds
  };
}

Quick Reference

Incremental Static Regeneration (ISR) Cheat Sheet:

Feature	Description
getStaticProps	Function to fetch data at build time
revalidate	Seconds after which page regenerates on next request
ISR Behavior	Page updates in background, users see old page until done
Use Case	Static pages needing periodic updates without full rebuild
Not ISR	getServerSideProps disables static generation

Key Takeaways

Use getStaticProps with revalidate to enable Incremental Static Regeneration in Next.js.

The revalidate value sets how often Next.js regenerates the page in seconds.

ISR updates pages in the background, so users may see stale content briefly.

Without revalidate, pages are only generated once at build time.

Do not use getServerSideProps if you want ISR; it disables static generation.