[Next.js] - Incremental Static Regeneration

ISR Incremental Static Regeneration

---

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = (await response.json()) as PostInterface;

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

Next.js : Stale while revalidate

YouTube-codevolution

• revalidate : ISR 시간 설정

• 빌드 이후 static generation 을 통한 데이터가 다시 데이터를 받아오기까지의 시간 설정

• 데이터 변경 이후 revalidate 시간이 지나기 전에는 빌드 시 만들어진 cache 데이터를 활용하요 화면 렌더

• revalidate의 시간이 지나고 나서getStaticProps을 통해 재요청하게 돠면 page regeneration 실행

• page regeneration 이 완료돠면 업데이트 된 페이지 렌더

• 실패 시 cache 데이터 페이지 렌더

• 📍 Request Headers 정보에 Cache-Control: ... , stale-while-revalidate 확인 가능