만약 페이지가 동적 라우팅을 하고 있고 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가 알아서 처리하게 됩니다. 하지만 페이지가 생성되는 동안에 다른 화면을 보여주는게 아니기 때문에 로딩이 길어보이는 현상이 발생하게 됩니다.
어떠한 방법을 사용할지는 개발자에게, 프로젝트 기획에 달려있습니다.