[Next.js] Data Fetching - getStaticPaths

만약 페이지가 동적 라우팅을 하고 있고 getStaticProps()를 사용한다고 했을때 주의할 점이 있습니다. Next.js는 이 동적 페이지가 몇개나 필요할지 모르기 때문에 정적으로 생성해줄 path들을 정의해주어야 합니다.

동적 라우팅을 하는 페이지에서 getStaticPaths 함수를 내보낼 때, Next.js는 getStaticPaths에 의해 지정된 모든 경로를 미리 렌더링하게 됩니다!

export async function getStaticPaths() {
  return {
    paths: [
      { params: { someId : 'a1' } },
      { params: { someId : 'a2' } },
    ],
    fallback: true 
  };
}

위와 같이 지정해 주게되면 a1, a2 페이지는 정적으로 렌더링 되게 됩니다.

만약 100개 200개 되는 페이지를 미리 로딩한다고 했을때, 사용자가 모든 페이지를 방문할 가능성은 얼마나 될까요? 아마도 대부분의 페이지는 보지 않을거고 그 데이터는 낭비될겁니다.

이 때 필요한게 fallback이 필요하게 됩니다. true로 설정하게 되면 paths에 설정된 페이지만 미리 생성하게되고 paths에 설정되지 않은 페이지는 사용자가 방문할 때 불러오게 됩니다.

하지만 문제가 발생합니다. 주소창에 path를 입력하고 들어가면 미리 생성되지 않은 페이지에는 에러가 발생합니다. fallback이 있다한들 데이터가 순식간에 불러와지고 생성되는게 아니기 때문입니다. 그러므로 fallback을 사용할때는 fallback 상태를 반환할 수 있도록 해야합니다.

예를 들면

if(!fatchedData) {
	return <p>로딩중...</p>;
}

컴포넌트에 해당 코드를 추가해주면, 데이터가 불러와지고 페이지가 생성되는 동안에는 해당 코드가 보여지게 됩니다.

또 다른 방법으로는 fallback: 'blocking' 이 있습니다. Next.js가 알아서 처리하게 됩니다. 하지만 페이지가 생성되는 동안에 다른 화면을 보여주는게 아니기 때문에 로딩이 길어보이는 현상이 발생하게 됩니다.

어떠한 방법을 사용할지는 개발자에게, 프로젝트 기획에 달려있습니다.