Next.js 的水合（Hydration）是 React 服务端渲染（SSR）和静态生成（SSG）能够实现交互式的核心机制。水合过程指的是浏览器接收到服务器渲染的静态 HTML 后，将其“激活”为完整的 React 应用的过程。本文将深入剖析 Next.js（以当前主流的 15.x 版本为准）中的水合机制，并分享常见问题与优化方案。

在 Next.js App Router 中：

• Server Components 默认在服务器渲染，不参与客户端水合
• Client Components（标记 "use client"）才会参与水合
• 水合时，React 会将服务器生成的 HTML 与客户端虚拟 DOM 进行匹配（reconcile），然后绑定事件监听器

这个设计大幅减少了需要水合的 JavaScript 体积，相比传统的 Pages Router，水合负担更轻。

1. Hydration Mismatch 错误
   最经典的报错：Text content does not match server-rendered HTML。
   原因通常是：

   • 服务器和客户端渲染逻辑不一致（如 Date、random、浏览器 API）
   • 第三方组件在服务器渲染时输出不同内容

2. 水合性能瓶颈
   大量 Client Components 导致传输的 JavaScript 过多，水合时间变长。

3. 最大化使用 Server Components
   将尽可能多的组件保持为 Server Components，只在需要交互的地方使用 Client Components。

4. 动态导入 Client Components

   "use client";
   import dynamic from "next/dynamic";
   
   const HeavyChart = dynamic(() => import("./HeavyChart"), { ssr: false });