isFallback으로 로딩바 보여주기

https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-pages

Functions: getStaticPaths | Next.js

next/router → router.isFallback으로 렌더링 인지 가능

const router = useRouter()

  if (router.isFallback) {
    return <div>Loading...</div>
  }

화면 처음 진입 시, getStaticProps 함수가 끝날 때까지 isFallback=true이기 때문에 이때 로딩바를 보여준다.

새 로고침해서 화면 진입 시 router.isFallback을 로그 찍어보면 true -> false 찍히고,
true일 때 로딩바가 표시되는 것을 확인할 수 있다.