Front/Javascript

[스프링, 자바스크립트] Thymeleaf를 활용한 브라우저 캐싱 처리 방지 기법

JongHyun99 2022. 9. 26. 15:46
728x90

프론트를 수정하여 배포하였을 경우 기존의 캐싱된 문서가 호출되어 수정사항이 반영되지 않는 경우가 있다.

웹브라우저의 캐시를 지우고 시도하면 해결되지만 고객들에게 매번 캐시를 지워달라고 할 수 없기에 개발자가 브라우저의 캐싱되는 것을 방지해야할 경우가 생긴다.

 

 

기존 js 호출 방식

<script src="test.js"></script>

위와 같은 js를 호출한다고 할 때

 

 

캐싱 방지처리

<script src="test.js?ver=20220926"></script>

아래와 같이 파일명 뒤에 쿼리스트링을 붙여주면 캐싱된 js를 호출하지 않고 서버에서 새로 받게된다.

하지만 실제 프로젝트에서는 이렇게 일일이 쿼리스트링을 작성하면 관리에 여러모로 많은 문제점이 있어 한번에 적용하고자 했다.

 

 

타임리프를 이용한 캐싱방지처리

타임리프를 이용하면 스프링의 설정파일인 application.properties 파일에 정의된 key값을 가져와 사용할 수 있다.

 

 

우선 application.properties에 공통으로 사용할 변수를 선언해주자.

application.properties

version.date=20220926

 

 

js호출 시

<script th:src="@{/js/test.js?ver=}+${@environment.getProperty('version.date')}></script>

 

script 호출 시 thymeleaf 예약어를 명시해주고 위와 같은 문법으로 캐싱방지를 할 수 있다.

 

 

css호출 시

<link rel="stylesheet" type="text/css" th:href="@{/css/common.css?ver=}+${environment.getProperty('version.date')}"/>

 

 

html 호출 시 (jquery load 사용 시)

var version = [[${@environment.getProperty('version.date')}]];

$("#test").load("/html/test.html?ver="+version,null);

 

기본적으로 html은 no-cache 기능을 사용해 별도의 캐싱방지 처리를 할 필요는 없지만

jquery의 load기능으로 html을 호출할 땐 자동으로 캐싱처리가 된다고 한다.

이는 위와 같이 처리해주자.

 

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

혹은 스크립트 최상단부에 이와 같이 선언해주어도 캐싱 방지는 된다.

하지만 위와 같이 사용 하면 서비스를 호출할 때 마다 수정이 없는 문서도 캐시를 수집하지 않게되어 성능의 저하가 올 수 있다. (같은 맥락으로 test.js?ver=random() 와 같은 난수 처리를 이용한 방법도 성능 저하가 올 수 있다.)

 

내가 원하는 것은 문서의 수정이 있을 때만 서버에서 새로 문서를 받게하기 위한 것이므로

이렇게 공통 변수를 활용하여 캐싱처리를 하는 것이 좋을 듯 하다.

 

참고로 jsp나 다른 서버사이드 렌더링 언어도 properties의 값을 읽어오는 기능이 있을 듯 하니 잘 찾아서 활용해보자.

저작자표시