Docs_Data Fethcing(getStaticPaths)

getStaticPaths

Dynamic Routes와 getStaticProps를 동시에 사용하고 있는 페이지에서는 SSG를 사용할 path들을 미리 정의해둬야 한다.

Dynamic Routes를 사용하는 페이지에서 getStaticPaths를 export할때 Next.js는 getStaticPaths에 의해 미리 정의된 모든 경로들만을 Statically pre-render하기 때문이다.

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

 

When should I use getStaticPaths?

getStaticPaths는 Dynamic routes를 사용하는 페이지를 statically pre-rendring하는경우 혹은 다음과 같은경우에 사용한다.

• 페이지가 SEO, 빠른로딩속도를 위해 pre-rendered되야만 하는경우
  getStaticProps로부터 생성된 HTML과 JSON파일은 성능을 위해 *CDN에 의해 저장죈다.
  (CDN이란 Content Delivery Network의 약자로, 웹사이트의 콘텐츠(이미지,텍스트,HTML,JS파일등등)을 보다 빠르게 전달하기 위한 기술이다.)
• 데이터가 *filesystem으로부터 오는경우
  (Next.js에서 filesystem은 프로젝트의 루트 디렉토리 내부에 있는 파일과 폴더들을 의미한다.)
• 데이터가 database로부터 오는경우
• 데이터가 공공연하게 저장될 수 있는경우 (not user-cpecific)
• 데이터가  headless CMS으로부터 오는 경우

 

When does getStaticPats run

getStaticPaths는 빌드타임때에만 일어난다. (runtime중에는 호출되지 않는다.)

 

How does getStaticProps run with regards to getStaticPaths

• getStaticProps는 next build를 통해 빌드중 생성된 경로들에 대해서만 실행된다. 
• getStaticProps는 fallback: true옵션을 사용할 경우 background에서 작동한다.
• getStaticProps는 fallback: blocking옵션을 사용할 경우 *initial render이전에 작동한다.
  (initial render란 사용자가 웹 페이지에 처음 접속했을 때의 최초 렌더링을 의미한다.)

 

Where can I use getStaticPaths

• getStaticPaths는 반드시 getStaticProps와 함께 사용되어야 한다.
• getStaticPaths는 getServerSideProps와 사용될 수 없다.
• getStaticPaths는 getStaticProps를 사용하는 Dynamic Route에서 export할 수 있다.
• getStaticPaths는 non-page file 즉, pages폴더안에 있는 파일이 아닌곳에서 export될 수 없다.
• getStaticPaths는 컴포넌트의 일부가 될 수 없고 컴포넌트 바깥에서 독단적으로 쓰여야한다.

 

Runs on every request in development

next dev를 통한 개발모드에서는 getStaticPaths가 모든 요청마다 호출된다.

 

Generating paths on-demand

getStaticPaths 함수는 fallback 옵션을 이용하여 *on-demand로 페이지를 생성하는 대신, 어떤 페이지가 빌드 중에 생성되는지를 제어할 수 있게 한다. getStaticPaths를 통해 많은 페이지를 경로로 작성해놓을 경우 느린 빌드과정을 야기할 수 있다.

paths에 빈배열을 반환하면 어떤 페이지도 빌드타임에 미리 생성되지않는다. 이 옵션은 Next.js 애플리케이션을 여러 환경에 배포할때 특히 유용하다. 빠른 빌드타임을 확보할 수 있고, 수백/수천 개의 정적 페이지가 있는 사이트에서 특히 유용하다.

(on-demand란 request랑 비슷한 의미인 것 같다.)

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