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...