Cache-Control

Cache-Control의 주요 옵션

Cache-Control 헤더는 브라우저 및 중간 캐싱 시스템(CDN, 프록시 등)에서 파일 캐싱 동작을 제어

주요 디렉티브

1. no-cache
   • 브라우저와 캐싱 시스템은 리소스를 캐싱할 수 있지만, 매번 서버에 요청하여 유효성을 확인해야 합니다.
   • 유효하면 기존 캐시를 사용하며, 변경된 경우 새 데이터를 가져옵니다.
   • 유효성 확인은 보통 ETag나 Last-Modified를 사용.
2. no-store
   • 리소스를 캐싱하지 않음. 브라우저나 캐시 서버는 리소스를 저장하거나 재사용하지 않습니다.
   • 매번 새 데이터를 서버에서 가져옵니다.
   • 캐시를 절대로 해서는 안 되는 리소스일 때 사용
3. max-age=<seconds>
   • 리소스를 특정 시간 동안 캐싱하도록 설정합니다.
   • 예: max-age=3600은 1시간 동안 캐싱.
   • 이 시간이 지나면 리소스의 유효성을 확인하거나 새 데이터를 가져옵니다.
4. s-maxage
   • 중간 서버에서만 적용되는 max-age 값을 설정하기 위해 s-maxage 값을 사용할 수 있습니다.
   • 예를 들어, Cache-Control 값을 s-maxage=31536000, max-age=0 과 같이 설정하면 CDN에서는 1년동안 캐시되지만 브라우저에서는 매번 재검증 요청을 보내도록 설정할 수 있습니다.
5. public과 private
   • public은 모든 사람과 중간 서버가 캐시를 저장할 수 있음을 나타내고, private은 가장 끝의 사용자 브라우저만 캐시를 저장할 수 있음을 나타냅니다.

---

no-cache의 작동 방식

• 캐시된 리소스 존재
  1. 브라우저는 캐싱된 리소스(HTML, CSS, JS 등)를 확인.
  2. 그러나 no-cache 설정으로 인해 서버에 유효성 확인 요청을 전송
     • If-None-Match: ETag를 사용해 파일이 변경되었는지 확인
     • If-Modified-Since: Last-Modified 헤더를 사용해 파일의 변경 여부 확인
  3. 서버 응답:
     • 변경 없음 → 304 Not Modified 응답을 반환
     • 변경 있음 → 새 데이터를 다운로드 (200 OK)
• Cache-Control: no-cache는 ETag와 함께 작동하여 효율적으로 캐싱을 관리
  • ETag: 리소스의 고유 식별자(해시값)를 생성해 유효성을 확인
  • 작동 과정

    1. 브라우저가 캐싱된 리소스의 ETag 값을 서버에 보냄

       If-None-Match: "abc123"

    2. 서버는 리소스의 ETag를 비교

---

index.html 파일 이름도 항상 변경되어야 하나요? → ❌

대신, 브라우저와 CDN이 index.html의 최신 버전을 항상 요청하도록 설정

내부에서 번들된 파일들(CSS, JS 등)의 최신 이름을 참조하기 때문에 만약 index.html이 캐시된 상태로 남아 있다면, 여전히 이전 번들 파일 이름을 요청

해결 방법

• Cache-Control 헤더를 통해 브라우저와 CDN이 항상 최신 index.html을 요청하도록 설정

  Cache-Control: no-cache, must-revalidate

  • no-cache: 브라우저가 항상 서버에 파일의 최신 버전을 요청.
  • must-revalidate: 서버에서 유효성을 확인한 후 응답하도록 강제.

---

Cache-Control: no-cache 설정 시 캐시 기능이 상실되지 않나요? → ❌

Cache-Control: no-cache는 캐싱 자체를 완전히 비활성화하는 것이 아님

• 이 설정은 브라우저와 CDN이 요청할 때마다 서버에 파일의 최신 상태를 확인하도록 요구
• 서버에서 변경 사항이 없다고 판단되면 브라우저는 캐싱된 파일을 그대로 사용

결론

Cache-Control: no-cache는 캐시 기능을 비활성화하는 것이 아니라 캐싱된 파일의 유효성을 항상 서버에 확인하도록 하는 설정