Get Started

Next.js Incremental Static Regeneration

Using Static Regeneration

Now we understand a few issues with our app. It'll be great if we can convert it into a static app with Next.js's incremental regeneration capability.

We can simply do that by replacing the getServerSideProps function with the following getStaticProps function.

export async function getStaticProps() {
    const song = await findSong();
    return {
        props: {
            song
        },
        unstable_revalidate: 3
    }
}

Have a look at the unstable_invalidate: 3. Here we ask Next.js to cache a page for 3 seconds. So, for a given minute, it will only create maximum of 20 pages.

This goes with the rate limits of the iTunes API, which is 20 requests per minute.

Go ahead and add the above change.

Now close the already running app. Then run the app with the following commands:

npm run build
npm run start

Visit http://localhost:3002 and click "Try Another One" multiple times to get different song suggestions.

Q: How do you describe the experience.
authenticating...