전송 캐시

CDN 캐시 헤더 플래너

리소스 유형을 고르면 Cache-Control 제안이 나옵니다. 해시 파일은 장기 immutable, HTML과 비공개 API는 재검증하거나 공유 캐시를 막습니다.

준비됨100/100

규칙6

immutable2

no-store1

문제0

리소스 유형

파일 이름에 해시가 있으면 1년 immutable이 가능합니다. HTML과 인증 API는 안 됩니다.

정적 파일 이름HTML 전략

계획은 이 브라우저에만 남고 업로드되지 않습니다.

캐시 검사

HTML, 해시 정적 파일, 비공개 API를 나누세요. 제자리 덮어쓰는 파일에 immutable을 넣지 마세요.

✓

immutable은 해시가 있을 때만통과

app.abc123.js는 1년 캐시해도 됩니다. app.js를 덮어쓰면 CDN이 옛 코드를 계속 줍니다.

✓

HTML을 오래 캐시하지 마세요통과

HTML은 max-age=0, must-revalidate 또는 아주 짧은 s-maxage로 배포 후 바로 새 페이지가 보이게 하세요.

✓

비공개 API는 CDN에 넣지 마세요통과

세션 JSON과 계정 API는 private, no-store가 필요합니다.

–

service worker를 캐시하지 마세요건너뜀

sw.js는 no-cache여야 배포 후 새 worker를 받을 수 있습니다.

✓

HTML과 정적 파일을 나누세요통과

사이트 전체 하나의 max-age는 HTML이 오래되거나 해시 자산 캐시가 너무 짧아집니다.

권장 헤더

Cache-Control을 CDN 또는 원본의 해당 경로에 넣으세요.

유형	일치	Cache-Control
해시 JS/CSS/이미지	`/assets/.[hash].`	`public, max-age=31536000, immutable`
HTML 문서	`/`	`public, max-age=0, must-revalidate`
비공개 API	`/api/*`	`private, no-store`
글꼴	`/fonts/*.[hash].woff2`	`public, max-age=31536000, immutable`
해시 없는 이미지	`/images/*`	`public, max-age=86400, stale-while-revalidate=604800`
Sitemap XML	`/sitemap*.xml`	`public, max-age=3600, stale-while-revalidate=86400`

Nginx

location /assets/*.[hash].* {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location / {
  add_header Cache-Control "public, max-age=0, must-revalidate";
}

location /api/* {
  add_header Cache-Control "private, no-store";
}

location /fonts/*.[hash].woff2 {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location /images/* {
  add_header Cache-Control "public, max-age=86400, stale-while-revalidate=604800";
}

location /sitemap*.xml {
  add_header Cache-Control "public, max-age=3600, stale-while-revalidate=86400";
}

Vercel

{
  "headers": [
    {
      "source": "/assets/:path*\\.[hash]\\.:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "/api/:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "private, no-store"
        }
      ]
    },
    {
      "source": "/fonts/:path*\\.[hash]\\.woff2",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/images/:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=86400, stale-while-revalidate=604800"
        }
      ]
    },
    {
      "source": "/sitemap:path*\\.xml",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=3600, stale-while-revalidate=86400"
        }
      ]
    }
  ]
}

CDN 캐시 헤더 플래너

리소스 유형

권장 헤더

Nginx

Vercel

필요한 항목만 조회

빠른 흐름

사용 팁

추천 다음 단계

브라우저 캐시 정책 검사

HTTP 헤더 확인

에셋 명명 규칙 검사

출시 준비 점수표

이런 도구는 어떠세요?

DNS 조회

DNS 변경 플래너

DMARC 레코드 생성기

Nginx Location Explainer

BMP를 SVG로

단위 변환

Markdown을 HTML로

서명 생성기