'Cache-Control' 헤더는 요청과 응답 모두에서 캐싱 지시어를 정의하는 데 사용되며, 캐시의 작동 방식에 영향을 준다. 이 지시어들은 단방향으로, 요청(Request)에서 설정된 지시어가 응답(Response)에 자동으로 적용되지 않음을 의미한다.(반대의 경우도 같음)
캐시 종류에는 여러 종류가 있지만 Cache-Control 헤더만 잘 사용하더라도 웹 앱의 성능과 동작에 중대한 영향을 미칠 수 있으며, 리소스의 재검증 방식이 로드 시간과 대역폭 사용에 영향을 줄 수 있다.
주요 지시어
- max-age=<seconds> : 리소스가 사용가능하다고 간주되는 최대 시간, 즉 캐시할 시간을 초 단위로 지정한다. 요청과 응답 헤더에서 흔히 사용된다.
- no-cache : 캐싱은 허용하지만, 캐시된 데이터의 사용은 모든 경우 서비스되기 전 원본 서버와의 검증을 거쳐야 한다.
- no-store : 요청이나 응답의 어떤 부분도 캐시에 저장하지 않도록 지시한다.
- private : 응답이 단일 사용자를 대상으로 하며, 프록시 서버와 같은 공유 캐시에 의해 저장되어서는 안된다고 표시한다.
- public : 응답이 개인 및 공유 캐시 모두에 의해 캐시될 수 있도록 허용한다.
- must-revalidate : 캐시된 항목이 오래되면 서버에 다시 검증을 요청하고 사용하기 전에 검증을 받아야 한다.
- proxy-revalidate : 'must-revalidate' 와 유사하지만 공유 캐시에만 적용된다.
특별 지시어
- no-transform : 중간자가 응답 데이터를 변경하는 것을 방지한다.
- immutable : 응답 본문이 시간이 지나도 변경되지 않을 것임을 나타낸다.
- stale-while-revalidate=<seconds> : 새로운 서버 응답을 확인하는 동안 캐시가 오래된 컨텐츠를 제공하도록 허용한다.
- stale-if-error=<seconds> : 새 컨텐츠를 재검증할 때 오류가 발생하면 캐시가 오래된 컨텐츠를 제공할 수 있다.
사용 및 호환성
지시어들은 쉼표로 구분하며 하나의 'Cache-Control' 헤더에 결합될 수 있으며, 대소문자를 구분하지 않지만 호환성을 위해 소문자 사용이 권장된다. 알려지지 않은 지시어는 인식하지 못하는 캐시에 의해 무시되므로, 이는 하위 호환성을 보장한다.
요청에서 사용되는 주요 Cache-Control 지시어
보통은 서버에서 Response를 내려줄 때 사용하지만, Cache-Control은 요청과 응답 모두에서 사용할 수 있다. 요청 헤더로 사용할 때, 클라이언트는 서버에게 자신의 캐싱 선호도를 알릴 수 있으며 이는 서버가 컨텐츠를 제공하는 방식에 영향을 미칠 수 있다. 요청시에도 위에서 설명한 것과 같은 지시어를 사용할 수 있다.
- no-cache
- no-store
- max-age=<seconds>
- max-stale=<seconds> : 클라이언트가 만료된 응답을 수락할 의사가 있음을 나타내며, 선택적으로 최대 만료 시간을 지정할 수 있다.
- min-fresh=<seconds> : 클라이언트가 지정된 최소한의 시간 동안 신선하게 유지될 응답을 요청함을 나타낸다.
Cache-Control 과 같은 캐싱 설정은 주로 백엔드 개발자가 담당하게 된다(또는 CDN 같은 인프라 수준에서도 가능하다). 클라이언트 요청 헤더에 Cache-Control 정책을 요구할 수 있다고는 하나 실제로 사용하는 경우는 보지 못한 것 같다. 왜냐하면 보통 서비스에서 사용하는 api들은 미리 약속되어진 것이고, 응답으로 오는 컨텐츠의 성격이 클라이언트에서 캐시로 제어해야 할 만큼 다이내믹하지 않고 고정되어 있기 때문이다. 그렇기에 백엔드에서 설정하는 것이 일반적이긴 하지만, 응답으로 보내줄 컨텐츠의 성격까지 고려해서 세밀한 캐시 설정을 해주는 백엔드 개발자를 보지는 못했다. 오히려 프론트 개발자가 보여줄 컨텐츠의 성격을 더 잘 알고, 비즈니스와 더 밀접하게 연관이 있을 수 있기 때문에, 캐싱 전략을 알고 오히려 캐싱을 적극적으로 요청하고 활용하는 프론트엔드 개발자가 되어야겠다.
'웹 개발' 카테고리의 다른 글
번들러와 기능 (0) | 2024.09.20 |
---|---|
로컬 스토리지 (Local Storage) | Web Storage API (0) | 2024.07.06 |
Design System - 개발자, 디자이너, 기획자의 입장에서 (0) | 2024.05.26 |
SPA vs MPA (1) | 2024.05.20 |
웹 페이지 로드 과정 | Google.com 을 입력하면 일어나는 일 - Overview (0) | 2024.05.13 |