[WEB - WAS 프로젝트 04 - 1] 브라우저 캐싱

분명히 Nginx를 종료했는데도 브라우저에서는 여전히 페이지가 열리는 것을 확인할 수 있습니다.

 

하지만 다른 브라우저로 시도해보면 페이지가 보이지 않습니다.

좌 : arc / 우 : chrome

또한 새로고침했을 때는 페이지가 보이지 않습니다.

 

이런 현상이 발생하는 이유는 브라우저 캐싱 때문입니다.

---

배경지식 : 캐시 & 캐싱

캐시(Cache) : 자주 사용하는 데이터를 미리 복사해 놓는 임시 저장소.
캐싱(Caching) : 캐시를 사용하는 기술.

 

캐시를 사용하는 이유는 성능 때문입니다.

 

캐시는 사용자와 가깝게 위치해 데이터를 사용자에게 빠르게 전달할 수 있습니다. 즉 캐시에 있는 데이터를 사용할 때마다 원본 데이터를 조회할 때 사용되는 리소스가 절약됩니다. 이러한 구조 덕분에 같은 데이터를 반복적으로 사용하는 경우 절약되는 리소스가 대폭 상승해 높은 성능을 제공합니다.

 

물론 저장공간, 데이터의 적중률(Cache hit), 데이터 정합성...등등 고려해야 하는게 많지만, 단점을 커버할 만큼 장점이 매우 크기 때문에 캐싱는 대부분의 서비스 환경에서는 필수적으로 사용됩니다.

---

브라우저 캐싱

브라우저의 캐싱은 브라우저 캐시 저장소(로컬 디스크/메모리)에 요청으로 사용하며, 사용자가 방문한 웹 사이트의 html, css, javascript, img..등의 정적 파일들을 저장하고 사용하는 기술입니다.

 

브라우저 캐싱은 http 캐싱 정책, Cache-Control 헤더와 매우 밀접한 관련이 있습니다. 이 헤더를 통해 캐싱을 할지 말지 결정할 수 있습니다. ( HTTP 캐싱 정책, 여러 헤더들에 대해 이번 글에서는 자세히 다루지 않겠습니다. )

휴리스틱(Heuristic : 어림 짐작) 캐싱

Cache-Control 헤더가 없던 시절부터 HTTP는 최대한 많은 데이터를 캐싱하도록 디자인됐습니다. 하지만 이때는 캐싱에 대한 정확한 규칙(정책)이 없었습니다.

 

그래서 Cache-Control헤더가 없는 Response의 경우, 캐시에 저장한 시간과 현재 시간의 차이의 10%의 기간이 어림잡아(휴리스틱) 적당할 것으로 보고 캐싱하도록 정했는데 이게 바로 휴리스틱 캐싱입니다.

 

( 참고로 캐싱 정책이 생긴 후 HTTP는 Cache-Control 헤더와 다른 헤더들을 명시하는 것을 권장하고 있습니다. )

---

현상 해석하기

페이지 잔존 현상

공부한 내용을 토대로 보면, 저는 현재 Nginx에서 캐시 관련 설정을 아무것도 하지 않았기 때문에 브라우저 페이지가 보이는 것은 휴리스틱 캐싱으로 인한 결과인 것을 알 수 있습니다.

또한 다른 브라우저를 열었을 때 페이지가 보이지 않는 것으로 보아 브라우저들 간에는 캐시 공유가 없는 것으로 보입니다.

새로고침 시 페이지가 보이지 않는 현상

브라우저는 이미 방문한 페이지, 즉 캐시된 페이지에 대해 '새로고침'과 'URL 입력'을 다르게 처리합니다.

새로고침

대부분의 브라우저는 '새로고침' 동작에서 Cache-Control: max-age=0 또는 Cache-Control: no-cache 같은 요청 헤더를 넣어 캐시를 만료처리하고, 서버에 검증(revalidation) 을 요청합니다.

 

쉽게 말해, “내가 가진 건 오래된 거니까 서버한테 확인할게” 하는 방식입니다.

URL 입력

많은 브라우저에서 'URL 입력'하는 경우 디스크 캐시에 사용 가능한 복사본이 있다면 바로 사용하며 이때 네트워크 재검증을 생략하는 경우가 있습니다.

이유

이런 차이가 생긴 이유는 'URL 입력'는 "페이지를 보려는 일반적인 탐색"으로 사용되며, '새로고침'은 "업데이트 확인"을 위해 사용된다고 보기 때문입니다.

 

새로고침과 URL 입력의 결과를 비교한 이미지를 끝으로 글을 마치겠습니다.

좌 : URL 입력 / 우 : 새로고침

---

 

참고자료

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Caching
• https://datatracker.ietf.org/doc/html/rfc9111#name-calculating-heuristic-fresh
• https://velog.io/@hoonsbory/browser-cache
• https://inpa.tistory.com/entry/HTTP-%F0%9F%8C%90-%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EC%BA%90%EC%8B%9C-%EC%A0%84%EB%9E%B5-Cache-Headers-%EB%8B%A4%EB%A3%A8%EA%B8%B0
• https://readinggeneral.tistory.com/entry/%EC%BA%90%EC%8B%9CCache%EC%99%80-%EC%BA%90%EC%8B%B1Caching-%EC%A0%95%EB%A6%AC-from-10%EB%B6%84-%ED%85%8C%ED%81%AC%ED%86%A1
• https://www.youtube.com/watch?v=iVP99LU_WT0&t=30s
• https://ella951230.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-googlecom-%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4-%EC%9D%BC%EC%9D%B4-%EC%9D%BC%EC%96%B4%EB%82%A0%EA%B9%8C
• https://stackoverflow.com/questions/33361129/what-is-the-different-between-refresh-vs-putting-url-and-pressing-enter
• https://www.instagram.com/reel/DGTkYO8qEHt/
• https://stackoverflow.com/questions/5699907/why-refresh-f5-is-different-then-enter-from-the-address-bar-and-press-enter-ke
• https://issues.chromium.org/issues/40303655