01 · Concept

HTTP 캐시 전략

HTTP 캐시는 네트워크 요청을 줄이고 웹 성능을 극대화하는 핵심 메커니즘입니다. 올바른 캐시 전략은 사용자 경험과 서버 부하 모두에 큰 영향을 미칩니다.

브라우저는 Cache-Control 헤더를 통해 리소스의 캐싱 방식을 결정합니다. max-age로 유효 시간을 설정하고, ETag와 Last-Modified로 리소스 변경 여부를 검증합니다. stale-while-revalidate는 만료된 캐시를 즉시 반환하면서 백그라운드에서 갱신하여 빠른 응답과 데이터 신선도를 모두 확보합니다.

02 · Interactive Demo

캐시 시나리오 시뮬레이션

각 캐시 전략의 요청-응답 흐름을 단계별로 확인하세요. 브라우저, 캐시, 서버 간의 HTTP 헤더 교환을 시각적으로 이해할 수 있습니다.

매 요청마다 서버에서 새로운 응답을 받습니다. Cache-Control: no-store 헤더로 캐싱을 완전히 비활성화합니다.
Browser
Cache
Server
GET /data
브라우저가 서버에 요청을 보냅니다.
캐시 건너뜀
no-store 지시어로 인해 캐시를 저장하지 않습니다.
200 OK
서버가 새로운 응답을 반환합니다.
두 번째 GET /data
다시 요청 시에도 서버로 직접 전달됩니다.
200 OK (매번 새 응답)
항상 서버에서 최신 데이터를 가져옵니다.
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// 정적 에셋 — 장기 캐싱 (해시된 파일명 사용)
Cache-Control: public, max-age=31536000, immutable

// API 응답 — 항상 서버 검증
Cache-Control: no-cache
// no-cache: 캐시 저장은 하되, 사용 전 반드시 서버에 검증
// no-store: 캐시 저장 자체를 하지 않음

// HTML 문서 — 짧은 캐시 + 재검증
Cache-Control: public, max-age=0, must-revalidate

// CDN + stale-while-revalidate
Cache-Control: public, max-age=60, stale-while-revalidate=120
// 60초간 fresh → 120초간 stale 상태에서 백그라운드 갱신
// 사용자는 항상 즉시 응답을 받음

// 프라이빗 캐시 (브라우저만, CDN 금지)
Cache-Control: private, max-age=600
04 · Interview Point

면접 핵심 질문

HTTP 캐시는 크게 강력한 캐시(Strong Cache)와 협상 캐시(Negotiation Cache)로 나뉩니다. 강력한 캐시는 Cache-Control의 max-age 디렉티브로 제어하며, 만료 전에는 서버 요청 없이 캐시된 응답을 사용합니다. 협상 캐시는 ETag/If-None-Match 또는 Last-Modified/If-Modified-Since 헤더 쌍을 사용하여 서버에 리소스 변경 여부를 확인합니다. 변경되지 않았으면 304 Not Modified로 응답하여 대역폭을 절약합니다.
주요 디렉티브: max-age — 캐시 유효 시간(초), no-cache — 캐시 저장하되 사용 전 반드시 서버 검증, no-store — 캐시 저장 자체를 금지, public — CDN 등 공유 캐시에 저장 가능, private — 브라우저 캐시에만 저장, must-revalidate — 만료 후 반드시 서버 검증, immutable — 리소스가 절대 변경되지 않음을 명시, stale-while-revalidate — 만료된 캐시를 반환하면서 백그라운드에서 갱신합니다.
1. 파일명 해싱 — 빌드 시 파일명에 해시를 포함 (예: app.a1b2c3.js). 내용이 바뀌면 해시가 변경되어 새로운 URL이 됩니다. 2. 쿼리 스트링 — URL에 버전 파라미터 추가 (예: style.css?v=2). 간단하지만 일부 CDN에서 캐싱이 비효율적일 수 있습니다. 3. 서비스 워커 — 프로그래밍 방식으로 캐시를 직접 관리. 오프라인 지원과 세밀한 캐시 전략 구현이 가능합니다. 4. CDN Purge — CDN의 캐시를 강제로 삭제하여 새 콘텐츠를 배포합니다.