水合不一致、SEO 和 SSR 首屏慢怎么排查
先理解原理和示例,再练习完整口述与追问。
回答要点
比较服务端 HTML 与客户端首轮渲染,排查随机值、时间、时区、非法 HTML、客户端独有状态。SEO 还看 head、状态码和可索引链接。首屏慢按服务端耗时、接口、HTML、静态资源与水合成本拆分。
原理拆解
水合要求客户端初次 UI 与服务器标记匹配;时间、随机数、浏览器存储、无效 HTML 被浏览器修正和不同接口结果都可能造成差异。SEO 还包括可抓取 URL、正确状态码、标题、规范链接和内容可访问性。首屏慢要拆服务端取数、模板渲染、传输、关键资源和客户端水合,而不是只看 SSR 是否开启。
示例与推演
先记录两端初值:服务端是否输出固定 locale 时间,客户端是否立刻按本地时区重算;用户状态是否在服务端未知却在客户端立即从 storage 显示。保持共同初值,客户端专用变化在挂载后增强。服务端慢则给接口并行、缓存和渲染分别计时,避免只减少浏览器 bundle 却忽视 TTFB。
易错点
不要用 suppress 警告或全量 client-only 作为默认修复。不存在页面要返回真实 404,不能所有地址都是 200 的错误页。
参考回答可直接练习口述
水合不一致先比较服务端 HTML 和客户端第一次渲染,检查随机数、当前时间、时区、非法嵌套、客户端独有状态和不同数据源。SEO 不只看 title,还看状态码、正文、可索引链接和必要元信息。SSR 首屏慢要分服务端渲染、接口等待、HTML 传输、资源加载与水合成本,用耗时证据定位后再并行请求、缓存或减包;不把所有问题归给 SSR 本身。