Challenges

Server Rendering to Static Rendering

Convert Blogpost Page to Static

Our blog post page is still generated via server-rendering. Let's fix that.

For that, replace the getServerSideProps function in pages/post/[slug].js with the following:

export async function getStaticPaths() {
  const postList = await githubCms.getPostList()
  const paths = postList.map(post => ({
    params: {
      slug: post.slug
    }
  }))

  return {
    paths,
    fallback: false
  }
}


export async function getStaticProps ({ params }) {
  const post = await githubCms.getPost(params.slug)

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

Here's a summary of what we have done:

  • We use getStaticProps to fetch data for the static page.
  • We also added regeneration support by adding revalidate flag
  • We created a getStaticPaths function to mention all the pages available in our blog app
  • So, Next.js can generate those pages at the build time

Now let's do a task to understand a crucial concept:

  • Run the updated app with yarn build && yarn start
  • Visit http://localhost:3009/post/2020-July-02-Deploying-Next
  • Create a new file in the GitHub data repository in the path: data/2020-July-02-Deploying-Next.md
  • Now look at the above-opened page for 5 secs
  • Reload the page & wait 2 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: