Spring에서 브라우저의 정적 자원에 대한 메모리 캐시 최적화 전략

@ControllerAdvice 및 ResourceHandlerRegistry를 활용해 Resolver 버전을 자동 관리

흔히 스프링으로 view까지 제공하는 경우(JSP, ThymeLeaf 등), 참조하는 js를 수정하는 경우 브라우저는 기존 js를 메모리에 캐싱해 둔 상태이기 때문에 클라이언트가 일일히 캐시를 지워줘야 하는 불편함이 있다

 

일반적인 대안으로 import 소스 명시할 때, 날짜나 ?version=123 등으로 관리하는 방법이 제시된다

 

다만, 날짜의 경우, 해당 날짜 또는 시간(버전에 시간까지 명시한 경우)가 경과하면

브라우저는 바로 새로운 버전으로 캐싱하기때문에 네트워크에 요청을 시간이 경과할 때마다 계속 날린다

 

또한 버전의 경우, 수동으로 application.yml 등에서 관리를 해줘야하고, 하나의 js만 수정했더라도 전역변수로 처리하는 경우, 모든 js가 새로 요청되는 번거로움이 있다

 

이 때 사용하는 방법이 @ControllerAdvice와 WebConfig에서 ResourceHandlerRegistry에 대한 설정을 통한 방법이다

 

스프링에서는 정적 자원에 대해 빌드하는 과정에서 해당 파일을 JAR(WAR)에 컴파일하는데, 이 때 해당 정적 자원에 대해 파일 내용을 기반으로 한 해시정보를 생성하고 파일명에 붙여줄 수 있다.

 

이를 통해 사용자는 서버 재 기동시, 정적자원을 변경한 경우에만 해당 파일의 파일명이 변경되므로, 브라우저는 불필요한 요청을 날릴 필요가 없으며 변경된 부분에 대해 바로 새 요청을 날리기 때문에 구 버전에 대한 클라이언트의 불편함 또한 개선이 가능하다

 

0. @ControllerAdvice

- Controller에 대해 전역 url 설정을 하기 위해 필요한 설정 클래스로 여기서 ResourceUrlProvider를 설정한다

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.servlet.resource.ResourceUrlProvider;

@ControllerAdvice
public class ControllerAdviceConfig { // @Controller로 매핑되는 view resolver 에 일괄 설정, 예외 처리 등

    private final ResourceUrlProvider resourceUrlProvider;

    public ControllerAdviceConfig(ResourceUrlProvider resourceUrlProvider) {
        this.resourceUrlProvider = resourceUrlProvider;
    }

    @ModelAttribute("urls") // 정적 자원에 대한 경로 생성 시 필요 로직
    public ResourceUrlProvider resourceUrlResolver(){
        return this.resourceUrlProvider;
    }
}

1. WebConfig

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.VersionResourceResolver;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
        registry
                // 설정하려는 정적 파일의 경로
                .resourceChain(true)
                .addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"));
    }
}

WebConfig에서 캐싱을 원하는 정적 자원의 경로를 설정한 뒤, 다음 설정을 추가해 커스텀 view Resolver를 구현한다

 

2. view(추가사항)

나는 jsp에서 참조하는 js파일의 캐싱 자동화가 필요했기 떄문에 해당 jsp에 다음과 같은 참조 문구를 입력헀다

<script src="${urls.getForLookupPath('/js/example.js')}"></script>

 

3. 정리

이와 같은 설정을 통해 비교적 적은 작업으로 정적 파일 캐싱의 자동화가 가능하고, 클라이언트에서 배포할때마다 무조건 새로고침을 다시할 필요가 없어지는 강점을 얻는다