[Next.js] getStaticPath

getStaticPaths

---

• static generation dynamic routing 에 대한 path 지정

• returns : (paths: [{params : {key: paramsValue}}], falback: boolean)

hardcoding example :

export const getStaticPaths = async () => {
  return {
    paths: [
      {
        params: { postId: "1" },
      },
      {
        params: { postId: "2" },
      },
      {
        params: { postId: "3" },
      },
      ...
    ],
    fallback: false,
  };
};

getting all data :

...
type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};
...

export const getStaticPaths = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = (await response.json()) as Post[];

  const paths = data.map((post: Post) => {
    return {
      params: {
        postId: String(post.id),
      },
    };
  });

  console.log(paths);
  return { paths, fallback: false };
};

• 상세페이지 정보를 가져오는 API 요청에서의 결과값을 사용

• ❗️필수 naming convention : params의 key == pages/[key].tsx

getStaticPaths - fallback 설정

---

1 . fallbak: false

• getStaticPaths : 빌드타임에 getStaticProps 를 통해 HTML에 렌더

• getStaticPaths를 통한 빌드된 paths가 아닐 시 404페이지 라우팅 : 빌드 시 페이지 생성이 안되기 때문!

2. fallbak: true

• getStaticPaths : 빌드타임에 getStaticProps 를 통해 HTML에 렌더 : false랑 통일

• getStaticPaths를 통한 빌드된 paths가 아닐 시 fallback 페이지

• Next.js : 요청된 path의 HTML, JSON 파일 생성

• 생성이 완료돠면 fallback 페이지를 완성된 페이지로 전환

• 차후요청시 새로운 리스트에 대한 기록이 남으며 다른 pre-rendered 페이지와 동일하게 생성된 페이지를 받아온다

const post: NextPage<Props> = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

  return (
    <>
      <h2>
        {post.id} : {post.title}
      </h2>
      <p>{post.body}</p>
    </>
  );
};

• useRouter 의 isFallback 함수를 통해 fallback 상태 확인 가능

• fallback 이 완료가 될 때 까지 로딩화면이나 대체 컴포넌트 렌더

• getStaticPath 를 통해 지정한 값보다 path가 연결된 link가 화면에 보인다면 빌드 이후 Next.js가 알아서 path를 만든다.

🤔 fallback: true 를 사용하는 이유

• 대규모 ecommerce 사이트에서 리스트 데이터가 많을 때 미리 렌더할 값만 getStaticPath로 지정

• 나머지는 fallback: true 설정을 통해 스크롤을 했을때 렌더되게

3. fallbak: 'blocking'

• getStaticPaths : 빌드타임에 getStaticProps 를 통해 HTML에 렌더 : false랑 통일

• getStaticPaths를 통한 빌드된 paths가 아닐 시 첫 요청에 HTML 페이지 생성

• "the browser ins requesting the page" -> "the full page is loaded"

• loading/fallback 에 의한 화면의 깜빡임이 없음 : 중간페이지 전환이 없음

• 차후요청시 새로운 리스트에 대한 기록이 남으며 다른 pre-rendered 페이지와 동일하게 생성된 페이지를 받아온다

🤔 fallback: 'blocking' 를 사용하는 이유

• UX : 오래 걸리지 않는 요청을 할 때 불필요한 로딩 화면을 없애기 위함