캐시(Cache)방지를 위한 메타태그(meta Tag)

haru

November 19, 2022

실무에서 디자인이나 기능 수정을 위해서 CSS나 JS를 수정 후 서버에 반영 했을 때,
새로고침 및 강제 새로고침을 실행해도 브라우저가 가지고 있는 캐시로 인해 적용한 수정사항이 제대로 반영되어 보이지 않을 때가 많다.

HTML 메타태그에 아래의 no-cache 코드를 추가해주면 해당 페이지가 캐시를 생성하지 않도록 설정해준다.

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <!-- HTTP 1.1 -->
    <meta http-equiv="Pragma" content="no-cache"> <!-- HTTP 1.0 -->
    <meta http-equiv="expires" content="0"> <!-- 프록시 서버 -->

Cache-Control의 속성에는 3가지의 값이 존재한다.
no-cache는 캐시는 저장하지만, 매번 서버에 재검증을 요청하여 사용하는 속성이며,
no-store는 캐시를 민감한 정보를 포함하거나 절대로 해서는 안되는 리소스인 경우 사용하는 속성이다.
must-revalidate는 캐시 만료 후에 페이지 최초 방문 시에만 기존 리소스 상태를 확인하기 위한 서버에 재검증을 요청하는 속성이다.(만료된 리소스로 접근 시 504 접근실패 오류가 발생함)
위와 같이 3가지 속성을 모두 선언을 하는 이유는 여러 브라우저 에서의 호환성 및 브라우저 뒤로 가기, 여러가지 이슈들을 한 가지 속성 선언 만으로
해결하기가 어려운 경우가 많아 모두 선언한다.

expires 속성 값은 특정 날짜 형식을 입력 시, 입력한 날짜에 캐시가 만료된다.
날짜 포멧은 “요일, 날짜 달 년도 시간(GMT)” 이며 “Mon, 01 Jan 2022 00:00:00 GMT” 의 형태로 입력한다.
위의 코드와 같이 0으로 입력 시, 이 속성 값을 “지금”으로 해석하여, 설정 페이지를 방문할 때마다 강제적으로 캐시를 만료하고 수정사항을 체크한다.
이는 검색엔진의 로봇이 캐시가 만료된 문서를 검색엔진으로부터 삭제할 가능성이 있다.

개발 단계에서는 캐시가 존재하게 되면 수정 사항 반영 확인이 번거로우므로 캐시를 없애는 것이 좋지만,
추후 서버 반영 시에는, 검색엔진과 페이지 속도 최적화를 위해, 일정 캐시를 지정하는 것이 좋다.

Resources

HTML, no-cache, 메타태그, 캐시방지

캐시(Cache)방지를 위한 메타태그(meta Tag)

Leave a Reply Cancel reply