[Next.js] getStaticPaths

getStaticPaths

기본개념

  • dynamic route를 이용한다면, build 시에 HTML을 생성하기 위해 path list를 정의해야할 필요가 있음
  • 이런 경우에 getStaticPaths를 사용
  • Next.js는 getStaticPaths에 정의된 모든 path에 대해 정적으로 pre-rendering을 함
  • server-side에서 build 시에만 동작
  • page에서만 허용
  • 개발 시에는 모든 요청에 대해 동작
export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } } 
    ],
    fallback: true or false 
  };
}

사용처

  • dynamic route를 사용한 정적 pre-rendering page가 있다면 사용해야만함
  • getServerSideProps와는 함께 사용할 수 없음

return

  • paths
  • required
  • pre-render되는 path를 결정
  • ex) pages/posts/[id].js로 dynamic route를 만들었다고 가정
export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: ...
  }
}
  • Next.js는 posts/1 posts/2를 pages/posts/[id].js를 사용하여 build 시에 정적으로 생성
  • posts/1 posts/2를 pages/posts/[id].js를 사용하여 build 시에 정적으로 생성
  • params는 dynamic route에서 page pathname으로 사용된 parameter와 match되어야만 함
  • fallback
  • required
  • false
    • getStaticPaths에 path로 정의되지 않은 것은 404 page로 응답
    • pre-render하는 path list가 많지 않다면(build시에 모두 정적 생성되기 때문입니다) 사용할 수 있음
    • 새로운 page가 추가되었을 때는 build를 새로해야 404 page로 가지 않음
  • true
    • 매우 많은 수의 정적 페이지들(e-commerce site와 같은? 방대한 데이터에 의존하는)이 있는 app 에서 유용
    • build 시에 생성 되지 않았던 path들은 404 page가 되지는 않음
    • 대신 Next.js는 이러한 path들에 대해서 첫 요청이 들어오면 "대체" 버전(fallback 버전)을 제공
    • background에서는 Next.js가 요청된 path에 대해 정적으로 HTML과 JSON을 생성할 것이고 getStaticProps에 넘겨줌
    • 사용자 관점에서는 fallback page에서 완전한 page로 swap될 것
    • 동시에 Next.js는 이 path를 pre-render page 리스트에 추가
    • 그리고 후속 요청은 정적 생성된 page(build 시 pre-rendering 페이지)와 동일하게 제공
    • next export 사용시에는 제공되지 않음
    • Fallback page
    • next/router를 사용해 fallback 인지 체크
    • router.isFallback === true
☆ pages/posts/[id].js

import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  ★ 만약 아직 page가 생성되지 않았다면, 아래와 같이
  ★ Loading...이라는 글자를 보여줍니다.
  ★ (getStaticProps() 동작이 끝나기 전까지)
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  ★ Render post...
}

★ build time 때 호출
export async function getStaticPaths() {
  return {

    ★ 정적 생성 : `/posts/1` and `/posts/2`
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    ★ `/posts/3` 와 같은 
    fallback: true,
  }
}

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

  return {
    props: { post },
    ★ 요청이 들어온다면
    ★ 매 1초당 post를 재 생성 할것입니다.
    revalidate: 1,
  }
}

export default Post

links

social