안녕하세요~~

이번 글에서는 Next.js 내 동적라우팅 정적페이지를 만들때 사용되는 getStaticPaths 메서드와 같이 사용되는 fallback 프로퍼티에 알아보겠습니다!!!

getStaticPaths란?

next.js에서 getStaticProps()와 함께 동적인 라우팅이 필요할때 사용되는 정적인 페이지를 만들때 사용되는 메서드입니다! 만약 getStaticProps가 뭔지 모르신다면 그것부터 개념 잡으시는게 좋을것같습니다! 이곳에서는 따로 설명안드려요!

이것을 사용함으로써 빌드타임때 pathname이 정의된 html 페이지가 정의됩니다!

예시 코드를 살펴보겠습니다!!

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug:'seunghoon-test-one' } },
			{ params: { slug:'seunghoon-test-two' } },
			{ params: { slug:'seunghoon-test-three' } },
    ],
    fallback: true // false or 'blocking'
  };
}

post라는 폴더안에 [slug].tsx라는 파일을 만들고 그 파일안에서 위와 같이 코드를 짠다면

https://www.hooneylog.com/post/seunghoon-test-one

https://www.hooneylog.com/post/seunghoon-test-two

https://www.hooneylog.com/post/seunghoon-test-three

라는 정적 파일들이 3가지가 생기는것입니다!

보통 저렇게 slug 목록을 하드코딩하지 않고 등록된 slug들을 map 메서드를 사용해 배열로 만들어서 사용합니다!

대표적으로 블로그 포스트같은곳에서 많이 쓰이는 개발 방식입니다 ㅎㅎㅎ

제가 지금 운영하고 있는 후니로그의 상세페이지에서도 이 메서드를 사용하였습니다 🙂

그다음으 getStaticPaths와 세트로 같이 쓰이는 fallback 프로퍼티에 대해 알아보겠습니다!!

Fallback이란?

자세한건 아래 예시로 살펴보자!

fallback: false

export async function getStaticPaths() {
  const paths = getAllPostSlug();
  return {
    paths,
    fallback: false,
  };
}

만약 위와 같이 fallback을 false로 사용한다면, 유저가 존재하지 않는 페이지에 접속했을때 404페이지를 보여주게 될것이다!

false로 설정시 빌드할때 설정한 slug 파일들을 정적으로 다 만들어준다. 때문에 만약 포스트가 굉장히 많아지면 빌드할때 매우 오래걸릴 수도 있으니 자신의 상황에 맞게 옵션을 설정해줘야한다!!

때문에 지금 제 블로그도 fallback이 false로 설정되었는데, 만약 나중에 포스트가 굉장히 많아지면 true로 변경해줘야겠죠? ㅎㅎ

fallback: true

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: true,
  };
}

fallback 을 true로 설정시 빌드타입때 false때 처럼 모든 경로를 html로 만들어주는 것이 아니다!

때문에 잘못된 경로에 접속해도 404페이지를 보여주질 않는다.

즉, 빌드타임때 렌더링을 하는것이아니라 사용자가 페이지에 접속할때 해당하는 백그라운드에서 path에 맞는 페이지를 정적으로 그려주는 것입니다!

때문에 서버에서 모두 다 그려진게 내려오기전에 로딩화면을 만들 수가 있는데 이때 스켈레톤 컴포넌트를 만들어 더 나은 UX를 제공할 수 있습니다

function Post({ post }) {
  const router = useRouter()

  // 페이지가 다 그려지기 전에 로딩화면을 만들 수 있습니다
  if (router.isFallback) {
    return <div>Loading...</div>
  }
}

위의 코드와 같이 useRouter를 사용하여 getStaticProps에서 페이지가 정적으로 모두 렌더링 되기전의 로딩 화면을 보여줄 수가 있습니다.

fallback: blocking

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: blocking,
  };
}

fallback이 blocking인 경우는 true인 경우와 매우 유사합니다.

하지만 blocking은 단어 뜻대로 렌더링이 되기전에 사용자가 보는것을 차단하는 역할을 합니다!

즉 빌드시 미리 렌더링하는 것은 아니지만, true일때 처럼 useRouter를 사용하여 로딩화면을 보여주질 못합니다. 때문에 UX적으로는 fallback이 true인 경우가 더 좋지않을까라는 생각이 듭니다!

이상 간단한게 getStaticPaths와 fallback 프로퍼티에 대해 알아보았습니다.

감사합니다!