브라우저 캐싱
운영서버에 배포를 진행하였다.
로컬 환경에서는 잘 적용이 되었는데 배포 후에 이전 버전을 보여주는 일이 있었다.
이유: 동일한 url 요청을 한다면 웹 브라우저는 js, css(기타 정적 파일들)을 스스로 캐싱하여 브라우저 최적화한다.
해결방법은 간단하다.
개발한 페이지가 Admin이었고 사용자가 많지 않았기 때문에
"브라우저 캐시 한번씩 삭제해주세요" 라는 공지와 함께 배포하면 그만이었다.
그런데? 그게아니라 실제 사용자들이 다수 사용하는 서비스라면 배포할 때마다 그런 공지를 띄울 수는 없다.
다른 해결책
- 배포 시 JS, CSS 파일에 버전 쿼리스트링 추가
- 이렇게 하면 브라우저가 새로운 리소스로 인식해서 캐싱 문제를 방지할 수 있다.
REACT_APP_SERVICE_VERSION=1.8.7
// 환경변수<script type="text/javascript" src={`${process.env.PUBLIC_URL}/index.css?v=${process.env.REACT_APP_SERVICE_VERSION}`}></script>- HTTP 캐싱 헤더 설정
- 웹 서버(Nginx, Apache등)에서 Cache-Control 헤더 조정을 하면 브라우저가 항상 최신 파일을 가져오도록 강제한다.
- Bundler(Webpack)을 사용하는 환경에서 Cache Busting
- 해당 방식은 파일 이름에 hash를 붙여주고 파일이 변경 될 때마다 이름 뒤에 hash 값이 변경되어 브라우저가 새로운 리소스를 받아오도록 한다. 아래의 구문을 webpack.config.js 파일내에 작성해주면 된다.
output: {
path: path.join(__dirname, '/src/'),
filename: '[name].[chunkhash:8].js',
},- Meta 태그 내에 캐시 속성을 지정한 해결 방안
<head>
<!-- Expires 속성 사용: 지정한 날짜까지만 캐시 유효 -->
<meta http-equiv="Expires" content="Sun, 07 Aug 2022 18:51:54 GMT">
<!-- Expires 속성 사용: 즉시 캐시 만료 -->
<meta http-equiv="Expires" content="0">
<!-- Cache-control 속성 사용: 캐시를 하지 않음 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
</head>
FE