css-in-js 的 ssr 必须服务端提取并内联样式、客户端禁止重复注入、主题需服务端预判对齐，且 cache 实例必须全程唯一，否则必然 fouc。
不能“完美实现”，只能“不闪”。CSS-in-JS 的 SSR 本质是避免 FOUC（Flash of Unstyled Content），而 FOUC 在未显式提取并内联样式时必然发生——不是配置对不对，而是提没提取、有没有复用缓存。
服务端必须调用 extractStyle 并内联到 HTML head
CSS-in-JS 库（如 @emotion/react、styled-components、@ant-design/cssinjs）默认不输出样式文本到服务端 HTML，只在客户端 JS 执行时动态插入 <style></style>。浏览器先画无样式 DOM，再补样式，视觉上就是一闪。
-
@emotion/react需搭配@emotion/server，用renderStylesToString(app)提取字符串，拼进 -
styled-components要初始化ServerStyleSheet，调用sheet.collectStyles()+sheet.getStyleTags()，再注入模板 -
@ant-design/cssinjs必须用extractStyle(cache)，且cache实例需与客户端创建的完全一致 - 最终 HTML 源码里必须看到
<style data-emotion> 或 <code><style data-ant-css</style>标签，否则提取失败
客户端 hydrate 时禁止二次注入样式
服务端已把样式塞进 HTML，客户端水合阶段若再执行 extractStyle 或新建 cache，会重复插入 <style></style>，导致类名冲突、样式覆盖错乱，甚至 layout shift。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- Next.js App Router 中，
RootStyleRegistry必须用useState(() => createCache())初始化，确保服务端和客户端共享同一实例 - 不要在
useEffect里调用任何样式提取函数；hydrate 是纯接管过程，不生成新样式 - 若使用
useServerInsertedHTML，返回值必须是纯字符串，不能包裹<script></script>或加事件监听 - 检查 DevTools Elements 面板：
里只应有一组 emotion/ant-css style 标签，且无重复
主题切换（如 dark mode）必须服务端对齐逻辑
如果主题由 useEffect + localStorage 或媒体查询触发，服务端无法感知，输出的必然是默认主题（比如 light），客户端 hydrate 后立刻切 dark，造成视觉跳变。
- 服务端需通过请求头（如
Sec-CH-Prefers-Color-Scheme）、cookie 或用户 agent 推断主题倾向，并提前注入对应 class 到或 - 避免在组件内用
useEffect注入主题 class；应统一由根布局组件根据服务端传入的themeprop 渲染 - 若用 CSS 变量控制主题，确保变量定义也走 SSR 提取流程（
@emotion支持，styled-components需手动注入）
最容易被忽略的是 cache 实例生命周期——它必须跨服务端渲染、HTTP 响应、客户端 hydration 全程唯一。一旦在客户端 new 一个新 cache，FOUC 就回来了，而且很难定位，因为错误现象只是“偶尔闪一下”或“某些页面不闪某些闪”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
