验证SSR HTML是否含有效内容，需检查源码中是否存在语义化业务内容（如<h1>、<main>内文本），而非仅空容器；须结合data-server-rendered="true"标记与实际内容校验，避免误判为CSR。
如何验证 SSR 渲染出的 HTML 是否含有效内容
SSR 页面返回的 HTML 如果只是个空壳（比如 <div id="app"></div>），说明服务端没真正渲染，而是退化成了 CSR。预检第一步就是确认 HTML 是否“实打实”包含语义化内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
curl -s http://localhost:3000/ | grep -o "<h1[^>]*>.*</h1>"检查关键标题是否已内联；更稳妥的是用cheerio加载响应体，查$("main").text().length > 0 - 避免只检查
<body>是否非空——很多 SSR 框架即使失败也会吐出骨架，得看真实业务区域（如<article>、<section class="content">） - 注意
data-server-rendered="true"这类标记只是框架提示，不能代替内容校验
为什么 window.__INITIAL_STATE__ 必须在 <script> 标签里且位置靠前
这个全局变量是客户端 hydration 的数据来源，如果它被塞到页面底部、或被其他脚本覆盖、或被 HTML 注释包裹，hydration 就会拿不到初始状态，导致首屏内容和服务端不一致（mismatch error）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保该
<script>出现在</head>前，或至少在<div id="app">之前；Next.js 默认放在<head>，Nuxt 2 放在<body>开头，Nuxt 3 推荐用useSSRStore()替代手动注入 - 不要用
JSON.stringify(state).replace(/</g, '\u003c')这类不安全序列化——必须用serialize-javascript或框架内置安全序列化，否则 XSS 风险直接触发 CSP 拦截 - 若使用
getServerSideProps（Next.js）或asyncData（Nuxt），确认返回对象可被 JSON 序列化；Date、Map、函数等类型会静默丢失
路由匹配失败时 SSR 返回 404 还是空白页？这取决于你写的 renderToString 错误处理逻辑
很多 SSR 应用在路由未命中时默认返回空 app 实例，浏览器看到的是白屏+控制台报错，但 HTTP 状态码仍是 200 —— 这对 SEO 和监控极其不友好。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在入口
createApp工厂函数中，用router.push(context.url)后调用router.onReady()，并在router.getMatchedComponents().length === 0时显式 reject 并设置context.status = 404（Vue SSR）；Next.js 则需在getServerSideProps中 thrownotFound: true - Node.js 服务层（如 Express）要捕获 Promise rejection，并统一设置
res.status(code).send(html)，不能只依赖框架默认 fallback - 别依赖客户端
router.beforeEach拦截 404 —— SSR 阶段已经结束了，此时再跳转只会造成二次渲染和 hydration mismatch
预检时容易忽略的流式渲染（Streaming）兼容性陷阱
启用 renderToPipeableStream（React）或 renderToString 分块输出（SvelteKit）后，HTML 是分段 flush 的，但某些 CDN 或反向代理（如 Nginx 默认配置）会缓存首个 chunk，导致页面卡在 header 不动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查响应头是否有
Transfer-Encoding: chunked，且无Content-Length；若用了 Nginx，需确认proxy_buffering off;和chunked_transfer_encoding on; - 流式渲染下，
window.__INITIAL_STATE__必须放在第一个 chunk（即<head>里），否则后续 chunk 流入时客户端 JS 已执行，变量已 undefined - 调试时禁用流式（改用
renderToString）能快速定位是否是流控问题，但上线前必须回归验证——流式对 LCP 提升明显，尤其大页面
真正难的不是让 SSR 跑起来，而是让每次请求都稳定输出语义完整、状态一致、HTTP 状态准确、流式可控的 HTML。预检策略本质是把“渲染完成”这件事从黑盒变成可观测、可断言的过程。
