AGENT SKILL

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

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 cache
  • MISS — generated fresh
  • REVALIDATED — 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-Vary headers across responses
  • Deploy invalidation is scoped to deploy context (production vs preview)

04 同仓库更多 Skills

kael-odin
kael-odin/codex-plugins-zh

android-emulator-qa

Use when validating Android feature flows in an emulator with adb-driven launch, input, UI-tree inspection, screenshots, and logcat capture.

★ 37
kael-odin
kael-odin/codex-plugins-zh

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.

★ 37
kael-odin
kael-odin/codex-plugins-zh

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`.

★ 37
kael-odin
kael-odin/codex-plugins-zh

render-workflows

搭建、开发、测试和部署 Render Workflows。涵盖首次脚手架搭建(通过 CLI 或手动方式)、SDK 安装(Python 或 TypeScript)、任务模式(重试、子任务、扇出)、本地开发、控制台部署和故障排查。适用于用户首次搭建 Render Workflows、构建工作流服务、添加或修改工作流任务、本地测试工作流或部署到 Render 的场景。

★ 37
kael-odin
kael-odin/codex-plugins-zh

render-web-services

配置 Render web service——端口绑定、TLS、健康检查、自定义域名、自动部署、PR 预览、持久化磁盘及部署生命周期。当用户需要搭建 web service、修复健康检查失败、添加自定义域名、配置零停机部署,或排查端口绑定问题时使用。

★ 37
kael-odin
kael-odin/codex-plugins-zh

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。

★ 37