Challenges

Server Rendering to Static Rendering

Static Regeneration

Let's add the Next.js static regeneration support to our homepage. With that, Next.js can rebuild our homepage when we change the content in our GitHub data repository.

To do that, add the revalidate field to the getStaticProps as follow:

export async function getStaticProps () {
  const postList = await githubCms.getPostList()

  return {
    props: {
      postList
    },
    revalidate: 2
  }
}

Before we discuss further, let's do a simple task. That'll help us to understand this functionality.

  • Run your app with yarn build && yarn start
  • Visit http://localhost:3009
  • Create a new page in the GitHub data repository in the file data/2020-June-20-Another-Post.md
  • Now look at the homepage and wait for 5 secs
  • Reload the page & wait for 5 seconds
  • Reload the page again
Q: How do you describe the outcome?
authenticating...

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: