Introduction to Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) is a powerful feature in Next.js that allows you to update static pages with fresh data without having to rebuild your entire application. ISR enables you to generate and serve static pages that can be revalidated and updated with new data at specified intervals. In this tutorial, we'll explore how ISR works in Next.js.

Using ISR in Next.js

1. Create a new page in the "pages" directory, for example, dynamic-ssr.js:

    // pages/dynamic-ssr.js
    import React from 'react';
    function DynamicSSRPage({ dynamicData }) {
        return (
            <div>
                <h2>Incremental Static Regeneration</h2>
                <p>{dynamicData}</p>
            </div>
        );
    }
    export async function getStaticProps() {
        // Fetch initial data during build time
        const response = await fetch('https://api.example.com/data');
        const dynamicData = await response.json();
        return {
            props: {
                dynamicData,
            },
            revalidate: 60, // Revalidate every 60 seconds
        };
    }
    export default DynamicSSRPage;

In this example, the getStaticProps function is used to fetch initial data during the build process and set a revalidation interval of 60 seconds. This page will be pre-rendered with the initial data and revalidated periodically.

2. Access the ISR page by visiting /dynamic-ssr in your application. The page will be pre-rendered with the initial data and updated at the specified revalidation interval.