[Next.js] Dynamic Routing과 Data Fetching

pages/sessions/[id].tsx

원래 알고있던 정보로는 함수 내부에서 const { id } = router.query; 이런 식으로 작성했을 때 이 페이지의 path에서 id값만 따올 수 있는걸로 알고있었는데 data fetching하는 과정에 있어서 저 데이터를 사용하기가 쉽지 않음.

그냥 export default 함수 내부에 data fetching 함수를 선언하고 useEffect를 이용해 id값이 바뀔 때마다 data를 fetching하는 방식으로 코드를 짜 봤으나 id값을 읽어오는데 시간이 걸려서 그런지 계속해서 오류 발생.

그래서 일단 이런 일반적인 방식으로는 저 id 값을 활용할 수 없다고 판단하여 이 페이지도 마찬가지로 getStaticProps를 이용해 구성하기로 함.

근데 또 문제가 getServerSideProps나 getStaticProps 안에서는 저 id값을 알아낼 수 있는 방법이 없었음. (이 함수 내부에서는

찾아보니 Invalid getStaticPaths Return Value 라는 제목으로 공식 문서가 있더라…

getStaticPaths는 pages/**/[id].tsx 형태의 동적 라우팅 페이지 중, 빌드 시에 static하게 생성할 페이지를 정하는 역할을 한다.

사용 예제는 다음과 같다.

import type { GetStaticPaths } from "next";
// GetStaticPaths는 getStaticPaths의 타입

export const getStaticPaths: GetStaticPaths = async () => {
  // getStaticProps처럼 async
  // ...

  return {
    paths: [
      { params: {} }
    ],
    // { parmas: {} }[] 형태로 paths 리턴해야 함
    // 빌드 시에 해당 페이지들을 static으로 생성
    fallback: true | false | 'blocking'
    // fallback을 리턴해야 함
  }

  // 예시
  return {
    paths: [
      { params: { id: "1" }},
      { params: { id: "2" }}
    ]
    // pages/posts/[id].tsx라고 가정
    // pages/posts/1과 pages/posts/2를 static으로 생성
  }

fallback 리턴 값에 따른 차이

• fallback: false일 때 → getStaticPaths에서 리턴하지 않은 페이지는 모두 404로 연결
• fallback: ture일 때 getStaticPaths에서 리턴하지 않은 페이지 접속 시
  1. 먼저 사용자에게 fallback 페이지를 보여줌
  2. 서버에서 static하게 페이지를 생성함
  3. 해당 페이지를 사용자에게 보여줌
  4. 다음부터 해당 페이지로 접속하는 사용자에게는 static한 페이지를 보여줌
• fallback: ‘blocking’일 때 getStaticPaths에서 리턴하지 않은 페이지 접속 시
  1. 사용자에게 server side rendering한 static 페이지를 보여줌
  2. 다음부터 해당 페이지로 접속하는 사용자에게는 serverside rendering된 static한 페이지를 보여줌

사용 예제

// pages/posts/[id].tsx
import { useRouter } from "next/router";
// fallback 페이지를 위한 useRouter import

const Post = ({ post }) => {
  cont router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>
    // fallback = true 시, 접속한 페이지를 생성할 때 보여주는 페이지
  }

  return (
    <div>{post.title}</div>
  )
}

export default Post;

export const getStaticPaths = async () => {
  return {
    paths: [
      { params: { id: 1} }
    ],
    fallback: true
  }
}

export const getStaticProps = async ({ params }) => {
  const response = await fetch(`https://example.com/${params.id}`);
  const post = response.json();

  return {
    props: { post }
  }
}