[Next.js] Data Fetching -Incremental Static Regeneration(ISR)

getStaticProps를 사용해서 프로젝트를 Build 하면 서버 사이드 렌더링을 할 수 있다. 하지만 이 방법은 프로젝트가 Build 될 때 정적 페이지가 만들어지는 방식이다.

만약 데이터가 자주 바뀌어야 하는 상황이라면, 데이터가 바뀔때마다 Build 해야하므로 좋지 못한 방법이다. 이러한 문제에 대한 대안은 Incremental Static Regeneration (ISR)이다

ISR을 사용하기 위해서는 getStaticProps에 revalidateprop을 추가해주면 됩니다.

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

  return {
    props: {
      posts,
    },
    revalidate: 10, // In seconds
  }
}

revalidate의 값의 단위는 '초'이며 , 이전 요청 시간에서 해당 값의 시간이 지난 후에 페이지를 요청하게 되면 re-build 되는 방식입니다.