1. 캐시정책?
1.1 캐시정책 설정하는 이유
2.구현하기 전에 고민할 것
2.1 Vercel의 기본 캐시정책
2.2 적절한 캐시수명 정하기
3. 정적자산 파일별 캐시 헤더 설정하기 (vercel.json)
4. 결과물 및 마무리
1. 캐시정책?
유저가 같은 사이트를 자주 재방문한다고 치자. 매 요청마다 리소스를 서버로부터 다운받는다면 매번 통신비가 발생하고, 데이터를 전송 받는 시간이 소요될 것이다.
만약 사이트 UI가 자주 변경될 일이 없거나, 실시간 데이터를 제공하는 서비스가 아니라면, html, js, css, 이미지, 비디오 등의 정적 파일에 캐시 정책을 설정해 불필요한 네트워크 요청을 줄이고 좀 더 빠르게 유저에게 서비스를 보여줄 수 있게 된다.
1.1 캐시정책 설정하는 이유
본 프로젝트는 Vercel에 배포 중인데, Vercel은 무료플랜이어도 CDN 서비스를 이용할 수 있게 해준다. 현재는 기본캐시헤더가 적용돼 있는 상황인데, 본 프로젝트의 정적자산에 맞게 커스텀한 캐시정책을 설정해준다면 CDN 서비스를 더 잘 활용하게 되어 궁극적으로 유저에게 더 빠르게 서비스를 제공할 수 있을 것이다.
2.구현하기 전에 고민할 것
2.1 Vercel의 기본 캐시정책
현재 버셀이 내 프로젝트 정적자산을 브라우저에 응답할때 캐시헤더는 다음과 같다.
- html파일, manifest.json, 웹폰트, 이미지, 파비콘
public, max-age=0, must-revalidate- vercel 공식문서: Edge Network와 브라우저 모두에 캐시하지 않도록 지시하는 것입니다.
- public: 공유 캐시(또는 중개 서버)에 저장해도 된다는 뜻
- private : 브라우저같은 특정 사용자 환경에만 저장하라는 뜻
- max-age=0 :캐시 유효기간이 0초, 응답받자마자 만료된 것으로 여겨진다
- must-revalidate
- 해석: 브라우저야 이 파일은 응답받자마자 캐시만료되는 애니까 매번 본서버에 요청해야돼!
- js
s-maxage=31536000, immutable
- s-maxage: 공유캐시에만 적용되는 수명, 개인캐시에서는 무시된다.
- immutable: Cache-Control 익스텐션 중 하나
- 'immutable' 지시어는 리소스가 변경되지 않을 것임을 CDN과 브라우저에 알린다. 이는
s-maxage에 1년 동안기간 동안 파일이 동일하게 유지될 것으로 예상된다는 의미이다.
- 이 캐시 헤더 구성을 사용하면 CDN과 브라우저는 JS 파일을 1년 동안 캐시하고 해당 기간 동안 변경되지 않는다고 가정한다.
- 해석: 브라우저야. 캐시 유효기간 1년이고, 브라우저에 저장된 응답캐시가 1년이 아직 안됐으면, 조건부 검증 네트워크 요청할 필요 없이 바로 브라우저 캐시 (fresh cache임) 가져다 써라. 배포 등 코드가 업데이트되는 경우에는 캐시무효화를 통해 CDN과 클라이언트에 변경사항이 바로 반영되는듯 하다.
2.2 적절한 캐시수명 정하기
적절한 캐시설정은 성능최적화와 최신정보를 응답하는 것 사이의 균형을 찾는 것에서 비롯된다.