Young Blog

캐시에 대해 알아보자

April 24, 2022

캐시란?

데이터나 값을 미리 복사해 놓은 임시 장소나 그런 동작을 의미합니다.

브라우저 캐시의 종류에는 메모리 캐시, 디스크 캐시가 있는데 메모리 캐시는 RAM에 저장되며 브라우저 종료 시 사라지지만 리소스를 빠르게 읽어올 수 있습니다 . 디스크 캐시는 디스크에 파일 형태로 되며 영구적입니다. 이런 캐시의 종류는 브라우저 내부의 알고리즘으로 사용 빈도나 사이즈 등에 의해 결정됩니다.

브라우저 캐시

크롬 접속 시 네트워크 요청을 확인하면 메모리/디스크 캐시를 사용하는 리소스를 확인할 수 있다.

캐시 설정을 위한 헤더, Cache-contorl

Cache-contorl은 HTTP 헤더로 캐시의 동작 지정을 지정합니다.

  • no-cache: 캐시 사용 전 서버에 사용 가능한 지 검사 후 필요
    • = max-age: 0
  • no-store: 캐시 사용 X
  • public: 모든 환경에서 캐시 가능
  • private: 브라우저 환경에서만 캐시 가능 (외부 서버 X)
    • 로그인 후 유저 정보가 포함된 페이지와 같은 경우, 다른 유저에게 공유되는 캐시에 포함되어선 안되므로 특정 유저만을 대상으로 하는 캐시임을 명시
  • max-age: 캐시의 유효시간 설정

캐시 유효 시간(max-age)이 지난 경우?

지정된 max-age가 지나도 저장된 캐시를 바로 지우지는 않습니다. 서버에서 기존 데이터를 변경하지 않은 경우에 304 Not Modified로 응답하며 클라이언트에서는 기존 캐시를 사용하도록 합니다. 이때 서버는 바디 없이 응답하므로 네트워크 요청의 부하를 줄일 수 있습니다.

Not Modified

바디 없이 보내기 때문에 원래 요청보다 사이즈가 훨씬 작다

그렇다면 서버는 우리가 가지고 있는 캐시가 서버의 최신 데이터와 같은지 알 수 있을까요?

  1. ETag

    일종의 리소스에 대한 해시로, 서버는 리소스에 임의의 고유한 버전 이름을 붙여 ETag 헤더에 포함하여 응답합니다. 클라이언트는 캐시의 ETag 를 기억했다가 요청 시 If-None-Match 헤더로 서버에 전달하고 서버는 리소스의 ETag와 비교하여 변경되지 않았다면 기존 캐시를 사용하도록 합니다.

    ETag

  2. Last-Modified

서버는 리소스가 마지막으로 수정된 날짜를 의미하는 Last-Modified 헤더를 포함하여 응답하고 클라이언트에서 캐시의 Last-Modified 를 기억하고 있다가 요청 시 If-Modified-Since 헤더에 포함하여 서버에 전달합니다. 서버는 리소스가 해당 날짜와 시각 이후로 수정됐는지 확인하고 수정되지 않았다면 기존 캐시를 사용하도록 합니다.

  • 단점
    • 1초 미만 단위의 캐시 조정 불가능
    • 서버에서 날짜 기반이 아닌 별도의 캐시 로직을 관리하고 싶은 경우

리소스에 따른 캐시 설정

max-age가 크게 설정되어 있으면 서버에서 리소스가 바뀌어도 클라이언트 상에서는 최신 리소스의 상태를 반영하지 못하는 문제가 있습니다. HTML과 같이 최신 상태를 반영해야 하는 리소스는 no-cache 로 설정하는 것이 좋습니다. 마찬가지로 js, css 파일도 no-cache 로 설정해야할 것 같지만 웹팩을 사용하는 경우 파일 이름에 해시가 포함되어 있기 때문에 파일 내용이 수정됐을 때 새로운 js, css 파일이 생성되게 됩니다. HTML이 최신 컨텐츠를 반영한다면 기존의 js 파일이 업데이트 됐을 때 새로운 js 파일을 요청할 것이기 때문에 js, css 리소스의 max-age 는 크게 설정해도 무관합니다.

참고

Written by@YimJiYoung
존중하며 버티자