java/WEB WAS

크롬 브라우저 캐시 지우는 설정해도 캐시가 지워지지 않을 때 How to prevent browser from loading js from memory cache in chrome browser

짱가라 2022. 10. 28. 15:11
728x90
반응형

css, js, jsp 로직을 바꿔 배포 했는데, 크롬 브라우저에 캐시가 남아 고객으로부터 항의를 받았다.

 

크롬에서 화면이 깨진다고... 에지에서는 깨지지 않는다고 한다.

 

일단 링크에서와 같이 메타태그나 jsp에서 브라우저 캐시가 남지 않도록 로직은 짜여져 있다. 

https://jeaha.dev/114

 

[JSP, HTML] 소스로 사용자 브라우져 캐시 삭제 또는 초기화하기

화면을 수정했는데, 클라이언트의 브라우져에 캐시가 남아서 이전 화면이 나오는 경우가 있다. 직접 브라우져 설정 들어가서 캐시를 지워달라고 요청 할 수도 있지만, 그게 한두번이 아니게 되

jeaha.dev

크롬에서만 캐시가 남는 이유를 찾아보니...

https://web.dev/i18n/ko/service-worker-caching-and-http-caching/

 

서비스 워커 캐싱 및 HTTP 캐싱

서비스 워커 캐시 및 HTTP 캐시 계층 전반에 걸쳐 일관되거나 다른 만료 논리를 사용할 경우의 장단점.

web.dev

크롬의 경우, 서비스워커 캐시 앞에 메모리캐시가 있다고 한다.

staus code : 200 옆에 보면 메모리캐시에서 가져온다고 크롬브라우저가 설명하고 있다.

 

해결방법은 서버의 Cache-Control 헤더의 값으로 max-age=0 으로 설정하면 된다.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

 

서버의 Cache-Control 헤더의 값으로 max-age=<seconds> 값을 지정하면, 이 리소스의 캐시가 유효한 시간은 <seconds> 초가 됩니다.

캐시의 유효 기간이 지나기 전

한 번 받아온 리소스의 유효 기간이 지나기 전이라면, 브라우저는 서버에 요청을 보내지 않고 디스크 또는 메모리에서만 캐시를 읽어와 계속 사용합니다.

 

https://toss.tech/article/smart-web-service-cache

 

웹 서비스 캐시 똑똑하게 다루기

웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다.

toss.tech

https://stackoverflow.com/

스택오버플로우에서도 이 문제로 고민하는 애들이 많던데 정답을 달아주는 친구가 없는데 토스 개발자 분들은 정말 훌륭하신 것 같다.

 

 

Stack Overflow - Where Developers Learn, Share, & Build Careers

Stack Overflow | The World’s Largest Online Community for Developers

stackoverflow.com

그래도 안되면

[펌] spring mvc no-cache 설정 : 네이버 블로그 (naver.com)

728x90
반응형