Cache Busting
Cache를 Busting(부수다, 고장내다) 라는 의미에 Cache Busting은 이전에 남아 있는 캐시로 인하여 새로 배포된 브라우져 혹은 이미지 등이 반영되지 않고 이전의 캐시 상태를 바라보고 있는 문제에 대해서 이를 해결하기 위한 동작을 의미합니다.
Categories
일반적인 해결 방법
일반적인 접근 방식은 시간이나 콘텐츠에 따라 스크립트 및 기타 자산 파일 이름에 해시를 추가하는 것입니다. 따라서 이전에 script.js를 사용했다면 지금은 script.[contenthash].js가 됩니다. 콘텐츠 해시는 스크립트 콘텐츠를 변경할 때마다 달라집니다.
이제 사용자가 앱의 index.html을 요청하면 개별 콘텐츠 해시를 포함하는 스크립트를 참조합니다. 사용자가 이전에 script.abc123.js를 로드했고 이제 index.html이 script.cba321.js를 참조하는 경우 브라우저는 이전에 이 파일을 본 적이 없다는 것을 알고 로드합니다. 이렇게 하면 사용자가 현재 버전의 스크립트 및 기타 자산(js, css, 이미지 등)을 갖게 됩니다. 그러나 이것이 작동하려면 사용자가 항상 index.html의 최신 버전을 로드하는 것이 중요합니다.
스크립트 파일에 대한 캐싱 응답 헤더 설정과 같은 다른 접근 방식이 있지만 이 경우 권장할 수 없습니다.
SPA Framework 의 최신파일 유지 방법
React 나 Vue 같은 SPA 프레임워크의 경우 index.html파일이 public으로 분류되어 있어서 파일명이 변경되지 않는다.
또한 해당 폴더에 있는 파일들은 모두 같은 문제를 보유하고 있는데,
그러한 파일들은 Cache-Control 헤더를 추가하면 된다.
Meta 태그 내에 캐시 속성을 지정한 해결 방안
해당 방식은 index.html 파일내에 meta 태그로 이를 추가하여서 캐시의 속성의 만료시간 혹은 캐시를 하지 않도록 처리하는 방안입니다.
<head>
<!-- Expires 속성 사용: 지정한 날짜까지만 캐시 유효 -->
<meta http-equiv="Expires" content="Sun, 07 Aug 2022 18:51:54 GMT">
<!-- Expires 속성 사용: 즉시 캐시 만료 -->
<meta http-equiv="Expires" content="0">
<!-- Cache-control 속성 사용: 캐시를 하지 않음 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
</head>
| WARNING |
| IntelliJ 계열에서 경고가 발생했다. 관련 이슈는 다시 확인해 보자. |