样式闪烁源于服务端与客户端CSS-in-JS缓存不一致：服务端未提取样式、客户端新建cache导致类名哈希错配、内联样式未正确注入head顶部，四环节任一断裂均引发FOUC。
样式闪烁不是“没加载完”，而是服务端和客户端生成的样式规则对不上——HTML里写的类名、<style> 里的 CSS 内容、客户端水合时注入的新样式，三者不一致，浏览器只能重绘一次。
服务端没把生成的样式提取出来
服务端调用 renderToString() 或类似方法时，CSS-in-JS 库（如 Emotion、styled-components）确实生成了样式，但这些样式默认只存在内存里。如果不显式调用提取函数，它们不会变成字符串塞进 HTML 的 <head> 中。
- Emotion 需要
renderStylesToString(cache)，且cache必须是服务端专用实例 - styled-components 要用
ServerStyleSheet.collectStyles()+sheet.getStyleTags() - 漏掉这步，HTML 返回时
<head>里就空着，客户端 JS 加载后才补上<style data-emotion>，必然 FOUC
客户端用了新 cache 实例，类名哈希不匹配
CSS-in-JS 库生成的类名（如 css-1a2b3c）依赖内部缓存状态。服务端用一个 createCache({ key: 'ssr' }) 实例生成了类名 A 和对应样式；客户端若直接 createCache()，会新建一个空缓存，生成类名 B —— 即使样式内容一样，HTML 元素上的 class 属性还是 css-1a2b3c，而新注入的 <style> 里却是 .css-4d5e6f，样式就失效了。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 必须让客户端复用服务端传递下来的 cache 实例（比如通过上下文或全局变量透传）
- 不能在客户端入口文件里写
const cache = createCache()，这是最常见错误 - Emotion 要求客户端用
<CacheProvider value={cache}>包裹根组件
内联样式块位置或时机不对
即使提取出了 CSS 字符串，如果没放进 <head> 最顶部的 <style> 标签，或者被 JS 动态插入，浏览器依然不会阻塞渲染。
立即学习“前端免费学习笔记（深入）”；
- 必须拼接到 HTML 字符串的
<head>开始处，早于任何<script> - 不能靠
document.head.appendChild(styleEl)，预加载器看不到它 - 验证方式：查看 Network → HTML 响应体，搜索
<style，确认内容存在且无media属性（否则跳过阻塞） - 体积建议 ≤10KB；超大会拖慢 HTML 解析，反而加重白屏
真正难调的不是某一行代码写错，而是服务端 cache 实例、样式提取、HTML 注入、客户端 cache 复用这四个环节只要断一个，现象都一样：页面闪一下。最容易被忽略的是客户端 cache 没复用——因为开发时热更新掩盖了问题，build 后部署才暴露。
