html骨架必须由服务端拼装完整，包含、、及动态注入的、等，否则将导致水合不匹配错误；骨架屏应与ssr解耦，仅用于客户端加载过渡，不可混入服务端渲染逻辑。
HTML骨架结构必须在服务端注入，不能靠客户端动态生成
Vue SSR 的 HTML 骨架（即 、、 框架）必须由 Node.js 服务端拼装完成，否则会出现水合不匹配（hydration mismatch）错误，比如控制台报 Hydration text content mismatch 或 Server rendered markup doesn't match client rendered markup。
常见错误是把完整 HTML 模板写在 index.html 中，然后只用 renderer.renderToString(app) 替换 <div id="app"> 内容——这会导致 <code> 中的 meta、link、title 等无法随组件动态更新，且 SSR 渲染出的 HTML 缺少语义化根结构。
- 正确做法：服务端响应时输出完整 HTML 字符串，包含
、<meta charset="utf-8">、<title></title>等，并将renderToString()结果插入内指定位置 - 推荐模板结构：
...<div id="app">{appContent}</div> <script>...</script> - 若使用
vue-meta，需确保服务端调用context.meta.inject()并将context.meta.title.text()、context.meta.meta.text()注入到 HTML 模板对应位置，否则客户端水合后会覆盖服务端已设的 title/meta
骨架中静态占位内容（如 skeleton）要与 SSR 渲染逻辑解耦
骨架屏（skeleton）常被误认为是 SSR 的一部分，其实它和 SSR 是正交策略：SSR 解决的是“首屏 HTML 是否可被爬虫读取”，骨架屏解决的是“JS 加载完成前用户看到什么”。两者可以共存，但不能混用。
典型踩坑：把骨架屏组件直接塞进 App.vue，靠 v-if 切换显示逻辑；结果服务端渲染时骨架屏也被 render 出来，而真实数据又没预取，导致 HTML 里出现“假骨架 + 真空数据”的混合状态。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 骨架屏应仅存在于客户端入口（
entry-client.js），通过 CSS 控制初始显示，JS 加载后立即隐藏 - 若需 SSR 适配骨架屏，必须单独构建一个仅含骨架组件的 server bundle（如
skeleton-entry.js），用@vue/server-renderer单独渲染，再手动注入到 HTML 模板的<div id="app"> 中 —— 但这会增加构建复杂度，通常不推荐 <li>更务实的做法：服务端返回真实内容（SSR 本意），客户端加载期间用 CSS 动画模拟骨架效果（例如 <code>background: linear-gradient(...)+animation），避免 DOM 结构冲突 - 必须保证：所有资源脚本（尤其是客户端入口 bundle）放在
闭合标签之前 - 若使用代码分割，确保
vendor、manifest、app三类 chunk 的<script></script>按 webpack 输出顺序依次插入，否则__webpack_require__找不到模块 -
<link rel="preload">可提前提示浏览器加载关键资源，但不能替代实际<script></script>标签；且 preload 的as值必须与实际资源类型一致（如 JS 文件用as="script"），否则可能被忽略 - CSP（内容安全策略）：应在服务端响应头设置
Content-Security-Policy，同时在中补充<meta http-equiv="Content-Security-Policy">作为降级兜底；若依赖内联样式或脚本（如某些 UI 库），必须显式允许'unsafe-inline'（不推荐）或改用 nonce/hash 方式 - SEO 相关：每个页面的
<title></title>、<meta name="description">必须由服务端根据路由/数据动态注入，硬编码在index.html里等于放弃 SEO - 多语言：不要靠客户端 JS 切换
lang属性或 locale 文本；服务端应根据请求头Accept-Language或路由参数（如/zh/product）决定和初始文案，避免水合后语言闪动
HTML骨架中的 script 和 link 标签顺序直接影响 hydration 行为
服务端输出的 HTML 中，<script></script> 标签的位置决定 Vue 客户端应用何时接管 DOM。顺序错乱会导致 hydrate() 失败或白屏。
错误示例：把客户端 JS bundle 放在 里，或放在 <div id="app"> 之前；此时浏览器解析到 script 就执行，但 <code>#app 还未创建，createApp().mount('#app') 报错。
服务端 HTML 骨架需主动处理 CSP、SEO 和多语言等基础需求
骨架不是摆设，它承载着安全策略、搜索引擎识别、国际化支持等隐性职责。很多团队只关注“能渲染”，却忽略这些字段对生产环境的实际影响。
骨架结构一旦上线就长期存在，修改成本高。最易被忽略的是 根节点的属性（如 lang、data-theme）和服务端渲染上下文的绑定关系——它们不像组件那样热更新，出错只能重启服务或清缓存。
