SvelteKit动态内容部署Cloudflare Pages缓存问题排查

核心问题是Cloudflare Pages默认缓存了SvelteKit服务器端加载生成的__data.json文件，而你手动上传构建产物的方式属于静态输出部署，Cloudflare会将这些文件当作静态资源缓存，不会每次请求都重新执行服务器端逻辑，导致后端数据更新后页面无法同步。

1. 调整部署方式：使用Cloudflare Pages官方SvelteKit集成（推荐） #

不要手动上传/.svelte-kit/cloudflare文件夹，改用官方集成部署流程：

• 在Cloudflare Pages控制台创建新项目，关联你的代码仓库（GitHub/GitLab等）
• 构建配置会自动识别SvelteKit，默认构建命令为npm run build
• 部署类型选择Serverless/Edge Functions，此时Cloudflare会运行SvelteKit的服务器端逻辑，而非仅托管静态文件
• 部署完成后，每次请求都会触发+page.server.ts中的加载逻辑，实时拉取最新API数据
• API令牌可直接在Cloudflare控制台的「环境变量」中配置，无需本地打包时嵌入

2. 配置Cloudflare缓存规则（适配静态部署场景） #

如果暂时不想调整部署方式，可通过控制台设置缓存规则强制__data.json不缓存：

• 进入Cloudflare Pages项目的「缓存」→「缓存规则」页面
• 创建新规则：
  • 匹配条件：URI Path 包含 __data.json
  • 缓存行为：选择「绕过缓存」，或把「缓存级别」设为「无缓存」
  • 保存规则后，后续请求会直接获取最新的API响应

3. 在SvelteKit中添加缓存控制响应头（辅助优化） #

在+page.server.ts的加载函数中手动设置响应头，明确告知Cloudflare不要缓存数据：

export async function load({ fetch }) {
  const response = await fetch('外部API地址', {
    headers: {
      Authorization: `Bearer ${process.env.API_TOKEN}`
    }
  });
  const data = await response.json();

  return {
    data,
    headers: {
      'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
      'Expires': '0',
      'Surrogate-Control': 'no-store'
    }
  };
}

该配置会让Cloudflare优先遵循响应头的缓存指令，避免默认缓存旧数据。

• 静态部署模式下，SvelteKit的服务器端逻辑在构建阶段就执行完毕，生成固定的__data.json；而Serverless/Edge部署模式会在每次请求时动态执行加载逻辑，确保内容实时性。
• 官方集成部署是SvelteKit + Cloudflare Pages的最优实践，能完美支持动态特性，同时简化环境变量管理。

内容的提问来源于stack exchange，提问作者moonvader