背景

最近，我们计划为在线商城添加实时推荐商品榜单的功能，作为提升用户体验和转化率的核心功能。功能上线后，用户反馈良好。

运行一段时间之后，客户团队反馈，有用户反映，推荐商品列表很长时间没有变化。

通过追踪和发现下单数据，我们发现用户在推荐页面下单转换开始下降。

我初步判断可能会遇到数据断层问题：用户浏览商品后，推荐列表无法根据用户最新兴趣动态调整。这不仅影响用户体验，还可能导致商业机会的流失。

本文将围绕这一实际问题展开，从现象描述、排查过程到修复方案，逐步剖析问题根源，并提供详细的解决方案以及相关的技术思考，希望能为同样遇到类似问题的开发者提供有价值的参考。

一、问题现象：推荐系统的断层迷雾

1.1 场景复现

我们的在线商使用 Next.js 的 getStaticProps 预渲染商品推荐页面。推荐逻辑基于用户的历史浏览记录和实时兴趣生成。以下是问题的具体表现：

• 用户行为：

• 用户 A 访问商城，浏览了“运动鞋”和“T恤”。
• 推荐系统根据用户 A 的行为，生成推荐列表（如“运动裤”“跑步袜”）。

• 问题现象：

• 用户 A 随后浏览了“智能手表”，但推荐列表仍显示旧的“运动裤”“跑步袜”，未更新为“智能配件”相关商品。
• 用户刷新页面后，推荐列表仍未变化，直到静态页面重新构建（可能几小时后）。

1.2 调试日志

通过增加调试日志，发现了更精确的问题轨迹：

[2025-08-26T10:00:00] SSG构建完成，用户A推荐列表：[产品X, 产品Y, 产品Z]
[2025-08-26T10:15:23] 用户A浏览产品M（记录到数据库）
[2025-08-26T10:15:30] 用户刷新页面，推荐列表仍为：[产品X, 产品Y, 产品Z] 
[2025-08-26T11:00:05] ISR触发重新生成，新推荐列表：[产品M, 产品X, 产品N]

日志清晰表明：在两次ISR再生间隔期间（1小时），用户行为无法实时反映到推荐结果中。

1.3 影响分析

• 用户体验：推荐内容与用户兴趣脱节，降低用户粘性。
• 商业价值：无法实时捕捉用户兴趣，错失交叉销售机会。

1.4 初步假设

问题可能源于：

• getStaticProps 的静态生成特性，导致数据无法实时更新。
• 客户端未动态补丁推荐数据。
• 推荐系统的 API 未与前端实时同步。

二、排查过程：推开数据断层的谜云

面对“静态页面展示旧数据”的现象，我们需要逐一排查可能的环节。以下是真实排查过程的思考路径与验证步骤。

2.1 排查方向一：客户端数据获取是否异常？

假设：推荐列表是通过客户端 fetch 或 axios 动态获取的，但请求失败或被缓存。

验证步骤：

• 打开浏览器 DevTools → Network 面板，过滤推荐接口（/api/recommendations）。
• 刷新首页，观察是否有该接口请求。
• 若有请求，检查响应数据是否为最新推荐；若无请求，检查代码中是否存在条件渲染或错误捕获导致请求未发送。

排查日志：

// 控制台输出（模拟）
[Recommendations] componentDidMount: fetching recommendations...
// Network 面板未发现 /api/recommendations 请求

结论：客户端未发起推荐数据请求，排除客户端获取异常。

2.2 排查方向二：服务端预渲染数据是否未更新？

假设：推荐列表数据通过 getStaticProps 在构建时预渲染到页面中，且未配置更新机制。

验证步骤：

• 查看页面源码（右键 → 查看页面源代码），搜索推荐列表商品 ID（如 phone-1）。
• 若源码中仅包含初始热门商品 ID，且无动态渲染标记（如 __NEXT_DATA__ 中的预渲染数据），则确认是静态预渲染。
• 检查 pages/index.js 中是否使用 getStaticProps 获取推荐数据。

排查日志：

<!-- 页面源码片段 -->
<div class="recommendations">
  <!-- 预渲染的推荐商品，均为初始热门 -->
  <div class="product" data-id="clothes-1">连衣裙</div>
  <div class="product" data-id="home-2">抱枕</div>
</div>

<script id="__NEXT_DATA__" type="application/json">
{
  "props": {
    "pageProps": {
      "recommendations": [{"id": "clothes-1", ...}, {"id": "home-2", ...}]
    },
    "__N_SSP": false  // 静态生成标记（SSG）
  }
}
</script>

代码检查：

export async function getStaticProps() {
  // 构建时调用推荐接口获取数据
  const res = await fetch(`${process.env.API_URL}/api/recommendations`);
  const recommendations = await res.json();

  return {
    props: { recommendations } // 预渲染到页面中
  };
}

结论：推荐数据通过 getStaticProps 在构建时获取并静态生成，且未配置任何更新机制，导致数据永久停留在构建时刻。

2.3 排查方向三：缓存策略是否加剧数据陈旧？

假设：即使 getStaticProps 数据陈旧，若配置了 CDN 或浏览器缓存，可能延长数据过期时间。

验证步骤：

• 检查 Next.js 配置（next.config.js）中的 headers 是否设置了长缓存。
• 查看 CDN 控制台（如 Vercel Edge Network、Cloudflare）的缓存规则。

排查结果：

// next.config.js 中未设置特殊缓存头
module.exports = {
  reactStrictMode: true,
};

CDN 缓存规则为默认（无强制缓存），排除缓存加剧问题。

三、解决方案：动静结合的混合架构

3.1 方案一：Incremental Static Regeneration (ISR) 增量静态再生

核心思路：保留静态生成的性能优势，通过 ISR 让页面在后台定期或按需重新生成，平衡性能与时效性。

适用场景：推荐数据变化频率中等（如每小时更新一次），且允许短暂数据延迟。

实现代码：

export async function getStaticProps() {
  const res = await fetch(`${process.env.API_URL}/api/recommendations`);
  const recommendations = await res.json();

  return {
    props: { recommendations },
    // 关键：设置 revalidate 选项，单位秒
    revalidate: 3600, // 每 1 小时重新生成页面（后台静默更新）
  };
}

重点逻辑：revalidate: 3600 表示页面生成后，3600 秒内（1 小时）返回缓存页面，超过后 Next.js 会在用户请求时触发后台重新生成，生成期间返回旧页面，生成完成后更新缓存。

3.2 方案二：客户端动态获取（SWR/React Query）

核心思路：静态生成页面框架（无推荐数据），推荐列表通过客户端动态请求获取，使用 SWR 或 React Query 处理缓存、重试和实时更新。

适用场景：推荐数据需实时更新（毫秒级响应），且可接受客户端请求的轻微延迟。

实现代码：

import useSWR from 'swr';

function Recommendations() {
  // 使用 SWR 获取推荐数据，key 为用户 ID（需登录，匿名用户可用设备 ID）
  const { data, error } = useSWR(
    `/api/recommendations?userId=${localStorage.getItem('userId')}`,
    async (url) => {
      const res = await fetch(url);
      if (!res.ok) throw new Error('Failed to fetch recommendations');
      return res.json();
    },
    {
      revalidateOnFocus: true, // 页面聚焦时重新验证
      dedupingInterval: 60000, // 1 分钟内不重复请求
      fallbackData: [], // 加载时显示空状态或骨架屏
    }
  );

  if (error) return <div>推荐加载失败，请重试</div>;
  if (!data) return <div className="skeleton">加载中...</div>;

  return (
    <div className="recommendations">
      {data.map((product) => (
        <div key={product.id} className="product">
          {product.name}
        </div>
      ))}
    </div>
  );
}

export default Recommendations;

重点逻辑：

• SWR 会自动处理请求缓存、重试、背景刷新，提升用户体验；
• fallbackData 避免加载时空白，可结合骨架屏优化感知性能；
• revalidateOnFocus 确保用户切换标签页后返回时数据最新。

3.3 方案三：混合渲染（静态框架 + 服务端动态注入）

采用静态骨架+动态数据注入的混合模式：

• 静态部分：使用getStaticProps生成页面框架和非个性化内容。
• 动态部分：客户端获取实时推荐数据。
• 降级策略：首次加载使用静态数据，后续更新动态数据。

具体代码实现：

// pages/dashboard.js
export async function getStaticProps() {
  // 获取通用静态数据（非个性化）
  const staticData = await getStaticPageData(); 
  return {
    props: { staticData },
    revalidate: 86400 // 每天再生
  };
}

function Dashboard({ staticData }) {
  const [recommendations, setRecs] = useState(staticData.fallbackRecs);
  
  // 获取实时推荐
  const fetchRealTimeRecs = async () => {
    const res = await fetch('/api/recommendations', {
      headers: { Authorization: `Bearer ${getUserToken()}` }
    });
    const { data } = await res.json();
    setRecs(data);
  };

  useEffect(() => {
    // 首屏加载后立即更新
    fetchRealTimeRecs();
    
    // 设置轮询更新（可选）
    const interval = setInterval(fetchRealTimeRecs, 300000); // 5分钟
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      {/* 静态内容 */}
      <Banner data={staticData.banner} />
      
      {/* 动态推荐模块 */}
      <RealTimeRecommendations items={recommendations} />
    </div>
  );
}

关键参数解析：

• staticData.fallbackRecs：构建时生成的默认推荐，用于首屏展示。
• useEffect：在组件挂载后立即触发实时数据获取。
• 轮询间隔：根据业务需求设置，此处5分钟是平衡体验与性能的选择。

3.4 方案对比与选型

最终选型：采用客户端 SWR 获取方案。理由：个性化推荐需实时响应用户行为，且 SWR 的缓存机制可降低服务器压力，同时骨架屏能优化首屏体验。

四、踩坑复盘：预渲染场景的最佳原则

4.1 数据分类原则

• 静态内容：使用getStaticProps（产品分类、商家信息）
• 动态内容：客户端获取（用户行为相关数据）
• 混合内容：静态骨架+动态填充（本文方案）

4.2 更新策略矩阵

4.3 性能与实时性平衡公式

最佳刷新周期 = Max(用户容忍阈值, Min(数据变更频率, 系统承载能力))

4.4 监控指标建议

• 推荐数据新鲜度 = (当前时间 - 行为发生时间)。
• 用户行为到推荐展示的延迟分布
• 混合渲染页面的FCP（首次内容绘制）与LCP（最大内容绘制）

结语

本文详细介绍了在线商城个性化推荐场景下遇到的预渲染数据断层问题，从问题现象、排查过程到最终解决方案进行了全面阐述。我们采用了混合渲染策略，成功在商城推荐系统中实现了静态骨架的性能保障与动态数据的实时性的完美平衡。这种设计模式可扩展到各类需要结合预渲染与实时数据的场景，如动态定价系统、实时排行榜等。

阅读本文，将有以下收获：

• 静态生成适用于内容相对固定的场景，对于需要实时性或个性化的数据需要采用其他策略。
• 混合渲染是平衡性能和功能需求的有效方案。
• 良好的错误处理和用户体验设计在实际项目中至关重要。
• API设计需要考虑多种使用场景和降级方案。

希望本文的实践经验能为遇到类似问题的开发者提供有价值的参考，帮助大家在 Next.js 项目中更好地平衡性能优化和功能实现。