如何解决Lighthouse‘为静态资源配置高效缓存策略’SSR页面问题

以下是几种可行的解决思路：

• 确认缓存头是否被正确传递
  打开浏览器DevTools的Network面板，查看页面请求的Response Headers，确认Cache-Control头是否和你设置的一致。很多时候反向代理（如Nginx、Vercel）或项目中间件会覆盖这个头，需要在部署平台或中间件里同步配置：
  比如Vercel部署时，在vercel.json中添加：

  {
    "headers": [
      {
        "source": "/(.*)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=10, stale-while-revalidate=59"
          }
        ]
      }
    ]
  }
  

• 确保页面内容符合缓存要求
  如果SSR页面包含用户个性化内容（如登录状态、专属数据），public缓存头会导致Lighthouse报错，因为共享缓存不能存储私有内容。此时需要：

  • 若页面是公共内容：检查basePageServerSide是否返回了用户相关数据，移除后再测试。
  • 若页面包含私有内容：将public改为private，同时考虑把私有部分拆分到客户端渲染。

• 改用Incremental Static Regeneration (ISR)
  若页面不需要实时更新，Next.js的ISR比纯SSR缓存更稳定，Lighthouse对其支持更好。配置示例：

  export const getStaticProps = async () => {
    const baseProps = await basePageServerSide(context, ROUTES.HOMEPAGE);
    return {
      props: baseProps,
      revalidate: 10 // 每10秒后台增量更新页面
    }
  }
  

• 排查中间件的影响
  如果项目使用了Next.js Middleware，检查中间件是否修改或覆盖了Cache-Control头。确保中间件保留正确的缓存配置：

  export function middleware(request) {
    const response = NextResponse.next();
    response.headers.set('Cache-Control', 'public, max-age=10, stale-while-revalidate=59');
    return response;
  }
  

• 针对性处理Lighthouse报错细节
  查看Lighthouse报告的具体错误描述，比如如果是静态资源（CSS/JS）缓存问题，需要单独为这些资源设置更长的缓存时间（如max-age=31536000, immutable），和页面缓存策略区分开。

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