Next.js Incremental Static Regeneration 알게 된것! Revalidate = timeout

// next.js의 예제 코드
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  }
}

export default Blog

Incremental Static regeneration에서 user의 request는 page가 re-generate되도록 한다. revalidate 속성은 얼마동안에 한번 regeneration이 일어날지를 설정하는 것인데, 나는 이부분이 잘 이해가 안됬다. 

 

즉 revalidate: 30초일때 어떤 요청 A가 들어오고 이걸 0초라고 치면(얘는 옛날것 받아감)

면 B 요청이 10초때 들어온다고해서 regeneration을 일으키지 않고 얘는 A요청이 trigger한 regeneration요청이 끝났으면 새로운 페이지를 받아가고 아니면 얘도 옛날거 받아간다. 글고 30초가 끝나고 나서 새로운 요청 C가 들어오면 얘는 regeneration을 트리거 한다. 

 

이글을 보고 더 멘탈이 뽀개졌었는데 유튜브에서 영상을 본게 좀 도움이 됬다. 

 

이건 next.js의 데모 사이트인데 여기를 보면 페이지에 대해서 must-revalidate하라고 response를 보내준다. 그리고 github issue가서 좋아요같은거 하나박고 다시 사이트로 와서 새로고침하면 처음엔 변화가 없다. 그러고 다시한번 새로 고침하면 next.js에서 re-generate한 결과를 보여준다. 즉 첫 요청은 regeneration을 트리거할뿐이고 옛날버전을 그대로 받아오고, regeneration이 끝난후에 들어온 요청은 새걸 받는다. 

 

그리고 regeneration을 트리거해서 page를 새로 생성했을때, 결과가 안변했다면 304로 Response를 받는데, 좋아요갯수같은게 달라지고 새로 고침하면 status 200 코드와 함께 regenerate된걸 보내준다. Cache-control의 must-revalidate를 통해서 무조건 revalidate는 하되 regenerate해서 달라진게 있으면 200, 없으면 304를 돌려준다. 

 

변화가 없어서 304코드, 그럼 원래있던거 재사용하면 된다

 

regneration 한후에 결과가 바뀌고나선 200코드와 함께 새로운 페이지를 준다

 

 

참고자료

https://www.youtube.com/watch?v=1AytR6POwUA&ab_channel=ImranSayed-CodeytekAcademy