高级 SSR - 水合演示

理解 Next.js 的渐进式水合机制

💡 水合（Hydration）是什么？

步骤 1 - 服务端渲染：Next.js 在服务端生成 HTML，用户立刻看到内容（但按钮不可点击）

步骤 2 - 下载 JS：浏览器下载 React/JavaScript bundle

步骤 3 - 水合：React 将事件监听器附加到静态 HTML 上，页面变得可交互

HTML 到达

📄

0ms

JS 下载完成

📦

~100-500ms

水合完成

⚡

~500-1000ms

🖱️

⏳ 水合中...

服务端时间

2026/4/1 18:48:01

客户端时间

水合后显示

• 初始 HTML 由服务端渲染（可见但不可交互）

• 水合完成后，事件监听器被附加（可以点击）

• useTransition 使更新不阻塞 UI

✅ 纯服务端渲染，无客户端 JS

加载中：快速组件...

加载中：慢速组件...

⏳ 组件懒加载中...

特性	纯 SSR	SSR + 水合	纯 CSR
首屏可见时间	最快	快	慢
可交互时间	N/A（无交互）	中等	慢
SEO	优秀	优秀	差
Bundle 大小	最小	中等	最大