Next.js 5-2. ISR(Incremental Static Regeneration)

• 오류 처리와 재검증

  백그라운드에서 재생성을 처리할 때 내부에 오류가 있거나 수동으로 오류를 발생시키면 마지막으로 성공적으로 생성된 페이지가 계속 표시된다. 그리고 다음 후속 요청에서 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을 구성하여 이를 사용하면 된다.