getStaticProps를 사용해서 static한 페이지를 만들어 보았다. 그렇다면, 여러개의 static 페이지를 만들때는 어떻게 해야할까?
getStaticPaths
static한 페이지 이기 때문에, 총 몇개의 페이지를 만들어야 하는지 알려줘야 합니다. 기존의 dynamic page 처럼 하면, static 한 페이지가 아니게 됩니다. (로딩 후에 데이터를 받아옴)
동적 경로를 사용하는 페이지에서 getStaticPaths(정적 사이트 생성)라는 함수를 export할 때 Next.js는 getStaticPaths에 의해 지정된 모든 경로를 정적으로 미리 렌더링합니다. getStaticPaths는 getStaticProps와 함께 사용해야 합니다. getServerSideProps와 함께 사용할 수 없습니다.
getStaticPaths는getStaticProps도 사용하는 동적 경로에서만 사용 할 수 있습니다.
getStaticPaths 함수를 통해서, 총 몇개의 페이지를 어떤 이름으로 미리 빌드할 것인지, 알려주고있습니다. 어떤 값을 return 해야 하는지는, 굳이 외우고 있을 필요는 없고 documents 를 보면서 하면 된다고 생각합니다.
하지만, 어째서 getStaticPaths 가 필요한지 알아두어야 합니다.
getStaticProps
그렇다면, getStaticPaths 를 사용한 페이지에서 getStaticProps 를 어떻게 사용하는지 알아보겠습니다.
const Post: NextPage<{ post: string }> = ({ post }) => {
return <div dangerouslySetInnerHTML={{ __html: post }}></div>;
};
export const getStaticProps: GetStaticProps = async (ctx) => {
const { content } = matter.read(`./posts/${ctx.params?.slug}.md`);
const { value } = await unified()
.use(remarkParse)
.use(remarkHtml)
.process(content);
return {
props: {
post: value,
},
};
};
export const getStaticPaths = () => {
const files = readdirSync("./blog").map((file) => {
const [name, extension] = file.split(".");
return { params: { slug: name } };
});
return {
paths: files,
fallback: false,
};
}
export default Post;
위와 같은 형태로, getStaticProps 에서 getStaticPaths 의 params 를 사용할 수 있습니다. 그 params를 사용해서, staticProps 를 페이지에 넘겨주는 형식으로 하면 됩니다.
아주많은 페이지
빌드시에 만드는 페이지가 10개 100개 정도고 자주 쓰이는 페이지라면 미리 만들어두어도 괜찮습니다. 하지만, 페이지가 아주 많고 아주 오래된 페이지를 미리 만들어 둘 필요는 없습니다.
이 때, getStaticPaths 에서 paths 를 정적으로 주는것이 아니라 빈 배열을 주면 next.js 는 첫 빌드 때 아무런 정적 페이지를 만들지 않습니다.
export const getStaticPaths = () => {
return {
paths: [],
fallback: true,
};
}이때 fallback 은 true 혹은 'blocking' 으로 설정해 주어야합니다.
fallback
fallback: false
fallback이 false인 경우 getStaticPaths에서 반환하지 않은 모든 경로는 404 페이지가 됩니다. next build가 실행되면 Next.js는 getStaticPaths가 fallback: false를 반환했는지 확인한 다음 getStaticPaths가 반환한 경로만 빌드합니다. 이 옵션은 생성할 경로가 적거나 새 페이지 데이터가 자주 추가되지 않는 경우에 유용합니다.
fallback: true
fallback이 true인 경우, 빌드 시 생성되지 않은 경로는 404 페이지를 생성하지 않습니다. 대신 Next.js는 이러한 경로에 대한 첫 번째 요청에서 페이지의 "fallback" 버전(isFallback)을 제공합니다. Google과 같은 웹 크롤러는 fallback 서비스를 제공하지 않으며 대신 경로는 fallback: 'blocking'과 같이 작동합니다. 백그라운드에서 Next.js는 요청된 경로 HTML 및 JSON을 정적으로 생성합니다.
fallback: blocking
getStaticProps나 getStaticPaths를 가지고 있는 페이지에 방문할 때, 만약 그 페이지에 해당하는 HTML 파일이 없다면, fallback: blocking은 유저를 잠시동안 기다리게 만들고, 그동안 백그라운드에서 페이지를 만들어서 유저에게 넘겨줍니다.
fallback: true가 언제 유용합니까?
fallback: true는 데이터에 의존하는 static 페이지가 많은 경우에 유용합니다(예: 매우 큰 전자 상거래 사이트). 모든 제품 페이지를 미리 렌더링하려면 빌드 시간이 매우 오래 걸립니다.
Fallback pages
router를 사용하여 fallback이 렌더링되고 있는지 감지할 수 있습니다. fallback이 렌더링되고 있다면 router.isFallback은 true가 됩니다.
// 페이지가 아직 생성되지 않은 경우 getStaticProps() 실행이 완료될 때까지 아래 로딩이 표시됩니다.
if (router.isFallback) {
return < div>Loading...< /div>
}