Challenges

Server Rendering to Static Rendering

Fixing Fallback Support

Now we need to fix the issue when we were trying to add the fallback support. For that, we need to update the pages/post/[slug].js:

First import the useRouter hook:

import { useRouter } from 'next/router'

Then, update the Next.js page in the pages/post/[slug].js as follow:

export default function Post ({ post }) {
  const router = useRouter()
  if (router.isFallback) {
    return (
      <Theme>
        loading...
      </Theme>
    )
  }

  return (
    <Theme>
      <div className='post'>
        <div className='time'>Published {ms(Date.now() - post.createdAt, { long: true })} ago</div>
        <h1>{post.title}</h1>
        <div className='content'>
          <Markdown
            options={{
              overrides: {
                Youtube: { component: Youtube }
              }
            }}
          >
            {post.content}
          </Markdown>
        </div>
      </div>
    </Theme>
  )
}

(Here's the final version of the file after all these changes.)

šŸ’” Make your attention to router.isFallback. That's the way how we identify whether we are inside the fallback skeleton or not.

Now it's time to check the fallback functionality:

  • Run the updated app with yarn build && yarn start
  • Visit http://localhost:3009/post/2020-July-10-GetStarted
  • Create a new file in the GitHub data repository in the path: data/2020-July-10-GetStarted.md
  • Now look at the above-opened page for 5 secs
  • Reload the page & wait 5 seconds
Q: How do you describe the experience?
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: