Dynamic Route

Next.js는 기본적으로 pre-render를 수행하기 때문에 동적 라우팅(외부 데이터에 의존하는 경로) 페이지인 경우에도 getStaticPaths와 getStaticProps를 활용하여 정적페이지로 생성할 수 있다.
이렇게 하면 Next.js에서 동적 URL이 활성화 된다.

동적 라우팅 페이지를 정적페이지로 생성하는 방법

1. pages 디렉토리안에서 [id].js 페이지를 생성 ([]는 next.js의 동적 경로)
2. getStaticPaths를 활용하여 동적 라우팅할 페이지 리스트를 지정
3. getStaticProps를 활용하여 id가 있는 게시물에 필요한 데이터를 가져온다.

getStaticPaths

• 동적 라우팅 페이지를 구현할때 정적페이지(getStaticProps을 사용하는 경우)로 만들려면 필수로 사용
• 반환값으로 paths와 fallback을 포함하는 객체를 반환해주어야 한다.
• development환경에서는 모든 요청에서 실행되고 production환경에서는 빌드에서 실행됨

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
      { params: { id: '3' } },
    ],
    fallback: false,
  }
}

paths

• pre-render를 수행해야 하는데 동적 라우팅은 어떤 페이지를 미리 만들어야 할지 모르므로 paths에 미리 지정을 해줘야 한다.
• { params: { id: xx} } 형식의 객체 배열 형태
• 객체에는 params 키가 있어야 하고 id 키가 있는 객체를 포함해야 한다.
• 동적 라우팅 페이지를 모두 pre-render로 구현하는 것은 사실상 어려운 일이므로 paths에 어느정도 제한을 두어야 한다.

fallback

• paths 이외의 경로들에 대해 추후 요청이 들어올 때 만들어 줄지(true) 404 page를 띄울지(false) 설정
• fallback: true로 지정하면 path에 현재 경로가 없는 경우 현재 경로에 해당하는 데이터를 (getStaticProps 설정한 부분을 실행) 서버로부터 불러와 화면에 그려준다.
• 이때 next.js는 빈 데이터인 dummy pre-render를 수행하게 되는데 이 경우 페이지가 로드중임을 사용자에게 알려야 한다. 이 때 사용하는것이 `route.isFallback.
• route.isFallback을 설정하지 않으면 외부데이터를 사용하는 코드에서 데이터가 누락되므로 예외가 발생할 수 있다.
• 페이지가 렌더링되고나서 만들어진 HTML을 .next/server/pages에 저장하게 되는데 이미 저 경로에 만들어진 페이지가 있다면 이미 있는 결과물을 반환하게 된다.(캐시된 페이지를 사용하므로 next build 전까지 업데이트가 되지않음)

const post () => {
  const router = useRouter();
  
  if (router.isFallback) {
    return <div>로딩중...</div>
  }
}

fallback: 'blocking'

• fallback: true와 비슷하지만 dummy pre-render를 수행하지 않는다.
• 대신 페이지가 처음으로 렌더링될때까지 브라우저가 중단된다.
• 첫 요청 이후에는 fallback: true와 마찬가지로 캐시에서 빠르게 제공된다.

• 참고자료

Catch-all Routes

• [...id].js와 같이 대괄호에 '...'를 붙이게 되면 모든 경로를 포착하도록 동적 경로를 확장한다.
• pagesposts[...id].js는 /posts/a, /posts/a/b, /posts/a/b/c와 같이 매치된다.
• getStaticPaths에 id 값으로 배열을 넣어줘야 하고 getStaticProps에 params.id는 배열이 된다.

return [
  {
    params: {
      // Statically Generates /posts/a/b/c
      id: ['a', 'b', 'c']
    }
  }
  //...
]

export async function getStaticProps({ params }) {
  // params.id === ['a', 'b', 'c'];
}