Skip to main content

getStaticPaths

getStaticPaths 메서드는 getStaticProps 메서드와 함께 사용됩니다. 자세히 알아볼까요?

getStaticPaths 소개​

getStaticPaths 메서드는 getStaticProps를 동적 라우팅과 함께 사용하고 싶을 때 지정하는 데이터 호출 메서드입니다. 정확히는 데이터 호출 메서드라기 보다 getStaticProps를 이용해서 어떤 페이지들을 미리 애플리케이션 빌드 시점에 데이터 호출과 함께 생성해 둘지 결정하는 메서드입니다.

코드로 보겠습니다.

pages/blog/[blogId].jsx
export async function getStaticPaths() {
  return {
    paths: [
      { params: { blogId: '1' }},
      { params: { blogId: '2' }},
    ],
    fallback: false, // 위 paths에서 지정한 1과 2를 제외한 나머지 3,4,100,2323 등 다른 게시글에 대해서는 페이지를 찾을 수 없습니다(404) 처리
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.com/blog/${params.blogId}`)
  const blog = await res.json()
  return { props: { blog } }
}
 
export default function BlogPage({ blog }) {
  return <h1>{blog.title}</h1>
}

위 코드는 getStaticPaths 메서드를 이용하여 블로그 여러 게시글 중 1번과 2번 게시글 즉 blog/1, blog/2 URL에 해당하는 페이지만 애플리케이션 빌드 시점에 미리 실행하여 생성해 둡니다. getStaticPaths 메서드 안에서 정의한 paths 속성에 포함된 값만 미리 빌드를 시켜놓겠다는 의미입니다. blogId가 1과 2인 경로에 대해서만 미리 getStaticProps 메서드를 실행시켜놓는다는 의미죠.

이처럼 getStaticProps 메서드가 빌드 시점에 미리 실행되는 특징이 있는데, pages/blog/[blogId].jsx와 같은 동적 라우팅에서도 해당 기능을 제공하기 위해서는 두 메서드를 함께 지정해 주어야 합니다.

tip

getStaticPaths 메서드의 fallback 옵션은 true, false, 'blocking' 등으로 빌드 시점에 미리 생성해 둔 콘텐츠만 보여줄 건지 아니면 요청한 시점에라도 서버에서 즉시 생성해서 응답을 보여줄 건지 결정하는 속성입니다. 자세한 내용은 아래 문서를 참고하세요.
getStaticPaths API 문서

getStaticPaths 특징​

  1. getStaticPaths는 항상 getStaticProps와 함께 사용되어야 합니다.
  2. getStaticPaths는 getServerSideProps와 함께 사용할 수 없습니다.
  3. getStaticPaths는 다른 데이터 호출 메서드와 마찬가지로 페이지 컴포넌트에서만 사용할 수 있습니다.