Challenges

Live Reloading for a Production Next.js app

Markdown Content

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
Q: How do you describe the result?
authenticating...