Live Reloading for a Production Next.js app

Add Live Reloading Support

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:

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

Q: How do you describe the result?

authenticating...

It's time for another question.

Q: Why did we use SWR React hook and what it does?

authenticating...

0 🌟