getStaticPaths

Page가 Dynamic Routes이고

getStaticProps가 있는 상태에서, 어떠한 페이지를 pre-render할 지를 알아야한다.

우리는 getStaticProps를 통하여 이를 해결할 수 있다.

 

export async function getStaticPaths() {
  return {
    paths: [
        { params: { id: '1' } },
        { params: { id: '2' } }
    ],
    fallback: true, false, or 'blocking' // See the "fallback" section below
  };
}

 

getStaticPaths 반환값

1. paths: 어떠한 path를 pre-render 할지를 결정한다. 예를 들어, dynamic route가 "pages/posts/[id].js"일 경우, Next.js는 정적으로 "posts/1"과 "posts/2"를 빌드 타임에 생성할 것이다.

만약, "pages/[...slug]"와 같은 방식이면

paths: [
	{ params: {slug: ["foo", "bar"]},
    ...

이러한 방식으로 해야한다.

이러면, "pages/foo/bar" 페이지를 정적으로 만들것이다.

 

2. fallback: [boolean]

false일 경우, getStaticPaths에서 제공하지 않은 path는 404페이지가 뜰 것이다.

보통, 페이지가 자주 추가되지 않거나 할 때 사용한다.

 

true일 경우, 우선 다른 형태의 page가 나타나게 하고, getStaticProps에서 data Fetching후, 그 결과를 render해준다.

예시

// pages/posts/[id].js
import { useRouter } from 'next/router'

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

  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  // Render post...
}

// This function gets called at build time
export async function getStaticPaths() {
  return {
    // Only `/posts/1` and `/posts/2` are generated at build time
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // Enable statically generating additional pages
    // For example: `/posts/3`
    fallback: true,
  }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return {
    props: { post },
    // Re-generate the post at most once per second
    // if a request comes in
    revalidate: 1,
  }
}

export default Post

보통, 자주 방문하는 페이지를 paths에 넣고 빌드 후, 만약 이용자가 다른 page를 요청하면, 그제서야 getStaticProps를 통하여 data Fetching 후 나타나게 한다.