웹 캐시 다루기 - Githubissues

max-age:0 을 설정하였을 떄, 리소스를 요청할 때마다 서버에 재검증 요청을 하는 동작을 기대하지만, 실제로 일부 브라우저의 경우 웹 브라우저를 껐다 켜기 전까지 리소스가 만료되지 않도록 하는 경우가 있다.
Cache-Control no-cache 와 no-store의 차이 점
- no-cache : max-age:0과 같은 의미를 가진다. 브라우저는 해당 리소스를 캐시하되, 사용할 때 마다 재검증 요청을 보내야 한다.
- no-store : 절대로 캐시해서는 안되는 리소스에 사용한다. 이 값이 있다면 브라우저는 해당 리소스를 어떤 경우에도 캐시 저장소에 저장하지 않는다.
한 번 저장된 캐시를 지우기 어려운 이유 캐시는 여러 레이어에 저장될 수 있고, 각 레이어는 독립적이기 때문에 전체 캐시를 지우기 위해서는 레이어 각각에 대해서 캐시를 지워줘야 한다. 예를 든다면, 브라우저와 중간 서버, CDN이 여러개 있는 경우 각각에 대해서 캐시가 따로 저장되는데 이 따로 저장된 캐시를 지우는 작업이 필요하다. (이렇게 중간 서버의 캐시를 지우는 작업을 CDN Invalidatation 이라고 함)
Cache-Control: private, public
- public : 모든 사람과 중간 서버가 캐시를 저장할 수 있음
- private : 가장 끝의 사용자 브라우저에서만 캐시를 저장할 수 있음
s-maxage : 중간 서버에서만 적용되는 max-age 값을 설정함
토스에서 Cache-control 설정하기
- HTML 파일 : HTML 리소스는 새로 배포가 이루어질 때 마다 값이 바뀔 수 있으므로 브라우저는 항상 HTML파일을 불러올 때 새로운 배포가 있는지 확인해야 한다. ⇒ max-age=0, s-maxage=31536000 : 브라우저는 HTML 파일을 가져올 때 마다 서버에 재검증 요청을 보내고, CDN (중간 서버)는 계속하여 HTML 파일에 대한 캐시를 가지고 있되 배포가 이루어질때 마다 CDN에 있는 캐시를 지우는 작업을 함.
- JS, CSS 파일 : 빌드 할 때 마다 새로운 파일이 새로 생기므로, 같은 URL에 대해서는 항상 같은 파일 (내용이 바뀔 수 있는 경우가 없음) ⇒ max-age=31536000 (최댓값) 으로 설정하여 새로 배포가 일어나지 않는 한, 브라우저는 캣에 저장된 JS 파일을 그대로 사용함

🌧️ 즉, 자바스크립트나 CSS 파일이 변경될 수 있는 여지는 “빌드가 새로 일어날 때”를 제외하면 없다는 의미이다. 그리고 이 “빌드가 새로 일어날 때”의 경우, 브라우저의 HTML 파일에 대한 max-age 설정을 통하여 빌드가 새로 일어난 HTML 파일을 항상 감지할 수 있다.

prgrms-web-devcourse / We-are-the-MASTERS-OF-HTTP

웹 캐시 다루기 #42

내용 공유

관련 자료