Next.js 4-3 getStaticPaths

• 언제 getStaticPaths를 사용해야 할까?

  getStaticPAths 함수는 Next.js에서 동적 경로를 생성하는 데 사용된다. 예를 들어, 블로그 게시물 페이지에서 사용할 수 있다. 모든 게시물이 파일 시스템에 저장되어 있고, 파일 이름이 게시물의 ID와 일치한다고 가정하면, 이 경우 getStaticPaths는 모든 게시물의 ID를 가져와서 Next.js에게 어떤 페이지를 렌더링해야 하는지 알려준다.

  이 함수를 사용하면 사전 렌더링할 페이지 목록을 지정할 수 있으며, 이를 통해 더 나은 SEO를 달성하고 페이지 로딩 속도를 높일 수 있다. 또한 페이지가 렌더링 되기 전에 미리 데이터를 가져와 미리 렌더링 된 페이지를 생성할 수 있으므로 사용자가 페이지를 불러올 때 빠른 속도로 페이지를 제공할 수 있다.

  따라서 동적 경로를 가진 페이지를 구현하고 있으면 getStaticPaths 함수를 사용하는 것이 좋다. 하지만, 데이터를 불러오는 데 많은 시간이 소요되는 경우 getServerSideProps 함수를 사용하는 것이 더 좋을 수 있다.

 

 

• getStaticPaths는 언제 실행될까?

  getStaticPaths 함수는 빌드 시간에 한 번 실행된다. Next.js는 빌드 시간에 사전 렌더링해야 하는 모든 페이지의 경로를 수집하고, getStaticPaths 함수를 호출하여 이러한 경로 목록을 생성한다.

  이 함수는 동적 경로가 포함된 페이지에서 사용되며, 페이지의 경로가 빌드 시간에 알려지지 않은 경우에도 사용될 수 있다. 이러한 경우에 fallback 속성을 사용하여 다이나믹 라우트를 구성할 수 있다.

  getStaticPaths 함수가 실행될 때, Next.js는 반환된 경로 배열을 사용하여 페이지를 생성하고 정적 파일을 내보낸다. 따라서, 이 함수에서 반환된 경로 배열이 곧 페이지의 경로가 된다.

  만약 getStaticPaths 함수에서 반환한 경로가 10개라면, Next.js는 빌드시간에 이러한 10개의 경로에 대한 페이지를 모두 렌더링 하고, 이를 정적 파일로 내보낸다. 이후에 사용자가 이러한 경로 중 하나를 요청하면, 미리 렌더링 된 정적 파일이 사용자에게 제공된다.

 

 

• getStaticPaths와 관련하여 getStaticProps는 어떻게 실행될까?

  getStaticPaths는 동적 경로를 생성하는 데 사용되고, getStaticProps는 사전 렌더링된 페이지에 필요한 데이터를 가져오는 데 사용된다.

  getStaticPaths에서 생성된 동적 경로 배열은 Next.js가 빌드 시간에 이러한 경로에 대한 페이지를 모두 사전 렌더링하고, getStaticProps를 호출하여 각 페이지에 필요한 데이터를 가져오는 것이다. 이러한 데이터는 이후 정적 파일로 내보내진다. 

  getStaticProps 함수는 각각의 페이지에서 한 번씩 실행된다. 따라서, getStaticPaths에서 생성된 동적 경로 배열에 따라서 getStaticProps 함수가 호출되는 횟수가 결정되는 것이다.

  예를 들어, getStaticPaths에서 반환된 경로가 10개라면 Next.js는 빌드 시간에 이러한 10개의 경로에 대한 페이지를 모두 사전 렌더링하고, 이를 정적 파일로 내보낸다. 이후에 사용자가 이러한 경로 중 하나를 요청하면 해당 경로에 대한 사전 렌더링된 정적 파일이 사용자에게 제공된다. 이때 해당 경로에 대한 getStaticProps가 한 번 호출된다.

 

 

• getStaticPaths를 사용하는 경우와 사용할 수 없는 경우

  getStaticPaths는 동적 경로를 생성하는 데 사용되며 일반적으로 동적 경로가 포함된 페이지에서 사용된다. getStaticPaths를 사용할 수 있는 경우는 페이지가 동적 경로를 포함하고 있으며, 이러한 경로에 따라 데이터가 변경되는 경우, 그리고 페이지의 경로가 빌드 시간에 알려지는 경우가 있다. 예를 들어 블로그 게시물을 보여주는 페이지가 있을 때 각 게시물은 동적 경로를 갖게 된다. 이 경우 getStaticPaths를 사용하여 모든 게시물의 경로를 미리 수집하고 각 게시물에 대한 데이터를 렌더링 하여 페이지 로딩 속도를 높일 수 있다.

  그러나 페이지의 경로가 런타임 시점에 동적으로 생성되는 경우나 페이지가 db에 저장된 데이터에 따라 동적으로 렌더링 되는 경우에는 getStaticPaths를 사용할 수 없다. 예를 들어 사용자가 입력한 검색어에 따라 결과 페이지가 동적으로 생성되는 경우에는 검색 결과에 따라 페이지가 동적으로 렌더링 되므로, 사전 렌더링된 정적 파일을 사용할 수 없다. 대신 이러한 경우에는 getServerSideProps 함수를 사용하여 런타임 시점에 페이지를 동적으로 렌더링 할 수 있다.

 

 

• on-demand 경로 생성

  on-demand 방식은 동적 페이지 경로를 생성하면 빌드 시점에 미리 모든 가능한 경로에 대한 정적 페이지를 생성하는 것이 아니라, 요청 시점에 해당하는 페이지를 생성하는 방식이다.

  fallback: false 옵션을 사용하여 on-demand 방식으로 동적 페이지를 생성하는 경우 getStaticPaths 함수에서는 모든 가능한 동적 경로를 미리 지정해줘야 한다. 이를 위해 getStaticPaths 함수에서는 배열 형태로 모든 가능한 경로를 반환해야 한다.

export async function getStaticPaths() {
  const res = await fetch('https://example.com/posts')
  const posts = await res.json()
  
  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }))
  
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://example.com/posts/${params.id}`);
  const post = await res.json();
  
  return {
    props: { post }
  }
}

  위 코드에서 getStaticPaths는 'https://example.com/posts'에서 게시물 목록을 가져와 paths 배열에 게시물 id에 대한 params를 담아 반환한다. 그리고 fallback: false 옵션을 설정하여 on-demand 방식으로 동적 페이지 경로를 생성한다. getStaticProps에서는 params를 인자로 받아 해당하는 게시물 데이터를 가져와 props로 반환한다.

  이렇게 fallback: false 옵션을 사용하여 on-demand 방식으로 동적 페이지 경로를 생성하면, 빌드 시점에 미리 정적 페이지를 생성하지 않아도 되므로 빠른 성능을 기대할 수 있다. 그러나 모든 가능한 경로를 미리 지정해주어야 하므로 경로가 매우 많은 경우에는 이 방법이 적합하지 않다.