Synology Origin Cache Lab

HTTP Cache Policy Playground

HTML, CSS, JavaScript, 이미지, API 응답을 각각 요청하고 캐시 동작을 비교합니다.

캐시 구조

현재 HTML 응답

이 페이지 자체에 오리진이 설정한 캐시 관련 응답 헤더입니다.

public
Cache-Controlpublic, max-age=30
ETag"28a9a80012888b7ff94fa648327b016e7c49821d10799b7853740a0a78b7369d"
Last-ModifiedSun, 26 Jul 2026 10:01:00 GMT
Origin Generated2026-07-27 22:06:25 UTC
Request ID17e72774ea40
Content Versionv1

HTML 정책 선택

버튼을 누르면 HTML 응답의 Cache-Control 값이 변경됩니다.

public public, max-age=30 private private, max-age=30 no-cache no-cache no-store no-store s-maxage public, max-age=10, s-maxage=60 stale public, max-age=10, stale-while-revalidate=60, stale-if-error=300 immutable public, max-age=31536000, immutable

리소스별 캐시 실습

아래 요소들은 각각 별도의 HTTP 요청입니다.

샘플 이미지

이미지

sample-photo.svg?v=1

v=1을 v=2로 바꾸면 새로운 캐시 키가 됩니다.

CSS 파일이 로드되면 이 카드 스타일이 적용됩니다.

CSS

assets/css/app.css?v=1

브라우저의 memory/disk cache를 확인합니다.

JavaScript 실행 대기

JavaScript

assets/js/app.js?v=1

JS 파일 캐시와 실행 결과는 별개입니다.

API 요청 전Request ID 없음

동적 API

api/time.php

버튼을 누를 때마다 별도 fetch 요청을 보냅니다.

추천 실습 순서

  1. F12 → Network → Disable cache 체크 해제
  2. Document, Stylesheet, Script, Img, Fetch/XHR 요청을 구분
  3. Status, Size, Cache-Control, ETag, Age, CF-Cache-Status 확인
  4. 같은 URL 재요청 후 memory cache 또는 disk cache 확인
  5. 이미지 v=1을 v=2로 변경해 새 요청 발생 확인
  6. API 버튼을 여러 번 눌러 Request ID 변경 확인