getStaticPaths의 fallback

Nextjs는 getStaticPaths에 정의된 path들을 정적으로 프리렌더링한다.

즉, 동적라우팅을 사용할 때 어떤 페이지를 미리 Static으로 생성할지 정하는 api이다.

(정적으로 프리렌더링 한다는 뜻은 빌드타임시에 만들어놓고 계속 가져다 쓴다는 뜻 <-> SSR은 매 요청시마다 새로 만듬)

//posts/[id].js
export async function getStaticPaths() {
  // const paths = getAllPostIds();
  const paths = [
    {
      params: {
        id: 'ssg-ssr'
      }
    }
  ];
  return {
    paths, 
    fallback: boolean 혹은 'blocking'

  };
}

이때 getStaticPaths의 리턴값에 fallback은 무엇일까

fallback

빌드타임에 생성해놓지 않은 path로 요청이 들어올 때 어떻게 대응할지 결정하는 값 , boolean 혹은 'blocking'

false 일 때

• getStaticPaths가 반환하지 않은 모든 path에 대해 404 페이지 반환(쉽게 생각하면, 빌드이후 새롭게 만들어진 데이터에 대한 업데이트가 안됨)
• 새로운 페이지가 추가된다면 추가할때마다 다시 빌드(배포) 해주어야함.

true 일 때

• getStaticProps에서 데이터가 생긴 경우(빌드타임에 없던 데이터가 빌드 이후 추가된 경우),
  1. 404페이지를 반환하지 않고 fallback(로딩)을 보여준다.
  2. 백그라운드에서 NextJS가 요청된 path에 대해 getStaticProps를 이용해 HTML과 JSON을 만든다.
  3. 백그라운드 작업이 끝나면 요청된 path에 해당하는 JSON파일을 받아 새롭게 페이지를 렌더링한다.
     • 사용자 입장에서는 로딩후 페이지가 렌더링된다.
  4. 새롭게 생성된 페이지를 기존 빌드시 프리렌더링 된 페이지 리스트에 추가한다. 같은 path로 온 요청들에 대해서는 이때 생성한 페이지를 반환하게 된다.
     (fallback때 보여줄 화면은 router.isFallback 값을 체크하여 조건분기하면 된다.)

'blocking' 일 때

true 일 경우와 비슷하지만 최초 만들어 놓지 않은 path에 대한 요청이 들어올 경우 fallback 상태를 보여주지 않고 SSR처럼 동작한다.
이후 true 옵션과 같이 기존의 정적 페이지 리스트에 새로 생성한 페이지 추가

 

 

---

참고

 

Next.js getStaticPaths 공식문서

설명 엄청 잘되어 있는 블로그

getStaticProps와 getStaticPaths 설명한 블로그