사이트에서 css파일이 갱신이 안된다면 어떻게 해야 할까?
대부분 이러한 문제는 브라우저 캐시 때문에 생기는 문제이다.
오늘은 이 글을 통해 어떤 브라우저, 어떤 기기에서건 항상 캐시를 갱신시키려면 어떠한 방법이 있는지 정리해 보았다.
캐시가 갱신되지 않는 이유?
웹 브라우저는 css, js와 같은 정적인 파일은 브라우저 캐시에 저장해 두고 사용한다.
파일의 변경 내용이 없다면 브라운저는 기존에 저장해 둔 캐시의 내용을 보여주게 된다.
이 때문에 로딩 속도는 빨라지지만 가끔씩 파일이 바뀌어도 반영이 안 되는 일이 발생하기도 한다.
그럼 해결 방법에는 어떠한 것들이 있는지 알아보자.
1. 쿼리스트링으로 버전 붙이기
가장 추천할만한 방식이다.
HTML이나 JSP에서 css나 js파일에 ?v=버전 형태로 쿼리스트링을 추가하면 브라우저는 새 파일로 인식하게 된다.
<link rel="stylesheet" href="/static/css/style.css?v=20250702v1">배포할 때마다 버전을 바꿔주면 되는데 자동화하려면 빌드 시점에 git hash나 timestamp를 붙이는 것도 방법이다.
2. Spring 설정으로 캐시 무효화하기
spring 프로젝트에서는 정적 리소스 경로에 대해 캐시를 설정할 수 있다.
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/css/**")
.addResourceLocations("classpath:/static/css/")
.setCachePeriod(0);
}
}.setCachePeriod를 0으로 설정하면 항상 캐시를 새로 불러오게 된다.
3. CSS 파일명에 버전 넣기
파일명 자체에 버전 또는 날짜를 붙이면 항상 최신 파일을 불러올 수 있다.
<link rel="stylesheet" href="/static/css/style.v20250702.css">
4. 브라우저 캐시 강력 새로고침
크롬 기준으로 Ctrl + F5를 하면 갱신된 내용을 확인할 수 있다.
5. HTTP 응답 헤더 설정
Spring Filter 또는 서버 설정에서 설정을 통해 HTTP 캐시 관련 해더를 추가할 수 있다.
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
위에서 소개한 방법 중 1번 쿼리 스트링을 이용하는 방법이 가장 보편적이고 빠르게 적용이 가능한 방법이다.
이 방법을 썼음에도 불구하고 상황이 해결안 된다면 파일명과 자동화 빌드 도구를 함께 사용해 보는 것도 좋을 것 같다.