isFallback, getStaticPaths

isFallback, getStaticPaths

0. 시작하기 전..

 - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기)

 

1. isFallback

 - isFallback은 Suspense 내에서 현재 자식이 로딩 중인지 여부를 나타내는 불리언(Boolean) 속성입니다.

 - 터미널에 npm run dev를 입력하여, 실행해보면 상품에 들어갈 때마다 새로 생성되는 것을 알 수 있습니다.

 - #1. 그것을 자세히 보기 위해, const Post => {...}안에 다음과 같이 추가하고 실행해보겠습니다.

    → 그러고 실행해보면 다음과 같이 true, false가 나오는 것을 확인할 수 있는데 이것이 로딩 중인지 여부를 나타냅니다.

const router = useRouter();
console.log(router.isFallback);

 

 

 - #2. 그럼 이제, const Post => {...} 안에 다음과 같이 입력하여 로딩 화면을 나타내봅시다.

    → 실행해보면, 로딩 화면이 나오는 것을 확인할 수 있습니다.

if (router.isFallback) {
  return (
    <div style={{ padding: "100px 0" }}>
      <Loader active inline="centered">
        Loading
      </Loader>
    </div>
  );
}

 

2. getStaticPaths

 - getStaticPaths는 정적 경로를 동적으로 생성하는 데 사용됩니다.

 - 일반적으로 동적 라우팅을 할 때 사용되며, 페이지 경로의 일부를 정적으로 생성할 수 있도록 도와줍니다.

 - [id].js에서 params를 통해 3개의 id를 받는 것이 아닌 전부를 받아서 나타내보겠습니다.

 - #1. detail 폴더 안에 있는 [id].js에 들어가 getStaticPaths() {...}안을 다음과 같이 수정해줍니다.

    → 그러면 .next 폴더 안에 detail 폴더를 들어가보면, 모든 상품에 관한 html이 생성되었음을 확인할 수 있습니다. 

export async function getStaticPaths() {
  const apiUrl = process.env.apiUrl;
  const res = await Axios.get(apiUrl);
  const data = res.data;

  return {
    // paths: [
    //   { params: { id: "740" } },
    //   { params: { id: "730" } },
    //   { params: { id: "729" } },
    // ],

    paths: data.map((item) => ({
      params: {
        id: item.id.toString(),
      },
    })),

    // 페이지 대응
    fallback: true,
  };
}

 

 - #2. silce( )함수를 사용해 map( )함수 부분을 다음과 같이 수정하여, 일부만 나타나게 하겠습니다.

    → 그러면 생성된 상품이 아닌 상품들은 로딩 화면이 나타나게 됩니다.

paths: data.slice(0, 9).map((item) => ({
  params: {
    id: item.id.toString(),
  },
})),

 

3. 정리하며

 - 지금까지 isFallback과 getStaticPaths에 대해 알아보았습니다.

 

※ 참고 깃 주소 : https://github.com/NewBean0312/nextjs-study/commit/63062745a0206d2b66e733a86daa7d37fa39d79b

isFallback, getStaticPaths · NewBean0312/nextjs-study@6306274