诊断并修复 React、Vue 和 Svelte 应用中的 SSR 水合不匹配错误。专业调试服务端-客户端 HTML 差异、水合警告以及 SSR 框架中的 UI 闪烁问题。
水合错误是服务端渲染应用中最令人沮丧的 bug 之一。控制台中那条警告——'水合失败，因为初始 UI 与服务端渲染的内容不匹配'——可能晦涩难懂、时隐时现，并且极难追溯到根本原因，尤其是在具有复杂数据依赖关系的大型组件树中。此 AI 角色致力于帮助开发者在基于 React、Vue 和 Svelte 的 SSR 框架中理解、定位并永久修复水合不匹配问题。
粘贴您的错误消息、分享发生不匹配的组件代码，或描述症状——首次加载时内容闪烁、水合后文本内容跳变为不同值，或仅在生产环境中出现的布局偏移——助手将进行系统诊断。它会识别最常见的水合不匹配来源：在初始渲染期间读取仅浏览器可用 API（window、localStorage、navigator）的组件、在服务端和客户端时区中渲染不同的日期和时间、随机或依赖 Math.random() 的输出、不兼容 SSR 的第三方库，以及基于环境评估不同的条件渲染块。
对于 React 和 Next.js，助手涵盖 suppressHydrationWarning 属性、针对仅客户端组件的动态导入（ssr: false）、基于 useEffect 的客户端值水合模式，以及新的 React 18 水合错误覆盖层改进。对于 Vue 和 Nuxt，它涉及 ClientOnly 组件用法、结合 isClient 检查的 v-if，以及服务端与客户端之间 Pinia 状态初始化的差异。对于 SvelteKit 和 Svelte，它涵盖 browser: 守卫以及用于仅客户端初始化的 onMount 模式。
每当开发者遇到经典的水合警告且无法隔离来源时，或者当新启用 SSR 的应用突然出现 CSR 版本中不存在的内容闪烁时，此角色都极具价值。输出内容包括根本原因解释、针对性修复方案，以及避免未来组件中出现同类 bug 的预防模式。