X‑Inertia 캐시 함정: Cloudflare, Vary, 엣지 캐시 HTML

Source: Dev.to

Laravel + Inertia 사이트 중 하나에서 로고를 클릭했더니, 프로덕션 환경에서 200 응답을 받았음에도 불구하고 홈페이지가 Inertia의 오류 모달 안에 렌더링되었습니다.

원인: Inertia는 같은 URL에서 HTML과 JSON을 모두 제공하고, 내 애플리케이션은 s‑maxage를 사용해 페이지들을 Cloudflare 엣지 캐시에 저장하도록 설정했으며, Cloudflare는 캐시 히트를 판단할 때 Vary: X‑Inertia 헤더를 무시합니다. 그 결과 엣지는 JSON 페이지 객체를 기대하는 XHR에 캐시된 HTML을 그대로 전달했습니다.

글에서는 실시간 curl 증거(cf-cache-status: HIT가 X‑Inertia: true 요청에 대해 반환된 경우)를 살펴보고, JSON 응답에 이미 적용해 둔 no‑store가 왜 이를 방지하지 못했는지(저장 시점 방어 vs 조회 시점 방어), 한 줄로 해결할 수 있는 방법, 그리고 자체 도메인을 관리한다면 엣지에 캐시된 HTML을 유지할 수 있게 해주는 Cloudflare 캐시 규칙을 설명합니다. 또한 자신의 Inertia 앱이 영향을 받는지 확인할 수 있는 30초짜리 curl 테스트도 포함되어 있습니다.

원문은 andreasbergstrom.dev에 처음 게시되었습니다 — 전체 글은 해당 사이트에서 확인하세요.