[Next] 기본 개념(2)(feat. ISR)

ISR(Incremental Static Regeneration)

ISR은 re-build를 하지 않으면 stale data를 보여주는 SSG의 한계를 보완하기 위한 방법으로 사용된다.

사용 방법

getStaticProps에 revalidate 시간을 부여함으로써 page를 regernerate 할 수 있다.

export const getStaticProps = async (context) => {
  const { params } = context

  const fetchData = await fetch(`http://localhost:4000/products/${params.productId}`)
  const data = await fetchData.json()

  if (!data.id) {
    return {
      notFound: true,
    }
  }

  return {
    props: {
      data,
    },
    revalidate: 10,
  }
}

순서(새로고침 시)

1. (before revalidate) regeneration이 이루어지지 않고 캐싱된 html을 보여준다.
2. (after revalidate) regeneration이 일어나지만 캐싱된 html를 가져와 변경이 일어나지 않는다.
3. (after revalidate) regeneration이 일어난 페이지를 보여준다.

고려 사항

• getStaticPaths의 params를 일부 설정하고, fallback을 true 또는 'blocking'으로 설정한 경우 설정한 페이지는 static 하게 미리 만들어져 데이터가 변화하더라도 stale 데이터를 보여주고, 그렇지 않은 페이지의 경우 initial request시에 새로 만들어지기 때문에 변화된 데이터를 보여준다. 하지만 이 페이지의 경우에도 캐싱이 되어 그 다음부터는 stale한 데이터를 보여주게 된다.

• revalidate를 10으로 설정한다고 자동으로 10초마다 페이지가 regenerate 되는 것이 아니다. 사용자가 새 데이터를 위해 직접 새로고침을 해야한다.

• 그렇기 때문에 사이트의 용도와 목적에 맞게 revalidate 시간을 부여해야한다.

• regeneration이 실패하면 성공할 때까지 그 전의 캐시된 html을 띄워준다.

참고
https://www.youtube.com/watch?v=FZTaD32ueE8&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH&index=30