HTTP Cache 동작 원리와 Cache-control 헤더

Cache를 사용하는 이유?

임시 저장을 통해 웹 브라우저와 서버의 과부하를 줄이는 것이 주요 목표

다만 임시 저장이라는 말처럼, 오래된 데이터는 폐기해준다면 어느 정도의 실시간성을 지닌 효과도 있다. (준실시간성)

 

➡️ 따라서 실시간성이 매우 중요한 데이터는 캐시 사용 X

 

HTTP Cache 동작 원리 (다음 글에서 더 정리할 예정)

• 처음 사용자의 요청에 응답해 서버가 리소스를 반환할 때 헤더에 재검증 주기와 기준을 제공
• 이후 브라우저는 헤더의 정보를 바탕으로 캐시를 사용할 지 말지를 결정
• 재검증 주기와 기준 둘 다 만족 ➡️ 그냥 계속 씀
• 어느 하나라도 만족하지 못했을 경우 ➡️ 서버에게 물어 보고 씀

 

서버의 Cache-control 헤더를 통한 세부 설정

1. 캐시 저장 여부 
   1. no-store : 캐시 안함
   2. no-cache : 쓰여진 것과 다르게 오히려 캐시는 하지만 매번 재검증 후 사용
2. 캐시 저장 장소
   1. public : Private(웹 브라우저) + Shared(프록시) 모두에 저장
   2. private : Private(웹 브라우저) 에만 저장
3. 캐시 재검증 주기 
   1. max-age : 브라우저는 이를 유효시간(Expires)으로 변환해서 사용. (기존 Expires는 지금+max-age 값으로 덮어씀) 
   2. s-maxage : 프록시 캐시에만 적용하는 유효 기간.
   3. 참고로, 프록시 서버의 캐시 사용 시, 브라우저는 무조건 프록시의 캐시된 데이터만을 받아온다. 그러나 만약 서버에서 s-maxage 이전에 업데이트를 하거나 변경할 경우, 캐시를 무효화(invalidate)한다. cache-control의 max-age=0 이나 no-cache를 사용하거나 AWS CloudFront와 같은 CDN에서는 Invalidate API를 통해서 API 기반의 명시적 무효화를 사용한다.  
4. 재검증 강제
   1. must-revalidate : 재검증이 완료된 뒤에야 캐시를 사용 / 보통 재검증 실패하면 기본 행동은 그냥 캐시를 사용이 default인데, 헤더에 이 설정이 달려있으면 캐시 사용 안하고 무조건 504를 띄우면서 에러 발생
   2. proxy-revalidate : must-revalidate와 완전히 동등한 속성을 갖는다. 다만 이 헤더는 프록시의 shared cache에 적용되는 내용이다.
5. SWR(Stale-While-Revalidate)
   • 보통 max-age와 조합해서 사용하며, 캐시의 유효성, 즉시성, 최신성, 성능, 사용자 경험을 향상시킨다.

Cache-Control: max-age=3600, stale-while-revalidate=120

 

위의 헤더와 같이 주어졌을 경우, 다음과 같은 순서로 브라우저가 작동된다.

1. (0 ~ 3600 초) : 재검증 기준 내 이므로 캐시된 응답을 즉시 반환
2. (3600 ~ 3720 초) : 기존에 캐시된 응답(0~3600초간 저장해왔던 데이터)을 반환. 그와 동시에 서버에 재검증 요청 후 최신 데이터 요청
3. (3600 ~ 3720 초) : 만약 재검증 요청 후 최신 데이터를 받아왔다면 이때부터는 최신 데이터만을 계속해서 보여주고 아직 못받았다면 기존 캐시된 데이터를 사용한다.
4. (3720초 ~) : 캐시 사용 X, 최신 데이터만을 서버에게서 받아와서 보여줌.

요약하자면 아래의 그림과 같다.

출처 : https://medium.com/@mansha99/nextjs-using-swr-based-data-fetchingwith-client-side-components-e7eb7837eefb

 

https://developer.mozilla.org/ko/docs/Web/HTTP/Conditional_requests

HTTP 조건부 요청 - HTTP | MDN

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Cache-Control - HTTP | MDN