NextJS 사전렌더링 2. getStaticPaths를 이용한 동적페이지 사전렌더링

NextJS가 getStaticProps를 쓰는 동적페이지를 사전렌더링하지 않는 이유

NextJS는 모든페이지를 사전에 만들어두지만 getStaticProps를 쓰는 동적페이지는 만들어두지 않는다

(동적페이지란 파일이름이 대괄호로 되어있는, 템플릿은 같으나 데이터가 바뀜으로 인해서 다른페이지로 인식되는 페이지를 말한다)

그 이유는 데이터에 따라 [id].tsx 페이지의 경우 1번 페이지 2번페이지 3번페이지…등등 몇개의 페이지를 생성해야될지 알 수 없다 따라서 기본적으로는 동적 페이지를 사전 렌더링 하지 않는다

따라서 getStaticPaths을 통해 라우팅되는 경우의 수를 집어넣어 빌드 타임 때 정적으로 렌더링할 경로를 설정해야한다

getStaticPaths 구조

• paths: 어떤 path의 페이지들을 빌드 타임에 생성할지 정하는 배열

paths:[
	{params: {id:1}}
]

공부하다보니 대부분의 사용자들이 데이터의 양을 알 수 없기 때문에 하드코딩보단 map을 사용해 배열을 만들어 넣어 사용하는것 같다

• fallback: paths에 정의되지 않은 혹은 생성되지 않은 path로 요청이 들어온 경우 어떻게 할지 정하는 boolean 또는 'blocking' 타입의 값

getStaticPaths를 사용했을때 동적페이지도 빌드시에 정적생성된것을 확인할 수 있다

fallback 사용하기

false의 경우

paths에 정의되지않은 경로로 접근시 404 페이지를 반환한다

return {
    paths,
    fallback: false
  }

true의 경우

paths에 정의되지않은 경로로 접근시 getStaticProps를 호출해 페이지를 만들고, 빌드된 path 리스트에 추가한다. 페이지를 로딩하는 동안 fallback 페이지를 반환 후 페이지가 완성되면 출력한다

const DetailPage = (props: Iprops) => {
  const { products } = props;
  const router = useRouter();

//fallback일 경우 나오는 컴포넌트
  if (router.isFallback) {
    return <div>Loading 진행중</div>;
  }

  return (
    <div>
      <p>title:{products.title}</p>
    </div>
  );
};

blocking의 경우

paths에 정의되지않은 경로로 접근시 fallback 컴포넌트나 404page를 띄우지않고 서버에서 페이지가 생성될때까지 기다린 후 페이지를 보여준다

return {
    paths,
    fallback: 'blocking'
  }