First, we need a starter project. For that, clone this repository with:

~~~
git clone https://github.com/arunoda/lesson-nextjs-static-regeneration.git
~~~

Then run the following commands to run the project.

~~~
cd lesson-nextjs-static-regeneration
yarn
yarn dev
~~~

Visit http://localhost:3002 to access this app.

Setting Up

I hope you tried the app. If you didn't, [try now](http://localhost:3002).

<Question
    id="nextjs-incremental-static-regeneration::2::1"
    title="So, what's wrong with this app?"
    answers={[
        "It does an API call to iTunes API on each page load",
        "It adds additional load time since page needs to wait for the iTunes API",
        "All of the above",
        "There's no such issue"
    ]}
    points={20}
    correctAnswer={2}
    explain={
        iTunes API has a strict rate limit of **20 requests per minute**. So, that's a problem.


        The API is quite fast, but it still adds some time to the overall page load time.
    }
/>

Issues of this app

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
        },
        revalidate: 3
    }
}
~~~

<Note>
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](https://affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api/), which is 20 requests per minute.
</Note>

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.

<Question
    id="nextjs-incremental-static-regeneration::3::1"
    title="How do you describe the experience.",
    answers={[
        "It will suggest a new song as every time",
        "Sometimes, I have to click twice to get a new song",
        "It doesn't work",
        "It will show the same song always"
    ]},
    correctAnswer={1}
    points={30}
    explain={
        Sometimes, you have to click twice to get a new suggestion. Here's what's happening:

        * In the first reload, Next.js will start a process to regenerate the page.
        * But instead of waiting for that page, it will serve the existing copy to the user. That's why you got the same song.
        * Then in the next reload, it will give you the newly generated page.
        
        If multiple users use your app at the same time, all of them will get a new song every time. But otherwise, it'll be a problem.
        
        We will look at a way to fix that in the next step.    
    }
/>


Using Static Regeneration

Like in the previous step, sometimes users might get the same page if the traffic is low. If that breaks the functionality of your app, you can add a force invalidation. Here's how to do it:

This is the code of the **pages/index.js** after the change:

~~~
import { findSong } from '../lib/find-song'
import { Container } from '../components/Container';
import { useEffect } from 'react';

export default function Home({ song }) {
    useEffect(() => {
        const handler = setTimeout(() => {
            fetch('/')
        }, 3500)

        return () => clearTimeout(handler)
    }, [])

    return (
        <Container>
            <div className="music">
                <div className="name">{song.name}</div>
                <div className="artist">by {song.artist}</div>
                <div className="image">
                    <a href={song.trackUrl} target="_blank">
                        <img src={song.artwork} />
                    </a>
                </div>
                <audio controls loop>
                    <source src={song.preview} type="audio/mpeg" />
                </audio>
                <div className="reload">
                    <a href="/">Try Another One</a>
                </div>
            </div>
        </Container>
    )
}

export async function getStaticProps() {
    const song = await findSong();

    return {
        props: {
            song
        },
        revalidate: 3
    }
}
~~~

<Note>
Have a look at the **useEffect** hook. What we are doing here is pretty simple. We fetch the page again in the background after 3500 milliseconds. 

So, Next.js will start generating a new page. Then when we reload the page again, we will get a new page.
</Note>

Replace your **pages/index.js** with the above code.

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

~~~
yarn build
yarn start
~~~

Let's do a simple experiment. This time, [click "Try Another One"](http://localhost:3002) multiple times quickly for about 10 seconds.

<Question
    id="nextjs-incremental-static-regeneration::4::1"
    title="How do you describe the situation?"
    answers={[
        "It will show the same song for a few seconds and then suggest a new one.",
        "It will suggest a new song as every time",
        "It throws an error",
        "It will show the same song always"
    ]}
    points={30}
    correctAnswer={0}
    explain={
        It will show the same song for a few seconds and then suggest a new one. 

        This is the expected behavior. We ask Next.js to cache the page for 3 seconds, which is not something we can fix. 
        
        But we can make some UI tweaks like hiding the "Try Another One" link for 4 seconds. 
        
        <Note>
            Due to that reason, static regeneration might not be a valid solution for a dashboard or a page behind a login.
        </Note>
    }
/>


Force Invalidation

Usually, we start our app with yarn dev, which invokes the **next** command. 

But in previous steps, we start the app with **yarn build** and **yarn start**. 

<Question
    id="nextjs-incremental-static-regeneration::5::1"
    title="What was the reason for that?"
    answers={[
        "We can use yarn dev, and it'll work like the same",
        "yarn dev does not work when we use the revalidate property",
        "yarn dev does not work when we use getStaticProps",
        "With yarn dev, it won't cache any pages"
    ]}
    correctAnswer={3}
    points={15}
    explain={
        When we use yarn dev, it won't cache any pages. This functionality helps us when we are developing the app.
    }
/>

Why didn't we use "npm run dev"

In these examples, we use **next start** to start our app. That means, we use a Node.js server to serve our static pages.

Usually, for static apps, we can use "next export" which generates a set of HTML files, and we can deploy them without running a server. (eg:- Using GitHub pages)

<Question
    id="nextjs-incremental-static-regeneration::6::1"
    title='Why did not we use "next export" in these examples?'
    answers={[
        "'next export' is deprecated",
        "To use Next.js static regeneration, we need a server",
        "All of the above",
        "We can use 'next export', and it'll work like the same."
    ]}
    correctAnswer={1}
    points={20}
    explain={
        For static regeneration, we need a server. That's how Next.js could regenerate pages on-demand. But with deploying services like Vercel, you don't need **next start** since they will use AWS Lambdas behind the scenes.
    }
/>

How about "next export"

Alright. Now we have a good idea of what Next.js static revalidation means.

You might not be able to use that with all the places in your app, but you can certainly try that with public-facing web pages.


Finally

Learn how to create Next.js static web apps that can regenerate pages on-demand as needed.

Next.js Incremental Static Regeneration

Issues of this app