NextJS 13.4.12添加'use client'后为何仍存在SSR渲染？

核心问题解答：加了'use client'为何仍能看到完整HTML？ #

加'use client'只是标记组件为客户端组件，并不影响Next.js对它的初始HTML渲染，具体流程是：

• 服务器端静态渲染：Next.js在服务器端执行该组件的渲染逻辑，生成包含所有静态内容（input、按钮、默认值等）的HTML，这就是你在网络请求里看到的完整标签。
• 客户端水化（Hydration）：浏览器拿到静态HTML后，会加载该组件对应的客户端JS代码，把静态DOM节点和react-hook-form的状态、事件监听、表单校验等交互逻辑绑定，让静态页面变成可交互的动态组件。

简单来说：服务器负责输出"静态页面壳"，浏览器负责补全"交互能力"，所以你既能看到完整HTML，表单后续也能正常工作。

13.0.5与13.4.12的版本差异原因 #

Next.js 13.x版本对App Router的组件模型做了明确调整：

• 13.0.5版本：App Router刚推出时，组件默认的执行逻辑更偏向"兼容旧模式"，没有强制区分服务器/客户端组件，即使使用react-hook-form这类客户端库，也不需要显式声明'use client'，框架会自动处理。
• 13.2+及13.4.12版本：Next.js明确了服务器组件为默认类型，服务器组件禁止使用任何客户端特有的API（如React Hooks、window对象、客户端状态管理库），必须显式添加'use client'指令，才能让组件切换到客户端模式，使用react-hook-form这类依赖。

你的代码细节说明 #

你的Login组件中：

• 服务器会渲染出带有默认值（admin@dreamguys.co.in、123456）的静态表单HTML，这部分内容会随初始请求发送给浏览器。
• 浏览器完成水化后，react-hook-form才会接管表单的状态管理、实时校验、按钮禁用逻辑等交互功能。
• 注意：代码中直接引入<script src="./togglePassword.ts"></script>的方式不符合Next.js最佳实践，建议改用next/script组件加载，避免出现水化不匹配的问题。

内容的提问来源于stack exchange，提问作者Joy Gupta