emotion在ssr中样式闪烁的根本原因是服务端与客户端cache实例不一致导致hydration失败；必须共用同一createcache实例、固定key、服务端提取样式并内联至head、清除构建缓存。
Emotion在SSR中样式闪烁，根本不是库的问题，而是服务端生成的class名和客户端水合时生成的不一致，导致React放弃复用DOM、强制重绘——你看到的“闪”，其实是hydration失败的视觉表现。
服务端与客户端必须共用同一个createCache()实例
Emotion靠cache实例生成class名（如css-1a2b3c）。服务端用一个cache，客户端又调用一次createCache()，哪怕参数完全一样，哈希结果也不同。
- Next.js App Router中，应在
providers.tsx或root-layout.tsx里用useState(() => createCache())初始化，避免每次渲染都新建 -
cache的key必须固定，比如{ key: 'css' }，不能是动态值或带环境变量 - 若用
@emotion/server，renderStylesToString(app, cache)必须传入和服务端同源的cache，不能另起炉灶
useInsertionEffect不能用于SSR样式注入
这个Hook在服务端不执行，只在客户端生效。如果你用它插入<style></style>，服务端HTML里就压根没有样式标签，首屏必然FOUC。
- 必须改用
useEffect+typeof window !== 'undefined'判断，确保只在客户端运行注入逻辑 - 更稳妥的做法是：服务端直接提取样式字符串，通过
getInitialProps或generateStaticParams注入到head中，客户端不重复操作 - 检查最终HTML源码：确认
<style data-emotion="css"></style>已存在且含有效CSS文本，而不是空标签
服务端提取后必须内联到HTML的
Emotion不会自动把样式塞进HTML；它只提供提取函数，你得手动拼接进响应字符串里。漏掉这步，等于白做。
- Next.js中，需在
app/layout.tsx里用useServerInsertedHTML返回<style></style>字符串，且确保返回的是纯文本，不要包在<div>或JSX Fragment里 <li>若用<code>extractStyle(cache)（如@ant-design/cssinjs场景），结果必须作为dangerouslySetInnerHTML写入，并带上data-emotion="css"和data-s属性 - 禁用
stylisPlugins中的随机函数（如prefixer若依赖Math.random，会导致服务端/客户端前缀不一致） - 每次调整
createCache参数、stylisPlugins或tailwind.config.ts后，必须手动清空：rm -rf .next/cache/postcss node_modules/.vite/deps - CI/CD流程里要加这一步，否则上线后仍闪
- 本地开发时，如果发现改了主题但class名没变，大概率是缓存没清干净
最容易被忽略的缓存残留问题
PostCSS、Vite、Emotion各自的缓存不会自动失效。.next/cache/postcss或node_modules/.vite/deps里可能还存着旧的哈希结果，改完配置也不生效。
