Skip to main content

Incremental Static Regeneration

ISR은 getStaticProps 메서드로 정적 페이지를 생성하고 갱신하는 방법입니다.

ISR 소개​

ISR은 점진적으로 정적 페이지를 생성(재생)한다는 의미인 Incremental Static Regeneration의 약자입니다. 좀 더 쉽게 얘기하면 정적 페이지의 일부를 미리 생성해 두고 필요에 따라 서버 실행 시점에 백그라운드에서 추가적으로 업데이트하여 콘텐츠를 제공하는 방법입니다.

ISR은 getStaticProps, getServerSideProps 메서드와 같이 별도 메서드 함수가 존재하지 않습니다. 대신 아래와 같이 getStaticProps의 반환 값에 revalidate 속성을 추가해 주면 됩니다.

export async function getStaticProps() {
  const res = await fetch(`https://api.com/blog/${params.blogId}`)
  const blog = await res.json()
  return { 
    props: { blog },
    revalidate: 10, // 10초
  }
}

위 코드는 getStaticProps 메서드에 revalidate 속성을 추가해 ISR 기능을 구현한 코드입니다. 딱히 거창한 코드가 필요하지 않고 반환 값에 revalidate 속성만 추가하면 됩니다. 이렇게 하면, 매 10초마다 getStaticProps 메서드가 다시 실행되면서 갱신된 콘텐츠가 사용자에게 제공됩니다.

tip

참고로 getStaticProps 메서드는 애플리케이션 실행 시점이 아니라 빌드 시점에 생성된다고 배웠습니다. 따라서, revalidate 옵션을 추가하면 이 기본 동작이 변경되어 빌드할 때가 아니라 애플리케이션이 동작하고 있는 실행 시점에 코드가 실행되는 것으로 바뀝니다.

ISR 특징 - On demand Revalidation​

Next v12부터 특정 주기별로 getStaticProps를 재실행하는 기본 ISR 방식이 아닌 즉시(on-demand) ISR 방식이 지원됩니다. 아래와 같이 revalidate() API로 사용자 요청에 의해 바로 페이지의 콘텐츠를 갱신할 수 있습니다.

https://<your-site.com>/api/revalidate?secret=<token>
pages/api/revalidate.js
export default async function handler(req, res) {
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' })
  }
 
  try {
    await res.revalidate('/blog/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // revalidate() 실행할 때 에러가 발생하면 이전에 생성된 페이지를 보여줌
    return res.status(500).send('Error revalidating')
  }
}