NextJS SST静态页面缓存异常：为何始终显示CloudFront缓存未命中？

核心结论 #

SST完全支持静态站点生成（SSG），你的页面未被正确托管为静态资源的原因是NextjsSite构造的默认配置会将所有请求路由到SSR Lambda，即便页面是编译时生成的静态文件。

问题原因 #

SST的NextjsSite默认采用Next.js Serverless部署模式，该模式下CloudFront的缓存行为被设置为将所有请求转发给Lambda函数处理，而非直接从S3读取已生成的静态HTML文件。因此即使你的页面是纯静态的，每次请求仍会触发SSR Lambda，导致CloudFront始终返回Miss from CloudFront。

解决方案 #

修改栈代码，开启staticSite配置，让CloudFront直接从S3读取静态资源并缓存：

import { SSTConfig } from "sst";
import { NextjsSite } from "sst/constructs";

export default {
  config(_input) {
    return {
      name: "test-next",
      region: "sa-east-1",
    };
  },
  stacks(app) {
    app.stack(function Site({ stack }) {
      const site = new NextjsSite(stack, "site", {
        staticSite: {
          // 配置静态资源的CloudFront缓存策略
          cachePolicy: {
            defaultTTL: 86400, // 默认缓存1天
            maxTTL: 31536000, // 最大缓存1年
            minTTL: 0,
          },
        },
      });

      stack.addOutputs({
        SiteUrl: site.url,
      });
    });
  },
} satisfies SSTConfig;

效果验证 #

部署修改后的栈后：

• 首次访问页面时CloudFront返回Miss from CloudFront（需要先拉取资源缓存）
• 后续访问会返回Hit from CloudFront，且SSR Lambda日志组不再有调用记录

补充说明 #

SST支持SSG、ISR（增量静态再生）和SSR多种渲染模式，只需根据页面类型调整NextjsSite的对应配置即可。

内容的提问来源于stack exchange，提问作者Vitor Figueredo Marques