브라우저 캐시 방지 방법(예전 정적리소스가 호출되는 문제 해결)

개발자가 웹사이트에서 사용하는 스크립트 함수를 수정하여 반영했다.
반영 후 일부 사용자는 변경된 함수가 호출된다.

하지만 어떤 사용자는 예전 함수를 호출하는 문제가 발생했다.

이유가 무엇일까?
바로 브라우저 캐시(cache) 때문이다.

 

1. 브라우저 캐시란?
브라우저는 빠른 웹 환경을 제공하기 위해 스타일(.css), 스크립트(.js), 이미지(image)를 캐시(임시저장공간)에 저장한다.
그리고 다시 동일한 사이트에 접속하면 PC에 저장된 캐시에서 리소스를 로드하여, 

불필요한 네트워크 트래픽 요청을 하지 않는 것이다.

 

2. 브라우저 캐시 삭제 효과
자주 들어가는 사이트에 변경이 생겼는데 오류가 발생한다면 브라우저 캐시 문제일 수 있다.
캐시를 삭제하면 필요한 모든 파일을 새롭게 다운로드하므로 문제가 쉽게 해결된다.
아래와 같이 인터넷 옵션에 "웹 페이지를 열 때마다" 리소스를 다시 받도록 하는 것도 좋은 방법이다.

인터넷 옵션 > 일반 > 검색 기록 설정 > 옵션에 "웹 페이지를 열 때마다" 체크

사이트에 변경이 있을때마다 비정상 동작하는 사용자에게 캐시 삭제를 가이드해서 문제를 해결하기엔 소중한 시간이 아깝다.

 

3. 캐시 방지 방법
다시 처음 질문으로 돌아가 개발자 입장에서 브라우저 설정과 관계없이 캐시를 방지하려면 어떻게 하면 될까?

1) 메타태그 추가
메타태그에 아래와 같이 캐시하지 않도록 하는 설정을 하는 방법이 있다.
변경이 별로 없는 사이트에 캐시 금지를 설정하면 불필요한 트래픽을 유발하여 오히려 느려지는 단점이 있다.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

2) 정적리소스 로드 시 버전 명시
다음 방법을 권장한다.
번거롭더라도 정적리소스가 변경되면 버전을 명시해서 브라우저에게 새로운 파일이라고 인식하게 하는 것이다.

 

사용자 브라우저 설정과 상관없이 신규 파일을 캐시에 다시 다운로드하게 된다.
캐시를 방지하는 효과가 생긴다.
또한 이렇게 한 번만 받아두면 다음부터는 캐시를 사용하게 되니 사이트 로딩 속도도 빨라지는 효과도 있다.

<script type="text/javascript" src="./common.js?v=20220902"></script>

<link type="text/css" rel="stylesheet" href="./common.css?version=1.3" />

<img src="./image/common.jpg?ver=4" />

파일명 다음에 쿼리스트링을 추가하는 것으로 파라미터들은 프로그램에 아무 영향을 주지 않는다.

버전 숫자보다는 반영일 확인이 가능한 날짜로 관리하는 방법을 추천한다.