[Next.js] Data Fetching > getStaticPaths

원본: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

---

어떤 페이지가 동적 루트를 가지고 있고 getStaticProps를 사용한다면 정적으로 생성될 경로들의 목록을 정의해야 한다.
동적 루트를 사용하는 페이지에서 getStaticPaths라는 함수를 export하면 Next.js는 이 함수에 의해 지정된 모든 경로를 정적으로 미리 렌더링 한다.
여기에서 getStaticPaths와 함께 사용할 수 있는 파라미터와 props를 확인할 수 있다.

// pages/posts/[id].js

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  }
}

// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  }
}

export default function Post({ post }) {
  // Render post...
}

getStaticPaths를 사용해야 할 경우

동적 경로를 사용하고 다음과 같은 페이지들을 사전 렌더링 하는 경우에 getStaticPaths를 사용해야 한다.

• 데이터를 headless CMS에서 가져온다.
• 데이터를 데이터베이스에서 가져온다.
• 데이터를 파일시스템에서 가져온다.
• 데이터를 사용자별이 아닌, 공개적으로 캐시할 수 있다.
• 페이지가 사전 렌더링 되어야 하고 매우 빨라야 한다. getStaticProps가 CDN에 캐시 가능한 HTML과 JSON 파일들을 생성한다.

getStaticPaths 실행 시점

getStaticPaths는 production 빌드 시에만 실행되고, 런타임에는 실행되지 않는다.

getStaticPaths 사용하기

• getStaticPaths는 반드시 getStaticProps와 함께 사용해야 한다.
• getStaticPaths는 getServerSideProps와 함께 사용할 수 없다.
• getStaticProps를 사용하는 동적 루트에서 getStaticPaths를 export할 수 있다.
• page가 아닌 파일에서 getStaticPaths를 export할 수 없다.
• getStaticPaths를 page component의 일부가 아닌 독립 실행 함수로 export해야 한다.

development 실행

next dev를 사용하여 개발하는 중에는 getStaticPaths가 모든 요청마다 실행된다.

경로 생성 미루기

getStaticPaths를 사용하면 빌드 중에 페이지 생성 실패 후 fallback를 생성하는 것 대신 페이지를 생성할지를 제어할 수 있다. 빌드 중에 더 많은 페이지를 생성하는 것은 더 느린 빌드를 초래한다.

paths를 빈 배열로 반환하면 요청 시 모든 페이지 생성을 연기할 수 있다. 이렇게 하면 Next.js 어플리케이션을 여러 환경에 배포할 때 특히 유용할 수 있다.

// pages/posts/[id].js

export async function getStaticPaths() {
  // When this is true (in preview environments) don't
  // prerender any static pages
  // (faster builds, but slower initial page load)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }

  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to prerender based on posts
  // In production environments, prerender all pages
  // (slower builds, but faster initial page load)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // { fallback: false } means other routes should 404
  return { paths, fallback: false }
}