SSR 与同构渲染

一次 SSR 请求的完整链路

水合的本质：服务端渲染的 HTML 与客户端渲染结果必须一致，React 才能"接管"这棵 DOM。

React 19 中：

const root = hydrateRoot(document.getElementById('root'), <App />);
// 注意：是 hydrateRoot 而不是 createRoot！

水合时 React 会对比服务端 HTML 与客户端组件输出，发现不一致会警告（Hydration failed）并整棵重渲染该分支，导致性能回退。

App Router 的核心：文件系统路由 + 组件级渲染策略

• app/page.tsx —— 默认是 Server Component（服务端组件）：可以直接 async + await fetch，不打包进客户端 JS！
• 'use client' —— 标记为客户端组件：需要 useState/useEffect/onClick 时才加
• 布局 layout.tsx 保持状态不重载；加载态 loading.tsx；错误边界 error.tsx

// app/products/page.tsx —— 服务端组件：数据在服务端拿，HTML 直接输出
export default async function ProductsPage() {
  const res = await fetch('https://api.example.com/products', { next: { revalidate: 60 } });
  const products = await res.json();
  return (
    <div>
      {products.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

// 'use client' 组件：只有交互部分才需要 JS
'use client';
export function AddToCart({ id }: { id: number }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>加入购物车({count})</button>;
}

背景

一个商品列表页（PC 端），CSR 架构。用户反馈"打开一片白，等 3 秒才见内容"；SEO 完全拿不到商品内容，自然流量接近零。

诊断（用 Performance 面板看关键指标）

• LCP 4.2s（超 2.5s 阈值）—— 白屏来自 JS 下载 + 执行 + 数据请求串行
• TTI 5.1s —— 页面长时间不可点
• Google 抓取为空 —— 无 SSR 无内容

改造方案（Next.js App Router）

1. 列表页改为服务端组件，数据在服务端 fetch（revalidate: 60 走 ISR，60 秒内直接吐缓存）
2. 分页交互部分（排序/筛选）拆成 'use client' 小组件，挂到服务端渲染的静态列表上
3. 图片全部 next/image（自动懒加载 + CDN 尺寸裁剪）
4. 页头加 loading.tsx 骨架屏流式输出

结果与复盘

• LCP 4.2s → 2.1s（+50%）；TTI 5.1s → 2.8s
• SEO：商品内容进入搜索引擎索引，自然流量 3 个月 +180%
• 代价：新增 Node 服务与缓存层，服务器成本 +30%；教训：ISR 的 revalidate 时间要根据商品更新频率调，否则后台改价用户 60 秒内看不到

要求（用 Next.js 或 Nuxt 3 任选）

1. 文章列表页服务端渲染，标题/摘要/封面在 HTML 里可见（爬虫可读）
2. 文章详情用 ISR（revalidate: 3600），新增文章 1 小时内生效
3. 阅读计数用 'use client' 小组件实现（不与 SSR HTML 冲突）
4. 文章内容来自 Markdown 文件或 mock API

通关标准

• curl 页面返回的 HTML 中含文章正文（证明 SSR 生效）
• 浏览器无 Hydration 报错
• Lighthouse SEO 评分 ≥ 90
• 能口头讲清：CSR/SSR/SSG/ISR 各自何时用、水合是什么