Next.js中Hydration与"use client"的必要性疑问

首先澄清一个常见误解：Next.js默认的是服务端组件（Server Components），并非传统SSR组件。Hydration是客户端组件专属的步骤——把服务器预渲染的HTML在客户端绑定JS逻辑，转换成可交互界面。而"use client"的核心作用是明确划分服务端组件与客户端组件的边界，解决Hydration覆盖不到的问题，具体原因如下：

1. 性能：避免无意义的JS打包与Hydration #

服务端组件的核心优势是不需要在客户端加载和执行JS——纯展示类组件（比如博客正文、商品列表）没有交互需求，服务器直接渲染成HTML发送给客户端即可，完全不需要Hydration。如果没有"use client"指令，所有组件默认都要走Hydration流程，哪怕它根本没交互逻辑，会导致客户端JS体积暴涨，拖慢加载速度。

比如：一个包含100篇文章的博客列表，纯展示场景下用服务端组件，客户端只需要加载HTML，无需加载100个组件的JS；如果强制Hydration，客户端要额外加载所有列表项的冗余逻辑，带宽和加载时间都会大幅增加。

2. 能力边界：服务端组件无法处理客户端专属逻辑 #

服务端组件运行在服务器环境，不能访问浏览器API（比如window、localStorage），也无法使用React的客户端钩子（比如useState、useEffect、useRouter）。Hydration只是激活静态HTML的交互，但前提是组件本身具备客户端运行的能力——服务端组件天生没有这些能力，必须通过"use client"标记为客户端组件，才能在客户端执行这类逻辑。

比如：做侧边栏折叠按钮时，需要用useState存储折叠状态、绑定点击切换逻辑。这个逻辑只能在客户端运行，服务端组件无法处理useState，所以必须加"use client"，让组件在客户端初始化状态并绑定交互事件。

3. 交互体验：提前初始化客户端逻辑 #

有些组件的交互逻辑需要在客户端提前初始化，而非等Hydration完成。比如表单输入组件，用户输入时需要实时更新状态，如果靠服务端渲染的HTML再Hydration，可能会出现短暂延迟（比如输入第一个字符时无响应，等Hydration完成才生效）。标记"use client"后，组件会直接在客户端初始化，用户输入能立即响应，体验更流畅。

实际场景举例 #

场景1：纯展示的商品详情页 #

• 组件内容：商品图片、名称、价格、描述，无任何交互按钮
• 处理方式：使用默认服务端组件，服务器直接渲染HTML，客户端无需加载该组件的JS，加载速度极快，完全不需要Hydration

场景2：带购物车按钮的商品卡片 #

• 组件内容：商品信息+加入购物车按钮，点击需更新购物车状态、调用API
• 处理方式：在组件顶部添加"use client"，服务器先渲染商品初始信息（价格、库存），客户端Hydration后，按钮可触发useState更新购物车数量，同时调用浏览器fetch发送请求

场景3：用户头像下拉菜单 #

• 组件内容：点击头像弹出下拉菜单（含个人中心、退出登录），需监听点击事件、读取localStorage中的用户登录状态
• 处理方式：必须加"use client"，因为服务端无法访问localStorage，也不能监听客户端点击事件。组件在客户端初始化后，直接读取用户信息、绑定点击事件控制菜单显示/隐藏

内容的提问来源于stack exchange，提问作者Cihangir Köroğlu