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: {
        revalidate: 3

Have a look at the revalidate: 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:

yarn build
yarn start

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

Q: How do you describe the experience.