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

```
git clone https://github.com/arunoda/nextjs-production-live-reload-demo.git
cd nextjs-production-live-reload-demo
```

Then run this command:

```
yarn
yarn build
yarn start
```

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

<Question
    id="live-reloading-for-production-nextjs-app::1::1"
    title="Usually, we use `yarn dev` or similar. What's the reason for using `yarn build` and `yarn start`?"
    answers={[
        "In this case, we can use `yarn dev` as well",
        "`yarn dev` is deprecated",
        "Here we need to run the production version of the app. That's the reason.",
        "This project does not have `dev` script inside the package.json"
    ]}
    points={20}
    correctAnswer={2}
    explain={
        In this lesson, we are trying to add a functionality that will work on the production version of the app. 
        That's the only reason.
    }
/>



Setting Up

In this app, we have a `pages/index.js` file. It will load a markdown file from the disk and render that inside the page. For that, we use the `getStaticProps` function.

~~~
export async function getStaticProps() {
    const contentPath = path.resolve('.', 'data', 'content.md')
    const content = await fsPromises.readFile(contentPath, 'utf8')

    return {
        props: {
            content
        },
        revalidate: 1
    }
}
~~~

We also use `revalidate: 1`. That means Next.js will clear the cache of the generated static page after a second. 

Now, let's do a simple experiment:

* Run your app with `yarn build` && `yarn start`
* Visit http://localhost:3005 using a new browser tab
* Then open the `data/content.md` file
* Change the content
* Check the content of http://localhost:3005 for 5 seconds
* Reload the page twice

<Question
    id="live-reloading-for-production-nextjs-app::2::1"
    title="How do you describe the result?"
    answers={[
        "I can only see the updated content after reloading it twice",
        "I can only see the updated content after the first reload",
        "I can only see the updated content right after we change it",
        "I didn't saw the updated content"
    ]}
    points={30}
    correctAnswer={0}
    explain={
        You can only see the updated content after reloading it twice. We need to reload the page twice because of how Next.js static regeneration [works](https://getstarted.sh/with/nextjs-incremental-static-regeneration). It's not a bug.
    }
/>





Markdown Content

Now we are going to add the live reload functionality. For that, we need an additional NPM package. Install that with:

```
yarn add swr
```

Now create a file called `lib/use-live-reload.js` and add this content.

```
import useSWR from 'swr'
import {useRouter} from 'next/router'
import { useEffect, useState } from 'react'

async function textFetcher(path) {
    const res = await fetch(path)
    return res.text()
}

export default function useLiveReload() {
    const router = useRouter()
    const [prevData, setPrevData] = useState(null)
    const {data} = useSWR(router.asPath, textFetcher, {
        refreshInterval: 1000,
    })

    useEffect(() => {
        if (!data) {
            return
        }

        if (prevData && prevData !== data) {
            location.reload()
            return
        }

        setPrevData(data)
    })

    return {}
}
```

Then import this file on the `pages/index.js` with:


```
import useLiveReload from '../lib/use-live-reload'
```

Finally, invoke the `useLiveReload` React hook inside the `Index` page. The final version of `pages/index.js` will look like [this](https://github.com/arunoda/nextjs-production-live-reload-demo/blob/live-reload/pages/index.js):


Now, let's do the same experiment again:

* Kill the already running app
* Run your app with `yarn build` && `yarn start`
* Visit http://localhost:3005 using a new browser tab
* Then open the `data/content.md` file
* Change the content
* Check the content of http://localhost:3005 for 5 seconds
* Reload the page twice

<Question
    id="live-reloading-for-production-nextjs-app::3::1"
    title="How do you describe the result?"
    answers={[
        "I can only see the updated content after reloading it twice",
        "I can only see the updated content after the first reload",
        "I didn't saw the updated content",
        "The page reloads with the correct content after a couple of seconds."
    ]}
    points={30}
    correctAnswer={3}
    explain={
        As we expected, we can see the updated content without manually reloading.
    }
/>

It's time for another question.

<Question
    id="live-reloading-for-production-nextjs-app::3::2"
    title="Why did we use SWR React hook and what it does?"
    answers={[
        "It will fetch HTML content of the current page for every second",
        "It will fetch HTML content of the current page for every 1000 seconds",
        "It watches the `content.md` file and notify when it changed",
        "It's an alternative to setInterval"
    ]}
    points={40}
    correctAnswer={0}
    explain={
        Here we use SWR to fetch the HTML of the current page for every second. Then if there's a change, we can reload the page. Technically, we could have used a `setInterval`, but SWR provides additional functionalities.

        Here are few of those:

        * It knows how to stop polling when the tab is idle
        * It will automatically stop polling when the component unmounted

        Checkout the [SWR documentation](https://swr.vercel.app) for more details:
    }
/>

Add Live Reloading Support

Reloading the page gets the job done, but it'll be nice if we show a notification like this:

![Next.js Live Reload notification](https://user-images.githubusercontent.com/50838/86944990-1b799800-c166-11ea-9489-d8c490ff7975.png)

Let's try to implement it.

Update the `lib/use-live-reload.js` with the following content.

```
import useSWR from 'swr'
import {useRouter} from 'next/router'
import { useEffect, useState } from 'react'

async function textFetcher(path) {
    const res = await fetch(path)
    return res.text()
}

export default function useLiveReload() {
    const [needToReload, setNeedToReload] = useState(false)
    const router = useRouter()
    const [prevData, setPrevData] = useState(null)
    const {data} = useSWR(router.asPath, textFetcher, {
        refreshInterval: 1000,
    })

    useEffect(() => {
        if (needToReload || !data) {
            return
        }

        if (prevData && prevData !== data) {
            setNeedToReload(true)
            return
        }

        setPrevData(data)
    })

    return {
        needToReload
    }
}
```

In this version, we return a field called `needToReload` instead of reloading the page. In the following component, we use that field to render a notification.

Add the following content to `components/LiveReloadBanner.js`:

```
import useLiveReload from "../lib/use-live-reload"

export default function LiveReloadBanner() {
    const { needToReload } = useLiveReload()
    
    if (needToReload) {
        return (
            <div>
                There's a new version of this page.
                <button onClick={() => location.reload()}>Reload Now</button>
                <style jsx>{`
                    div {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        padding: 10px;
                        background-color: #F48FB1;
                        text-align: center;
                    }
                    div button {
                        margin-left: 10px;
                    }          
                `}</style>
            </div>
        )
    }

    return null
}

```

Then we can use the above React component inside our `pages/index.js` page. To do that, remove the existing React hook and use the `LiveReloadBanner` component. This is how it [looks like](https://github.com/arunoda/nextjs-production-live-reload-demo/blob/final/pages/index.js) with this change.


Again, let's do the same experiment:

* Kill the already running app
* Run your app with `yarn build` && `yarn start`
* Visit http://localhost:3005 using a new browser tab
* Then open the `data/content.md` file
* Change the content
* Check the content of http://localhost:3005 for 5 seconds
* Reload the page twice

<Question
    id="live-reloading-for-production-nextjs-app::4::1"
    title="How do you describe the result?"
    answers={[
        "I can only see the updated content after reloading it twice",
        "I can see a notification with a button to reload the page",
        "I didn't saw the updated content",
        "The page reloads with the correct content after a couple of seconds"
    ]}
    points={40}
    correctAnswer={1}
    explain={
        As you have seen, we can see a notification with a button to reload.
    }
/>

Showing a Notification

In this version, we fetch the current page for each second. In reality, we don't need to fetch that often. Based on your app's usage, you could come up with the desired value.
You can also play around with different [SWR options](https://swr.vercel.app/docs/options#options).

When you are developing your app, this will always show the notification. In that case, you can disable the notification [like this](https://github.com/arunoda/nextjs-production-live-reload-demo/blob/disable-on-localhost/lib/use-live-reload.js#L19-L21).

<Question
    id="live-reloading-for-production-nextjs-app::5::1"
    title="Here we are polling a web page for a given interval. Isn't it problematic?"
    answers={[
        "Yes",
        "No",
        "It's depends"
    ]}
    points={20}
    correctAnswer={2}
    explain={
        Haha. That's a classic answer.

        Next.js only rebuild a given page with provided `revalidate` value. If you are deploying your app in front of an Edge cache (Like Vercel), your server won't get this polling traffic. Edge CDN will take care of that.

        But, this might cost you with the CDN bandwidth, but that's not much in this case since it's just a single HTML file. One problem would be when the user is on mobile. Then this might lead to more resource usage, which is not something the user is expecting.

        In that case, you can try introducing different polling intervals as needed.
    }
/>



Configurations

Now we have a clear idea of how to live reload a production app and potential issues of this approach. Try to tweak this solution as per your requirements.


<Note>
I'm working on a course where we discuss similar topics like these. Have a look at [Bulletproof Next](https://getstarted.sh/bulletproof-next).
</Note>

Finally

Learn how to reload a production app when the backend data source changed.

Live Reloading for a Production Next.js app

Markdown Content