immutable 에셋과 CDN에서 HTTP 캐싱은 어떻게 동작하나요?

Question

IT Interview Practice · Accepted Answer

HTTP 캐싱은 브라우저와 CDN이 응답을 다시 페치하는 대신 재사용하게 하며, **`Cache-Control`** 헤더로 제어됩니다. 웹 앱을 위한 최선의 패턴: **에셋 파일명을 해시하여 영원히 캐시하고, HTML은 캐시 불가로 유지하기.**

## 2단계 전략

```http
# 해시된, 버전이 붙은 에셋 — 주어진 URL에 대해 내용이 절대 바뀌지 않음
Cache-Control: public, max-age=31536000, immutable
# 예:  /static/app.9f2c1a.js   (내용이 바뀌면 해시가 바뀜)

# HTML — 새 에셋 해시를 가리킬 수 있도록 항상 최신이어야 함
Cache-Control: no-cache
```

- **`immutable`**은 브라우저에게 재검증하지 말라고 지시합니다 — 새로고침 시에도 조건부 요청조차 하지 않습니다. 파일명 해시가 *곧* 버전이므로 안전합니다. 새 내용 = 새 URL입니다.
- HTML의 **`no-cache`**는 이름이 오해를 부릅니다. "저장하되 사용 전에 재검증하라"(변경 없으면 304)는 뜻이므로, 사용자는 항상 현재 에셋 해시를 참조하는 HTML을 받습니다.

## 재검증과 CDN

- **`ETag`** / `Last-Modified`는 `max-age`가 만료될 때 저렴한 `304 Not Modified` 응답을 가능하게 합니다.
- **CDN**은 사용자 가까운 엣지 노드에 캐시합니다. 공유 CDN 캐시에는 `s-maxage`를, 백그라운드에서 갱신하는 동안 오래된 콘텐츠를 즉시 제공하려면 `stale-while-revalidate`를 사용하세요:

```http
Cache-Control: public, s-maxage=600, stale-while-revalidate=86400
```

## 함정

- HTML을 긴 `max-age`로 캐싱 → 사용자가 옛 버전에 갇혀 무효화할 방법이 없음.
- 해시되지 않은 URL에 `immutable` → 수정 사항을 배포할 수 없음.

## 왜 중요한가

캐싱은 가장 저렴한 성능 개선입니다 — 재방문을 네트워크 비용 0으로 만들고 오리진 부하를 덜어냅니다. 해시된-immutable-에셋 + 재검증-HTML 패턴은 업계 표준이며, `no-cache`가 "캐시하지 말라"는 뜻이 *아님*을 설명하는 것은 진짜 깊이를 드러냅니다.

2단계 전략

재검증과 CDN

함정

왜 중요한가

관련 질문