ISR — Explained with Examples

Incremental Static Regeneration (ISR) updates static pages after build without a full rebuild, combining static speed with dynamic freshness.

ISR is a Next.js feature that allows you to regenerate static pages on-demand or on a schedule. After the initial build, pages are served as static HTML. When a request comes in after the revalidation period, the page is regenerated in the background, and the next visitor gets the updated version. ISR can also be triggered on-demand via API routes.

Think of ISR like a store window display. The display is pre-built (static) and looks great to every shopper. Every hour (revalidation period), the store manager checks if the display needs updating and changes it if necessary. The update happens while the store is open — shoppers see the old display until the new one is ready.

ISR solves the “static but fresh” problem. Content-heavy sites like e-commerce product pages and blogs benefit from near-static performance with updated content.

// Next.js page with ISR
export async function getStaticProps({ params }) {
    const res = await fetch(`https://api.example.com/products/${params.id}`);
    const product = await res.json();

    return {
        props: { product },
        // Regenerate at most once every 60 seconds
        revalidate: 60,
    };
}

export async function getStaticPaths() {
    const res = await fetch('https://api.example.com/products');
    const products = await res.json();

    return {
        paths: products.map(p => ({ params: { id: p.id } })),
        // fallback: true shows cached/empty version while generating
        fallback: 'blocking',
    };
}

ISR key points: pages remain cached until revalidate time, regeneration happens in the background (not blocking the request), and the old page persists if regeneration fails.

SSG, SSR, SPA, Static Site

SSG with ISR