fetching: getStaticPaths

동적 라우트를 사용하는 페이지에서 getStaticProps를 사용하는 경우, 해당 페이지에서 정적으로 생성할 경로 목록을 정의해야 합니다.

동적 라우트를 사용하면서 getStaticProps에서 getStaticPaths(정적 사이트 생성)라는 함수를 내보낸 경우, Next.js는 getStaticPaths에서 지정한 모든 경로를 정적으로 사전 렌더링합니다.

// pages/posts/[id].js

// `/posts/1`과 `/posts/2`를 생성합니다.
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // true나 'blocking'으로 설정할 수도 있습니다.
  };
}

// `getStaticPaths`는 `getStaticProps`를 사용해야 합니다.
export async function getStaticProps(context) {
  return {
    // 페이지 컴포넌트에 전달되는 props입니다.
    props: { post: {} },
  };
}

export default function Post({ post }) {
  // 포스트를 렌더링합니다.
}

getStaticPaths API 레퍼런스에서는 getStaticPaths와 함께 사용할 수 있는 모든 매개변수와 props를 다룹니다.

getStaticPaths는 언제 사용해야 하나요?

getStaticPaths는 동적 라우트를 사용하는 정적 사전 렌더링 페이지를 생성할 때 다음과 같은 경우에 사용해야 합니다:

• 데이터가 headless CMS에서 제공될 때
• 데이터가 데이터베이스에서 제공될 때
• 데이터가 파일 시스템에서 제공될 때
• 데이터가 공개 캐시될 수 있는 경우(사용자별이 아닌)
• 페이지가 사전 렌더링되어야 하고 매우 빠른 경우
• getStaticProps는 HTML 및 JSON 파일을 생성하며, 이 둘 모두 CDN에 캐시될 수 있어 성능을 높일 수 있습니다.

getStaticPaths는 언제 실행되나요?

getStaticPaths는 프로덕션에서 빌드 중에만 실행되며 런타임 중에는 호출되지 않습니다. getStaticPaths에 작성된 코드가 클라이언트 측 번들에서 제거되는지 확인할 수 있는 도구도 있습니다.

getStaticProps와 getStaticPaths의 관계는 어떻게 되나요?

• getStaticProps는 빌드 중 반환된 모든 경로에 대해 실행됩니다.
• fallback: true를 사용할 경우 getStaticProps는 백그라운드에서 실행됩니다.
• fallback: blocking을 사용할 경우 getStaticProps는 초기 렌더링 전에 호출됩니다.

getStaticPaths를 어디에서 사용할 수 있나요?

• getStaticPaths는 getStaticProps와 함께 사용해야 합니다.
• getServerSideProps와 getStaticPaths를 함께 사용할 수 없습니다.
• getStaticProps를 사용하는 동적 라우트에서 getStaticPaths를 내보낼 수 있습니다.
• getStaticPaths를 페이지 파일이 아닌 다른 파일(예: 컴포넌트 폴더)에서 내보낼 수 없습니다.
• getStaticPaths를 페이지 컴포넌트의 속성으로 내보낼 수 없으며, 독립적인 함수로 내보내야 합니다.

개발 모드에서 매 요청마다 실행됩니다.

개발 모드에서(next dev), getStaticPaths는 매 요청마다 호출됩니다.

요청시 생성되는 경로 생성

getStaticPaths는 on-demand로 페이지를 생성하는 대신 빌드 중 생성되는 페이지를 제어할 수 있도록 해줍니다. 더 많은 페이지를 빌드하는 것은 더 느린 빌드를 유발합니다.

빈 배열을 반환하여 on-demand로 모든 페이지 생성을 지연할 수 있습니다. 이 기능은 Next.js 애플리케이션을 여러 환경에 배포할 때 특히 유용합니다.

예를 들어, 미리보기 환경에서는 모든 페이지를 on-demand로 생성하여 더 빠른 빌드를 할 수 있지만(그러나 초기 페이지 로드는 더 느립니다), 프로덕션 빌드에서는 모든 페이지를 사전 렌더링합니다(빌드는 더 느리지만 초기 페이지 로드는 더 빠릅니다).

이 기능은 수백/수천 개의 정적 페이지가 있는 사이트에서 유용합니다.

// 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 };
}