SPA 업데이트 배포때 고려해야 할 브라우저 캐시 정책

무엇이 문제인가?

예를 들어,

 

버전 1.0.0을 최초로 배포함. 이때 접속한 사용자들은 ‘처음’ 접속하는 거니까, 1.0.0 페이지를 정상적으로 볼 수 있다.

이때 캐시 정책이 없다면, 이미 브라우저는 1.0.0 버전의 웹문서와 리소스들을 캐시한다.

이후 1.1.0을 배포함. 이때 신규 접속자는 ‘처음’ 접속하는거니까 1.1.0을 정상적으로 볼 수 있지만, 기존 사용자는 이제 브라우저의 캐시 판단을 적용 받음

이 순간부터 브라우저가 기존 웹문서는 캐시된 것을 사용하면?

js/css는 청크가 붙어 그때그때 이름이 다르므로 캐시가 되지 않는다. 하지만 uri를 타고 들어온 경우, 서버 설정상 index.html을 로드하게 되어있는데 이게 캐시가 되어 있다면? 이전 js와 css를 불러오거나, 캐시된 것을 사용하게 된다.

결국 1.1.0이 배포되었는데도 이 사용자들은 1.0.0으로 사용하게 된다.

그냥 써도 되는거 아닌가요?

기존 버전에 버그가 있다면?
API 주소가 바뀌었다면?
민감 정보가 노출되었다면?
그리고 index.html이 가리키는 js/css가 더 이상 서버에 없다면, 페이지는 제대로 로딩조차 되지 않을 것이다.

캐시 정책 적용

브라우저에게 캐시하지 말라고 서버에서 브라우저에게 알려주는 것이 제일 중요

cache-control: no-cache,no-store,max-age=0,must-revalidate

적용되었나 확인

적용전. 304 Not Modified 가 내려와 패치된 SPA를 사용하지 않고 캐시된 내용을 사용한다.

cache-control이 적용 된 모습. 페이지를 불러올 때 마다 새로 불러오기 때문에 200 OK로 내려 온다.

참고

• 304 Not Modified - https://developer.mozilla.org/ko/docs/Web/HTTP/Status/304
• 웹 서비스 캐시 똑똑하게 다루기 - https://toss.tech/article/smart-web-service-cache