웹 캐시

캐시의 기본 원리 및 적용

• 클라이언트에서 동일한 이미지의 요청이 온다면, 데이터를 계속 새로 받아야 하는가? 라는 문제점에서 나온 캐쉬.
• 캐쉬란? 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓은 임시 장소
• 캐쉬가 없을 때
  • 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 함
  • 인터넷 네트워크 매우 느리고 비쌈
  • 브라우저 로딩 속도가 느림
  • 느린 사용자 경험 제공
• 캐쉬가 있을 때
  • 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용
  • 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있음.
• 헤더에 Cashe-Control 속성을 통해 캐시의 유효시간을 지정가능
• 캐시 유효시간이 초과했을 경우
  • 브라우저 캐시에서 캐시 유효시간을 검증한 뒤 유효시간이 지나면 다시 서버에 요청을 하고 다시 데이터를 다운로드 받음.
  • 응답 결과를 브라우저가 렌더링 후 브라우저 캐시는 기존 캐시를 지우고 새 캐시로 데이터를 업데이트함. 이 과정에서 캐시 유효시간이 다시 초기화됨.

캐시 검증 헤더와 조건부 요청

1. Last-Modified와 If-Modified-Since

• 브라우저 캐시의 유효시간이 지났지만 변경이 없기 때문에 서버에 재요청을 안 해도 해당 데이터를 검증하고 다시 사용할 수 있을까?
• Last-Modified 속성을 이용하면 가능
• 이 속성은 데이터가 마지막으로 수정된 시간 정보를 헤더에 포함함.
• 이로 인해 응답결과를 캐시에 저장할 때 데이터 최종 수정일도 저장됨.
• 검증 과정
  • 서버의 해당 자료의 수정일과 비교해서 데이터가 수정되었는지 검증
  • 수정되지 않았다면 바디를 제외한 HTTP 헤더만 응답메시지에 담아서 전송(이 때 상태코드는 304 Not Modified)
  • 브라우저 캐시에서 응답 결과를 재사용, 헤더 메타데이터 또한 갱신
  • 브라우저는 캐시에서 조회한 데이터를 렌더링하고 유효시간이 갱신
• Last-Modified와 If-Modified-Since의 단점
  • 1초 미만 단위로 캐시 조정 불가능
  • 날짜 기반의 로직 사용
  • 데이터를 수정해서 날짜가 다르지만, 같은 데이터를 수정해서 데이터 결과가 똑같은 경우
  • 서버에서 별도의 캐시 로직을 관리하고 싶은 경우
    • 스페이스나 주석처럼 크게 영향이 없는 변경에서 캐시를 유지하고 싶은 경우

2. 검증 헤더와 조건부 요청(ETag, If-None-Match)

• ETag(Entity Tag): 특정 버전의 리소스를 식별하는 식별자.

• 캐시용 데이터에 임의의 고유한 버전 이름을 달아둠.

  • 예: ETag: "v1.1" or ETag: "해쉬주소"

• 데이터가 변경되면 해쉬주소값이 바뀜

• 단순하게 ETag만 보내서 같으면 유지, 다르면 다시 받는 방식

• 작동방식

  • 클라이언트에서 요청하고 서버에서 헤더에 ETag를 작성해 응답.
  • 클라이언트의 캐시에서 해당 ETag를 저장
  • 만약, 캐시시간이 초과되서 다시 요청을 해야하는 경우라면 이때 ETag값을 검증하는 If-None_Match를 요청 헤더에 작성해서 보냄.
  • 서버에서 데이터가 변경되지 않았을 경우 ETag도 동일하기에 If-None-Match의 반환값은 거짓
  • 이 경우 서버에서 상태코드와 메시지로 304, Not Modified를 응답하면 바디없이 전송
  • 브라우저 캐시에선 응답 결과를 재상요하고 헤더 데이터를 갱신.

• Cache-Control

  캐시 지시어

  • Cache-Control: max-age
    캐시 유효시간. 초단위
  • Cache-Control: no-cache
    데이터는 캐시해도 됮만, 항상 오리진 서버에 검증하고 사용
  • Cache-Control: no-store
    데이터에 민감한 정보가 있으므로 저장하면 안됨(메모리에서 사용하고 최대한 빨리 삭제)

  캐시 만료일 지정(하위 호환)

  • Expires: 날짜
  • 캐시만료일을 정확한 날짜로 지정
  • HTTP 1.0부터 사용
  • 지금은 더 유연한 Cache-Control: max-age 권장
  • 위의 속성과 같이 사요하면 무시됨.

• 정리

  • 검증 헤더(ETag와 Last-Modified)
  • 조건부 요청 헤더
    • If-Match, If-None_Match: ETag 값
    • If-Modified-Since, If-Unmodified-Modified: Last-Modified 값

프록시 캐시