캐시 stale 질문입니다.

Question

안녕하세요 강의 감사합니다. 잘듣고잇습니다. 헤더에서 처음보는 값이 잇는데 x-nextjs-cache: STALE hit는 알겟습니다. stale이 라고 표기되는 기준이 무엇인가요? 서버의 최신 값이 아닌걸 어떻게 알죠? revalidate 되기 전에는 hit 로 표기되고 revalidate 되는 동안에는 stale 표기가 되는 건가요? 그리고 추측이 맞다면 revalidate 되는 동안이라는건 서버에 다시 요청보내고 응답받을때 까지를 말하는게 맞을까요? (* 여기는 읽으실 필요 없습니다. 질문이랑 같이 메모한거에요 그리고 revalidate 되었는데 값이 안바뀌면 캐시는 stale이라하더라도 e-tag로 2차 검증하고 태그 값이 같아서 그래도 사용한다 (강의 내용 그대로) 값이 바뀌면 hit 되고 e-tag값도 갱신한다. )

박용주 · Answer

안녕하세요. 질문 감사합니다. getStaticProps 강의 5:55부터 설명이 되어있는데 글로 풀어서 최대한 설명드리겠습니다. revalidate: 5초로 설정하면 HTML header에는 'Cache-Control: s-maxage=5, stale-while-revalidate'가 추가됩니다. HTML을 pre-render(generate)한 시점부터 0~5초까지는 캐시된 문서를 응답하며 HIT(fresh, valid) 됩니다. 하지만 generate를 한 시점부터 5초가 지나면 캐시는 stale(not fresh, expired) 상태로 들어갑니다. 그 뒤 어떤 사용자가 페이지에 들어와 HTML을 요청하면, 일단 바로 stale 상태의 HTML을 응답합니다. 하지만 이것은 더이상 valid하지 않기 때문에, 서버는 revalidate 로직을 실행합니다.(즉 getStaticProps 함수를 재실행(보통 API 요청을 하거나, json 파일을 가져오는 등 데이터 관련 작업)) 이 때, revalidate를 하는 시간이 소요됩니다. 강의에서는 setTimeout을 이용해 이 과정에 2초가 걸리도록 설계했습니다. 따라서 'revalidate 되는 동안'이라는 것은 getStaticProps를 실행해 새롭게 pre-render을 하는 약 2초의 시간을 의미합니다.(서버에 요청을 보내고 응답을 받는데 걸리는 시간과는 다름) 시간 순서대로 다시 정리하면, HTML generate 후 0~5초: HIT 5초~사용자 A의 요청 시점: STALE 사용자A의 요청 시점~'+2초'(데이터를 revalidate 하는 시간): STALE, revalidate 수행 '+2초'(revalidate 완료)~다음 5초: HIT 와 같은 사이클을 거칩니다. 더 자세한 이해를 하고 싶으시다면 다음 문서를 읽어보시면 좋을 것 같습니다! ( https://web.dev/stale-while-revalidate/ ) 감사합니다 :)