- 오류 처리와 재검증
백그라운드에서 재생성을 처리할 때 내부에 오류가 있거나 수동으로 오류를 발생시키면 마지막으로 성공적으로 생성된 페이지가 계속 표시된다. 그리고 다음 후속 요청에서 Next.js는 호출을 다시 시도한다.
export async function getStaticProps() {
// 이 요청에서 포착되지 않은 오류가 발생하면 Next.js는
// 현재 표시된 페이지를 무효화하지 않고
// 다음 요청에서 getStaticProps를 재시도한다.
const res = await fetch('https://.../posts')
const posts = await res.json()
if (!res.ok) {
// 서버 오유가 있는 경우 다음을 수행할 수 있다.
// 캐시 업데이트되지 않도록 반환하는 대신 다음 요청이 성공할 때까지 오류를 발생시킨다.
throw new Error(`Failed to fetch posts, received status ${res.status}`)
}
// 만약 요청이 성공하면 게시물을 반환하고 10초마다 재확인한다.
return {
props: {
posts,
},
revalidate: 10,
}
}
- Self-hosting ISR
Self-hosting ISR은 Next.js의 ISR 기능을 사용하여 정적인 페이지를 호스팅 하는 방법이다. 이 방법은 완전한 정적 사이트 생성과 서버리스(SSR) 사이에서 성능과 유연성 면에서 균형을 이룰 수 있는 방법이다.
Self-hosting ISR을 사용하면 정적 페이지를 미리 생성하여 CDN에 캐시하고 필요할 때마다 이전 버전의 페이지를 제공하고 동시에 백그라운드에서 새 페이지를 생성하여 업데이트할 수 있다. 이러한 방식으로 새 페이지 버전이 생성될 때마다 CDN 캐시를 업데이트하므로, 새 페이지 버전이 사용 가능하게 될 때까지 기존 페이지 버전에 제공된다.
Self-hosting은 서버리스(SSR)의 성능과 정적 사이트 생성의 유연성을 모두 가질 수 있고, CDN 캐시를 사용하므로 전 세계적인 사용자들에게 빠른 페이지 로드를 제공할 수 있다. 다음으로 정적 페이지를 사전 생성하고 CDN에 캐시 하므로 서버의 부하를 줄일 수 있다. 마지막으로 ISR을 사용하므로 동적 데이터가 변경되는 경우에도 페이지를 업데이트할 수 있다.
Self-hosting ISR을 구현하려면 먼저, Next.js 프로젝트에서 ISR을 구현해야 한다. 이를 위해 getStaticProps 함수에 revalidate 옵션을 추가하고 페이지를 미 생성할 시간 간격을 지정한다.
export async function getStaticProps() {
const res = await fetch('https://my-api/data');
const data = await res.json();
return {
props: {
data,
},
revalidate: 60, // 60초마다 페이지 업데이트
}
}
이제 미리 생성도니 정적 페이지를 CDN에 배포한다. 이를 위해 정적 페이지를 생성한 후 CDN에 업로드하면 된다. 대표적인 CDN 서비스로는 AWS CloudFront, Cloudflare, Akamai 등이 있다.
마지막으로 미리 생성된 정적 페이지를 사용하여 웹 사이트를 호스팅 한다. 이를 위해 정적 페이지를 서버에 업로드하고 CDN을 구성하여 이를 사용하면 된다.
'Next.js' 카테고리의 다른 글
Next.js 7. Built-in CSS Support (0) | 2023.04.27 |
---|---|
Next.js 6. Client-side data fetching (0) | 2023.04.26 |
Next.js 5-1. ISR(Incremental Static Regeneration) (0) | 2023.04.25 |
Next.js 4-3 getStaticPaths (0) | 2023.04.24 |
Next.js 4-2. getStaticPaths (0) | 2023.04.24 |