css-in-js在ssr下默认必现fouc，因服务端未内联样式、客户端水合时才注入；必须服务端调用extractstyle并内联至html head，且客户端复用同一cache实例，同时服务端需对齐主题逻辑。
样式闪烁（FOUC）在 CSS-in-JS 的 SSR 场景下几乎必然发生，除非你显式处理服务端生成的样式并确保客户端水合时复用——不是“能不能避免”，而是“不处理就一定闪”。
为什么 CSS-in-JS 在 SSR 下默认会闪
CSS-in-JS 库（如 styled-components、@emotion/react、@ant-design/cssinjs）大多依赖运行时注入：服务端渲染时生成 HTML，但样式规则未随 HTML 一起输出；客户端水合时才执行 JS、收集样式、动态插入 <style></style> 标签。这中间存在一个“无样式窗口期”，浏览器先画 DOM，再补样式，视觉上就是一闪。
- 服务端没把样式文本塞进 HTML
，只返回裸 HTML - 客户端 JS 加载后才调用
extractCritical或extractStyle，此时页面已开始渲染 - 若使用
useEffect注入主题类（如 dark mode），服务端输出的是 light，客户端切 dark，必然跳变
必须在服务端调用 extractStyle 并内联到 HTML
核心动作不是“配置库”，而是“在 Node.js 渲染流程中主动提取并注入”。不同库 API 不同，但模式一致：拿到服务端渲染后的 React 树 → 触发样式提取 → 把结果字符串写进 HTML 字符串的 中。
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
- styled-components：
const styleTags = sheet.getStyleTags()+ 插入 - @emotion/react：
const cssBuffer = renderStylesToString(app)，需配合@emotion/server - @ant-design/cssinjs：
extractStyle(cache)，必须与createCache()配套使用，且 cache 实例要透传到整个渲染树 - Compiled：无需手动提取——它在构建时就把 CSS 打包成静态文件，服务端只需正常输出
<link rel="stylesheet">，天然规避 FOUC
客户端水合前必须复用同一份样式缓存
如果服务端用了 cache A 提取样式，客户端却新建 cache B 再次注入，会导致重复样式、类名冲突、甚至样式覆盖错乱。关键在于“缓存实例复用”和“避免二次注入”。
- Next.js App Router 中，
RootStyleRegistry组件必须用useState(() => createCache())初始化，并通过<styleprovider cache="{cache}"></styleprovider>包裹子树 - 客户端 hydrate 时不能再次调用
extractStyle，否则会重复插入<style></style>；应仅在服务端调用，客户端只负责水合 - 若使用
useServerInsertedHTML（Next.js），务必确保返回的 script 是纯文本插入，不要带额外 wrapper 或事件监听 - 检查最终 HTML 源码：确认
里有内联<style data-emotion> 或 <code>data-ant-css</style>属性的标签，且内容非空
next-themes / 动态主题切换必须服务端对齐
哪怕 CSS-in-JS 本身处理得当，只要主题逻辑在客户端才生效，FOUC 就依然存在。典型表现是浅色主题闪一下再变深色。
- 不要在组件里用
useEffect(() => { document.documentElement.classList.toggle('dark') }) - 必须用
<themeprovider></themeprovider>包裹根布局，并在服务端决定初始 theme（例如读取请求头、cookie 或 fallback 到系统偏好） - tailwind.config.ts 中
darkMode: 'selector'，且服务端输出的必须与客户端一致 - Ant Design 的
ConfigProvider theme={{ ... }}必须和服务端传入的 theme 对象完全相同，包括 token 和 components 配置
最容易被忽略的一点：构建产物中缓存未清导致 extractStyle 返回空字符串——比如 @ant-design/cssinjs 的 cache 实例在多次渲染间被复用或泄漏，或 Vite/Next.js 的模块热更新干扰了 cache 初始化。上线前务必验证生产环境 HTML 源码里是否真有内联样式块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
