data-* 是 ssr 首屏状态唯一合规的 html 层传递方式，必须小写短横线命名、经 json.stringify 和 html 实体转义，客户端需 json.parse 并类型转换，严禁传递敏感信息或当作响应式源。
data-* 是 SSR 首屏状态唯一合规的 HTML 层传递方式
不能用 config、init 这类非法属性，也不能把 JSON 直接塞进 script 标签里硬编码。HTML 标准只允许 data-* 作为自定义初始化参数载体，浏览器会原样保留、不解析、不执行，且可通过 dataset 安全读取。
常见错误现象包括：data-config='{"api":"/v1"}' 中的 " 被 HTML 解析器截断；服务端模板未做 HTML 实体转义导致 XSS；JS 里直接写 document.body.dataset.config.timeout 报 Cannot read property 'timeout' of undefined——因为 dataset.config 是字符串，不是对象。
-
data-名必须小写+短横线，如data-api-base，对应 JS 中的element.dataset.apiBase - 结构化数据（对象/数组）必须先
JSON.stringify()，再在客户端JSON.parse()，且要加try/catch - 挂载位置优先选
：它最早存在，document.documentElement.dataset在任何脚本中都可立即访问 - 敏感信息（密钥、token）严禁走
data-，应由后端接口动态返回并鉴权
SSR 渲染后 data-* 值不会自动变成响应式状态
React/Vue 组件 mount 后调用 el.setAttribute('data-id', '500')，组件不会重渲染——dataset 只读取初始值，所有值都是字符串，框架无法监听 DOM 属性变化，更不会自动类型转换。
常见错误是把 data-active="true" 当布尔值用，结果 JS 里拿到的是字符串 "true"；或把 data-count="42" 当数字，后续计算出错；SSR 渲染的 HTML 中 data- 被客户端 JS 覆盖后，框架若没手动同步状态，就会出现首屏与 JS 状态不一致。
- 不要直接把
dataset当响应式源，应作为初始化输入，在组件内转成正确类型（Number()、JSON.parse()、Boolean()等） - SSR + hydration 场景下，务必确保客户端首次运行时读取的
dataset与服务端生成的完全一致，否则 hydration 失败 - 若需后续更新配置，应走 props / context / store，而非反复操作
setAttribute
服务端模板输出 data-* 时必须 HTML 实体转义
模板引擎（如 EJS、Jinja2）直接拼接 JSON 到 data-config 属性里，若没做转义，&、"、 等字符会破坏 HTML 结构，轻则属性截断，重则触发 XSS。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
例如：data-config="" 是危险写法；正确做法是使用模板引擎内置的 HTML 转义函数，或手动调用 escapeHtml() 类工具。
- EJS 中用
替代 <code> 输出已转义内容，或显式调用 <code> - Jinja2 中默认已转义，但
{{ cfg|tojson }}才能安全输出 JSON 字符串 - Node.js 原生模板可用
he.escape()或正则简单替换：str.replace(/["&'`]/g, c => `${c.charCodeAt(0)};`)
window.__INITIAL_STATE__ 和 data-* 应分工明确
data-* 只负责极简、扁平、非敏感的初始化参数（如 API 地址、环境标识、默认语言）；真正需要 hydration 的完整状态（代码内容、执行结果、编辑器光标位置等）必须走 window.__INITIAL_STATE__ 注入，并控制在 5KB 内。
混淆二者会导致：首屏 HTML 体积膨胀、TTFB 延长、JSON.parse 失败风险上升、SSR/CSR 状态不一致。尤其在线运行工具这类场景，data-config 放不了 AST 高亮结构或预执行结果。
-
data-适合：data-env="prod"、data-api-base="/api"、data-default-lang="javascript" -
window.__INITIAL_STATE__适合：code、output、history、cursor等复杂状态 - 两者不可互相替代——
data-不解决 hydration，window.__INITIAL_STATE__不解决跨框架初始化参数解耦
实际落地时最易被忽略的点：服务端拼 data- 属性和客户端读取之间，差一个 HTML 转义环节；而 dataset 返回字符串这个事实，常被当成“自动解析”来用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
