ISR (Incremental Static Regeneration)

This page regenerates every 10 seconds while serving the cached version to users.

Live Data

Page Build Time:

2026-01-02T19:25:52.752Z

API Data Timestamp:

2026-01-02T19:25:52.751Z

Random Number:

429

Message:

This data was generated using ISR

💡 How ISR Works

• Page is statically generated at build time
• After the revalidation period (10 seconds), the next visitor triggers a regeneration
• The stale page is served while regeneration happens in the background
• Subsequent visitors see the updated page
• Perfect for content that updates periodically (blogs, product listings, etc.)

Code Example

export const getStaticProps: GetStaticProps = async () => {
  // Fetch data from API (use absolute URL for external APIs at build time)
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'}/api/isr-data`)
  const data = await res.json()

  return {
    props: {
      data,
      buildTime: new Date().toISOString(),
    },
    // Revalidate every 10 seconds
    revalidate: 10,
  }
}

Use Cases

✓Blog Posts: Update content without rebuilding entire site
✓E-commerce: Product listings with periodic price/inventory updates
✓News Sites: Articles that need frequent but not real-time updates
✓Marketing Pages: Landing pages with analytics or A/B testing data

Refresh this page multiple times after 10 seconds to see the data update!