브라우저 캐쉬에 대해

평소에 캐쉬에 대해 아무생각 없이 적절한 곳에 캐쉬하면 좋지 라는 생각만 가지고 있었다.
하지만, 이번에 웹 최적화 관련 인강을 들으면서, 캐쉬에 대한 이야기가 나와 정리할 겸 글을 남긴다.

일단, 브라우저의 경우
1. 메모리 캐쉬
2. 디스크 캐쉬
이렇게 두개로 나누어 캐쉬 처리를 한다. 메모리 캐쉬는 RAM에 저장되고, 이는 휘발성이기 때문에 브라우저를 닫았다 키면 날라가게 된다.
반면, 디스크 캐쉬 같은 경우 file로 관리를 한다.
이 두 캐쉬에 대한 선택은 개발자가 직접적으로 관리하지는 못하고 브라우저 내의 알고리즘에 의해 관리가 된다.

하지만 이 캐쉬에 대해 사용할지 말지 유효기간이 어떻게 되는지 등의 옵션은 cache-control을 통해 관리할 수 있다.
이는 서버 요청 후 response header에 따라오고, 이에 따라 브라우저가 캐쉬 반응을 하게 된다.

설정을 보면
no-cache : 캐쉬를 사용하기 전에 서버에 검사후, 사용 결정
no-store : 캐쉬 사용 안함
public : 모든 환경에서 캐쉬 사용 가능
private : 브라우저 환경에서만캐쉬 사용, 외부 캐쉬 서버에서는 적용 불가
max-age : 캐쉬 유효기간

예 )
cache-control: max-age=60
cache-control: private, max-age=600
cache-control: no-cache

여기서 주의 깊게 봐야할 부분은 no-cache이다. no-cache의 경우 캐쉬를 사용하지 않는 것이 아니라, 서버에서 체크한 후에 캐쉬를 사용할지 말지에 대해 결정하는 것이다.
no-cache == max-age: 0
이런 의미와 비슷하다. cache-control에서 만료가 된다고 해서 브라우저는 바로 해당 데이터를 삭제하지 않는다. 서버에 "캐쉬를 사용해도 돼?" 라고 물어보고 서버에서 내린 결정에 따라 캐쉬 사용 유무가 결정된다.

여기서 또 봐야할 부분은,
max-age를 설정 후 만료가 되었을 때 이다.
일반적으로 생각했을 때, max-age 만료되기 전에는 캐쉬가 되고, 만료가 됐을 경우 캐쉬 처리가 되지 않아 새롭게 데이터를 가져와야한다. 하지만, 약간 다르게 흘러간다. 만료가 된 후에도, 서버에 "해당 소스가 변경 됐어?" 물어보고 "아니 변경 안됐어" 하면 캐쉬된 데이터를 사용하게된다.

조금 더 자세히 보면,
만약 홈페이지에 이미지가 있고, 이 이미지의 캐쉬 만료되었다고 보자.
이 이미지를 다시 요청했을 때, 브라우저는 서버에 "이 이미지가 변경 됐어? " 물어보고 서버에서 "변경되지 않았어!" 라고 대답을 하면 캐쉬로 들고 있던 이미지를 그대로 노출 시켜준다.
이에 따라서 Status code는 304 Not Modified로 응답을 받고, 해당 이미지를 가져오는 size 값이 아닌 단순 서버에 요청에 대한 사이즈, 즉 캐쉬 이미지에 대한 유효값만 확인하는 size이기 때문에 적은 size의 값을 확인할 수 있다.

그럼 여기서 궁금증이 생길 것이다.
어떻게 서버와 브라우저에서 같은 소스인걸 알고 캐쉬 된거 써?
여기서 나오는 것이 ETag이다.해당 리소스에 대한 hash 값이라고 보면된다. 이 hash 값에 대해 서버에서 변경 됐는지 안됐는지를 보고 브라우저에게 알려주는 것이다.

웹 서버는 클라이언트에게 리소스를 제공할 때 ETag 값을 함께 보내어 클라이언트가 이를 저장한다. 클라이언트는 이후 동일한 리소스를 요청할 때 If-None-Match 헤더에 이전에 받았던 ETag 값을 포함하여 요청을 보낸다. 서버는 이 요청을 받아서 저장된 리소스의 ETag 값과 비교하여 변경 여부 확인한다.

만약 서버의 ETag값과 클라이서 넘어온 ETag 값이 일치하면, 서버는 304 Not Modified 응답을 보내어 실제 리소스를 전송하지 않고 클라이언트에게 변경되지 않았다고 캐싱된 리소스를 사용하라고 한다. 이를 통해 네트워크 트래픽을 적약 및 성능 향상할 수 있다.

ETag는 보통 수정 시간이나 파일의 해시값을 이용하여 생성. 이를 통해 리소스 변경 여부를 효과적으로 확인할 수 있다. ETag는 HTTP 캐싱, 조건부 요청, 웹 서버의 부하 분산 등 다양한 웹 개발 시나리오에 사용.