CSR 页面空白是因HTML仅作容器，真实内容由JS动态生成；右键“查看源代码”仅见空div和script标签，无业务DOM，断网或禁用JS即白屏，验证需通过Network查JS加载、Console看报错、curl检查响应内容。
CSR 不是“用 HTML 实现的渲染”，而是HTML 只起容器作用，真正生成页面内容的是浏览器里的 JavaScript。服务器返回的 HTML 文件本身不带业务数据、不带可展示的 DOM 结构，它只是一个空壳——这点必须先认清，否则后续所有调试和优化都会跑偏。
为什么打开 HTML 源码看不到页面内容？
这是 CSR 最典型的表象。你右键“查看网页源代码”，看到的往往是类似这样的结构：
<noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script src="/static/js/main.a9f5ef89.chunk.js"></script>
原因很简单：document.getElementById('root') 这个节点在服务端压根没被填充过；所有真实内容（标题、列表、按钮）都是 JS 执行后动态 appendChild 或 innerHTML 写进去的。搜索引擎爬虫、微信内置浏览器、甚至部分低配安卓 WebView，如果禁用或延迟执行 JS，就会卡在这个空 div 上。
CSR 渲染流程中哪些环节容易被忽略？
很多人以为“JS 下载完就渲染了”，其实中间有明确的串行依赖，漏掉任一环都会白屏或报错：
-
index.html返回必须包含正确的<script></script>标签，且路径不能 404（检查 Network 面板里 JS 是否 status 200） - JS bundle 必须能正常执行：若
React或Vue运行时缺失、版本不匹配，控制台会报ReferenceError: React is not defined类错误 - 路由初始化前，
window.location.pathname已固定，但 CSR 框架需主动读取并匹配——若用HashRouter却部署在非 hash 路径下，首屏直接 404 - 数据请求（如
fetch('/api/user')）失败时，组件通常不会 fallback，而是留白或报Cannot read property 'name' of undefined
怎么验证当前页面确实是 CSR？
三个低成本验证方式，比看框架文档更直接：
- 断网后刷新页面：如果显示空白或 “You need to enable JavaScript”，基本就是 CSR；SSR 页面至少能显示静态结构
- 禁用 JavaScript 后刷新：Chrome DevTools → Settings → Preferences → Debugger → 勾选 “Disable JavaScript”，再刷新；CSR 页面只剩
- 用 curl 或 Postman 请求首页 URL，输出里搜
My App
CSR 的“空壳 HTML”不是缺陷，而是设计选择；但它要求你对 JS 加载时机、水合（hydration）边界、服务端是否参与首屏数据获取这些点保持持续敏感——尤其当产品开始关注 SEO 或低端设备体验时，那个看似无关紧要的 index.html 里到底写了什么，就突然变得非常关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
