Emotion SSR 闪屏主因是服务端未注入样式或客户端 hydration 时 cache 不一致；需每次请求新建同 key 的 cache、用 CacheProvider 包裹组件树、调用 extractCritical 提取样式插入 head，并确保客户端 cache key 和版本与服务端完全一致。
Emotion 在 SSR 中闪，不是 JS 没加载完，而是服务端压根没把样式塞进 HTML，或者客户端 hydration 时用的 cache 和服务端不一致——两个环节只要断一环，FOUC 就立刻出现。
服务端没注入样式：cache 实例没传对或没收集
服务端渲染时，css、styled、keyframes 调用产生的样式规则默认只存在内存里，不会自动变成 <style> 字符串塞进 HTML。必须显式创建一个服务端专用 cache，并用 CacheProvider 包裹整个组件树，再调用 extractCritical 或 renderStylesToString 抽出样式字符串。
- 错误写法：
const cache = createCache()写在模块顶层，被多个请求复用；或完全没传CacheProvider - 正确做法：每次 SSR 请求内新建 cache，例如 Express 中
const cache = createCache({ key: 'ssr' })，然后<CacheProvider value={cache}><App /></CacheProvider> - 必须调用
extractCritical(app)（@emotion/server v11）或renderStylesToString(app)（v12+），拿到css字段后插入 HTML 的<head>，不能丢弃
客户端 hydration 时 class 名不匹配
服务端生成的类名（如 css-1a2b3c）和客户端水合后生成的类名只要有一个字符不同，React 就判定 DOM 不匹配，跳过复用，强制重绘。根源是两端 cache 配置不一致。
- 客户端必须用和服务端**完全相同 key** 的 cache 实例初始化，例如服务端用
createCache({ key: 'ssr' })，客户端也得createCache({ key: 'ssr' })，不能漏掉key或写错 - 确保
@emotion/react和@emotion/cache版本严格一致（检查package-lock.json），v11 和 v12 的序列化逻辑不兼容 - SSR 构建和客户端运行时的
process.env.NODE_ENV必须一致（都为production），否则哈希算法不同
keyframes 动画在 SSR 后不生效
keyframes 返回的是 Emotion 内部标识对象，不是字符串。服务端若未通过 cache 收集，HTML 里就不会有对应的 @keyframes 规则，客户端 hydration 后自然找不到动画定义。
立即学习“前端免费学习笔记（深入）”；
-
keyframes必须定义在组件外部（模块顶层），不能包在函数组件内部，否则 SSR 时无法静态分析到 - 服务端 cache 必须启用，并确保
CacheProvider包裹了所有用到该动画的组件 - 检查最终 HTML 输出中是否包含
@keyframes css-xyz { ... }—— 没有就说明收集失败，常见原因是 cache 没传进去，或extractCritical没调用 - 动画名不能硬编码，必须用插值：
animationName: ${spin}，不能写成animation: 'spin 1s'
最难调的是多个问题叠加：比如服务端 cache key 写错 + 客户端忘了 reset + keyframes 定义在组件里。现象全是“闪一下”，但根因可能分布在三个不同位置。先确认 HTML <head> 里有没有内联 <style>，再比对服务端/客户端生成的类名是否一致，最后查动画规则是否存在——顺序不能乱。
