Next.js 全页面缓存实践：如何为 SSR 页面提速而不失新鲜度

SSR 的本质与挑战

Next.js 15+ 的 SSR 新范式

在 App Router 架构下：

• 默认情况下，app/ 目录中的页面会执行服务端渲染
• 可通过 export const dynamic = 'force-dynamic' 强制动态渲染
• 智能启发式缓存机制需要开发者显式控制

性能瓶颈分析

SSR 的实时渲染特性带来两个关键问题：

1. 高延迟：每个请求都需要完整执行数据获取 → 渲染 → 响应链路
2. 资源消耗：突发流量下可能导致数据库/API 过载

graph TD A[用户请求] --> B[数据库查询] B --> C[服务端渲染] C --> D[返回HTML] D --> E[高并发时资源枯竭]

何时需要全页面缓存？

适用场景 ✅

1. 低频更新内容：产品详情页、博客文章（更新周期 >5 分钟）
2. 高流量匿名页面：营销着陆页、定价页面（80%+ 匿名访问）
3. 复杂数据聚合：需要聚合 3+ 数据源的页面
4. 全球化站点：用户分布超过 3 个时区

禁用场景 ❌

1. 实时仪表盘（股票行情、实时监控）
2. 个性化推荐流
3. 需要即时反馈的表单页面

四大缓存策略详解

策略一：CDN 级缓存（Cache-Control）

// app/product/[slug]/page.tsx
export default async function Page() {
  const headersList = headers();
  headersList.set(
    'Cache-Control',
    'public, s-maxage=60, stale-while-revalidate=120'
  );
  
  return <ProductPage />;
}

优势：

• Vercel 等平台开箱即用
• 零额外基础设施
• 支持后台刷新（stale-while-revalidate）

监控指标：

curl -I https://example.com/product/shoes
# 查看 x-vercel-cache: HIT/MISS

策略二：Redis 手动缓存

// lib/cache.ts
import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL);

export async function getCachedPage(key: string) {
  return await redis.get(`page:${key}`);
}

export async function setCachedPage(key: string, html: string, ttl = 60) {
  await redis.setex(`page:${key}`, ttl, html);
}

适用场景：

• 需要精确控制缓存失效
• 多实例服务器架构
• 自定义缓存逻辑（如根据业务事件清除）

策略三：边缘中间件分流

// middleware.ts
export function middleware(request: NextRequest) {
  const country = request.geo.country?.toLowerCase() || 'us';
  const url = request.nextUrl.clone();
  url.pathname = `/${country}${url.pathname}`;
  
  return NextResponse.rewrite(url);
}

实现效果：

• 按国家/地区分流请求
• 各版本独立缓存
• 支持 A/B 测试分流

策略四：ISR 增量再生

// app/blog/[slug]/page.tsx
export const revalidate = 60; // 60秒再生周期

export default async function Page() {
  const post = await fetchPost();
  return <BlogPost post={post} />;
}

技术亮点：

• 首屏静态加载
• 后台增量更新
• 全局 CDN 分发

缓存调试指南

诊断三板斧

1. 响应头分析：

curl -I https://example.com | grep -iE 'cache-control|x-vercel-cache'
# Cache-Control: public, max-age=60
# x-vercel-cache: HIT

2. 地域化测试：

# 使用不同区域 VPN 测试
curl --proxy socks5://jp-server:1080 https://example.com

3. Cookie 影响检测：

// 在中间件中清除非必要 Cookie
export function middleware(req) {
  const res = NextResponse.next();
  res.cookies.delete('tracking_id');
  return res;
}

性能监控指标

指标	健康阈值	报警机制
缓存命中率	>85%	连续30分钟<70%触发
TTFB（首字节时间）	<800ms	5分钟内p90>1200ms
再生失败率	<0.5%	超过1%触发自动回滚

最佳实践清单

1. 缓存分层策略：

graph LR A[CDN边缘缓存] --> B[Redis集群缓存] B --> C[服务端内存缓存] C --> D[数据库查询缓存]

2. 缓存键设计原则：

• 包含区域/语言版本（如page:us:home）
• 包含内容哈希（如page:abc123）
• 排除非必要参数（如UTM标签）

3. 失效策略：

• 定时刷新（TTL）
• 事件驱动（内容更新时主动清除）
• 版本化缓存键（如v2/page/home）

缓存是一种超能力 --- --- 但只有当你刻意使用它时才有效。

通过正确的标题、智能中间件和可靠的重新验证策略，让 SSR 页面可以像静态页面一样顺利扩展。

结语

通过合理运用 Cache-Control、边缘中间件和 ISR 的组合拳，我们成功实现了：

• 毫秒级响应：CDN 边缘节点直出 HTML
• 零感知刷新：后台静默再生内容
• 全球化覆盖：自动就近分发

48拉西，极致的加载速度~

Fire in the hole~！