netlify-caching
控制 Netlify CDN 缓存的指南。在配置缓存头、设置 stale-while-revalidate、实现按需缓存清除,或了解 Netlify CDN 缓存行为时使用。涵盖 `Cache-Control`、`Netlify-CDN-Cache-Control`、缓存标签、持久缓存和框架专属缓存模式。
- License 许可
- Apache-2.0
- 最近更新
- 2026-11-08
- Stars
- ★ 37
- Forks
- 1
01 前言 Front Matter
- name
- netlify-caching
- description
- 控制 Netlify CDN 缓存的指南。在配置缓存头、设置 stale-while-revalidate、实现按需缓存清除,或了解 Netlify CDN 缓存行为时使用。涵盖 `Cache-Control`、`Netlify-CDN-Cache-Control`、缓存标签、持久缓存和框架专属缓存模式。
02 资源文件 4
- 参考文档agents/openai.yaml357 B
- 资产文件assets/netlify-small.svg1.3 KB
- 资产文件assets/netlify.png2.6 KB
- 许可证LICENSE.txt10.7 KB
03 SKILL.md 正文
Caching on Netlify
Default Behavior
Static assets are cached automatically:
- CDN: cached for 1 year, invalidated on every deploy
- Browser: always revalidates (
max-age=0, must-revalidate) - No configuration needed
Dynamic responses (functions, edge functions, proxied) are not cached by default. Add cache headers explicitly.
Cache-Control Headers
Three headers control caching, from most to least specific:
| Header | Who sees it | Use case |
|---|---|---|
Netlify-CDN-Cache-Control |
Netlify CDN only (stripped before browser) | CDN-only caching |
CDN-Cache-Control |
All CDN caches (stripped before browser) | Multi-CDN setups |
Cache-Control |
Browser and all caches | General caching |
Common Patterns
// Cache at CDN for 1 hour, browser always revalidates
return new Response(body, {
headers: {
"Netlify-CDN-Cache-Control": "public, s-maxage=3600, must-revalidate",
"Cache-Control": "public, max-age=0, must-revalidate",
},
});
// Stale-while-revalidate (serve stale for 2 min while refreshing)
return new Response(body, {
headers: {
"Netlify-CDN-Cache-Control": "public, max-age=60, stale-while-revalidate=120",
},
});
// Durable cache (shared across edge nodes, serverless functions only)
return new Response(body, {
headers: {
"Netlify-CDN-Cache-Control": "public, durable, max-age=60, stale-while-revalidate=120",
},
});
Immutable Assets
For fingerprinted files (hash in filename):
# netlify.toml
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
Cache Tags and On-Demand Purge
Tag responses for selective cache invalidation:
return new Response(body, {
headers: {
"Netlify-Cache-ID": "product,listing",
"Netlify-CDN-Cache-Control": "public, s-maxage=86400",
},
});
Purge by tag:
import { purgeCache } from "@netlify/functions";
export default async () => {
await purgeCache({ tags: ["product"] });
return new Response("Purged", { status: 202 });
};
Purge entire site:
await purgeCache();
Responses with Netlify-Cache-ID are excluded from automatic deploy-based invalidation — they must be purged explicitly.
Cache Key Variation
Customize what creates separate cache entries:
return new Response(body, {
headers: {
"Netlify-Vary": "cookie=ab_test|is_logged_in",
// Other options: query=param1|param2, header=X-Custom, country=us|de, language=en|fr
},
});
Framework-Specific Caching
Next.js
ISR uses Netlify's durable cache automatically (runtime 5.5.0+). revalidatePath and revalidateTag trigger cache purge.
Astro / Remix
Full control over cache headers in server routes. Set Netlify-CDN-Cache-Control in responses for CDN caching.
Nuxt
Default Nitro preset handles caching. ISR-style patterns use routeRules with swr or isr options.
Vite SPA
Static assets are cached by default. API responses from Netlify Functions need explicit cache headers.
Debugging
Check the Cache-Status response header:
HIT— served from cacheMISS— generated freshREVALIDATED— stale content was revalidated
Constraints
- Basic auth disables caching for the entire site
- Durable cache is serverless functions only (not edge functions)
- Same URL must return identical
Netlify-Varyheaders across responses - Deploy invalidation is scoped to deploy context (production vs preview)
04 同仓库更多 Skills
android-emulator-qa
Use when validating Android feature flows in an emulator with adb-driven launch, input, UI-tree inspection, screenshots, and logcat capture.
supabase-postgres-best-practices
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
sentry
Use when the user asks to inspect Sentry issues or events, summarize recent production errors, or pull basic Sentry health data via the Sentry API; perform read-only queries with the bundled script and require `SENTRY_AUTH_TOKEN`.
render-workflows
搭建、开发、测试和部署 Render Workflows。涵盖首次脚手架搭建(通过 CLI 或手动方式)、SDK 安装(Python 或 TypeScript)、任务模式(重试、子任务、扇出)、本地开发、控制台部署和故障排查。适用于用户首次搭建 Render Workflows、构建工作流服务、添加或修改工作流任务、本地测试工作流或部署到 Render 的场景。
render-web-services
配置 Render web service——端口绑定、TLS、健康检查、自定义域名、自动部署、PR 预览、持久化磁盘及部署生命周期。当用户需要搭建 web service、修复健康检查失败、添加自定义域名、配置零停机部署,或排查端口绑定问题时使用。
render-static-sites
在 Render 全球 CDN 上部署并配置静态站点——构建命令、发布路径、SPA 路由、重定向、自定义 header 及 PR 预览。当用户需要部署静态站点、搭建 React/Vue/Hugo/Gatsby 前端、配置 SPA 回退路由、添加重定向规则、自定义响应 header,或在静态站点与 web service 之间为前端做选择时使用。触发词:static site、CDN、SPA、single-page app、React deploy、Vue deploy、Hugo、Gatsby、Docusaurus、Jekyll、staticPublishPath。