html模板碎片化需主动管理缓存边界：缓存键须含locale、设备类型、权限等级等上下文，禁用纯文件名或json.stringify(req.query)；运行时js变量不可入缓存体，须拼装后注入；id须加唯一前缀防冲突；cdn需关闭html自动优化。
HTML 模板碎片化不是问题，而是必须主动管理的缓存边界——用错粒度、键不带上下文、缓存内联 JS，三者任一都会导致用户态污染或 hydration 失败。
模板碎片缓存键必须含 locale、设备类型、权限等级
只按文件名缓存（如 "header"）等于把所有用户塞进同一个 HTML 副本里。真实场景中，header.templ 渲染结果受 req.User.Role、req.Header.Get("Accept-Language")、isMobile(req) 共同影响。
常见错误现象：cache.Get("header") 返回了未登录版，但当前请求已带有效 session；或返回了含促销角标的版本，而该用户所在地区未参与活动。
- 正确做法：缓存键拼成
"header:zh-CN:mobile:admin"或"product-list:category=shoes:page=2:uid_456" - 禁止用
JSON.stringify(req.query)直接作键——utm_source等跟踪参数会导致缓存爆炸 - 纯静态碎片（如页脚）可固定键 + 长 TTL，但必须和动态碎片物理隔离（不同 Redis DB 或命名空间）
Django/Jinja2 中 HTMX 碎片响应头必须显式设为 no-cache
碎片走独立 HTTP 请求（如 GET /fragments/comments）时，浏览器和 CDN 会按响应头单独缓存它。若视图没设头，Nginx 默认可能加 Cache-Control: public, max-age=3600，碎片就卡死不动。
典型错误写法：return render(request, 'fragments/comment_section.html', context) —— 完全没控制缓存。
- 检测 HTMX 请求：用
request.headers.get('HX-Request') == 'true'最可靠 - 碎片响应必须设
response['Cache-Control'] = 'no-cache, must-revalidate'或max-age=0 - 若内容依赖用户身份，额外加
response['Vary'] = 'Cookie'，避免不同用户看到彼此缓存 - 禁用
@cache_page装饰器——它默认设public, max-age=，和碎片场景冲突
服务端缓存的 HTML 片段里不能含运行时 JS 变量
缓存的是字符串，不是执行环境。如果碎片里写了 <script>window.USER_ID = {{.UserID}}</script>，这个值是缓存生成时刻的快照，后续所有请求都复用它。
典型坑：login.html 缓存了带 window.CSRF_TOKEN 的片段，结果所有用户拿到同一个 token，表单提交全 403。
- 所有运行时变量（用户 ID、CSRF token、nonce、时间戳）必须在 HTML 拼装完成后再注入，不能进入缓存体
- 正确做法：缓存纯 HTML（不含
<script></script>），拼装后统一用<script id="runtime-data">{...}</script>注入 JSON - 若必须内联 JS，用占位符如
__USER_ID__，拼装时用strings.ReplaceAll()替换
hydration 时 ID 冲突必须靠前缀隔离，不能删 ID
多个微服务各自返回含 id="loading" 的碎片，合并后 DOM 中只剩一个生效，事件绑定、焦点、document.getElementById 全部错位。
绝对不要在模板里写固定 id="sidebar"——即使它看起来“不会重复”。
- 服务端渲染时，对每个碎片加唯一前缀：
id="{{.FragmentID}}-modal-root" - 客户端 hydrate 前，用
document.querySelectorAll('[id^="{{.FragmentID}}-"]')批量重写 ID，再挂载逻辑 - CDN 缓存碎片时，必须关闭 HTML 自动优化（如 Cloudflare 的“自动最小化”），否则会破坏 ID 前缀结构
locale 或 role 维度，故障就是静默的——用户看不到报错，只看到别人的名字、别人的按钮、别人的权限。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
