HTML模板应通过构建工具（如Next.js）在构建时或服务端请求Headless CMS API注入数据，而非直接在HTML中用fetch；CMS仅输出JSON，不覆盖class/id，但需清洗富文本并避免样式冲突。
HTML模板怎么从Headless CMS取数据？别硬写fetch
直接在HTML里用fetch拉API，看着简单，实则埋雷：没有缓存、无错误降级、SSG不兼容、SEO失效。真实项目里，你得把HTML当作「渲染结果」，而不是「运行环境」。
正确路径是：用构建工具（如Next.js、Nextra、Hugo）在构建时或服务端请求CMS API，把内容注入HTML模板。比如Next.js的generateStaticParams + fetch组合，能预生成每个/project/[slug]页面的完整HTML，连JS都不用加载就能展示内容。
- 静态站点生成（SSG）场景：必须用构建时数据获取，否则HTML里全是占位符
- 纯前端渲染（CSR）场景：可用
useEffect+fetch，但要自己处理loading、error、404状态 - 千万别在HTML文件里写
<script>fetch(...) </script>——这等于放弃首屏性能和SEO
HTML里的class/id命名会被CMS覆盖吗？
不会。Headless CMS只管发JSON数据，不管你怎么写HTML结构。但问题常出在「动态绑定」环节：比如你用innerHTML把CMS返回的富文本直接插入DOM，里面带的<div class="legacy-styles">就可能和你当前CSS冲突。
更隐蔽的风险是：CMS编辑器导出的HTML常含内联样式、冗余class、甚至style标签。这些不是CMS“覆盖”你的HTML，而是你没做清洗就直接用了。
立即学习“前端免费学习笔记（深入）”；
- 富文本字段建议用
DOMPurify.sanitize()过滤后再innerHTML - 避免依赖CMS输出的class名写CSS；改用BEM或CSS-in-JS方式隔离样式
- 如果CMS提供Markdown字段，优先用它——比HTML字段更可控、更易转换
如何让HTML页面支持CMS后台实时更新？
纯静态HTML做不到“实时”，但可以接近。关键不是让HTML自己动，而是让它被重新生成或局部刷新。
两种可行路径：
- Webhook触发重建：CMS发布内容时，调用Vercel/Netlify的build hook，整站重生成——适合更新不频繁、SEO敏感的页面
- 增量更新+SWR：前端用
useSWR轮询CMS API（或监听EventSource），只刷新<article>区域——适合博客、项目列表页 - 注意：不要用
setInterval无脑轮询，CMS API通常有rate limit，且浪费带宽
本地开发时HTML怎么模拟CMS数据？
别等CMS部署完再写HTML。最稳的方式是：把CMS返回的JSON样本存成mocks/projects.json，在构建脚本里优先读这个文件，上线时自动切到真实API。
Next.js示例中，fetch可这样写：
const res = process.env.NODE_ENV === 'development'
? await fetch('http://localhost:3000/mocks/projects.json')
: await fetch('https://cms.example.com/api/projects')
这样HTML模板完全不用改，开发和上线用同一套逻辑。
- mock数据结构必须和CMS实际返回严格一致，否则上线后必报
Cannot read property 'title' of undefined - 建议用Zod或TypeScript interface校验mock和API响应，提前暴露字段缺失问题
- 别用localStorage模拟——它无法触发SSG，也无法测试多页面关联逻辑
