react 18流式ssr要求css-in-js样式必须在html流开始前注入，否则导致hydration mismatch或白屏；styled-components需用serverstylesheet.collectstyles()+getstyletags()手动注入，@emotion则须服务端客户端cache配置完全一致。
React 18 的流式渲染（Streaming SSR）和 renderToPipeableStream 要求样式必须在 HTML 流开始前就确定并注入到 ，而多数 CSS-in-JS 库默认的运行时注入机制与此冲突——样式生成被推迟到组件首次执行、甚至挂载后，导致流式 HTML 中缺失关键样式，触发 hydration mismatch 或白屏。
流式 SSR 要求样式“提前就位”，但 CSS-in-JS 默认“按需生成”
流式渲染会把 HTML 分块推送到客户端，首屏内容可能在 JS 还没下载完时就开始解析绘制。此时浏览器需要完整的初始样式（尤其是首屏组件的 class 规则）来正确渲染；但 styled-components 或 @emotion/styled 在服务端调用 renderToString() 时，若未显式收集样式，就不会生成任何 <style></style> 标签——因为它们的样式逻辑绑定在组件函数体内，不执行组件就不触发规则提取。
- 错误现象：
Warning: Prop `className` did not match+ 首屏无样式闪动 - 根本原因：服务端输出的 HTML 中 class 名（如
sc-aBzDl）与客户端 JS 执行后生成的 class 名不一致，或压根没注入对应样式表 - 典型误用：
ServerStyleSheet实例复用、漏调getStyleTags()、或在流式上下文中仍用客户端式注入逻辑
styled-components 流式场景必须用 pipe + collectStyles 双重包裹
不能只靠 renderToPipeableStream 自动处理样式——它不感知 CSS-in-JS。必须手动将组件树包进 ServerStyleSheet.collectStyles()，再把生成的 style 字符串通过 pipe 的 onShellReady 注入到流首部。
- 必须每次请求新建
ServerStyleSheet实例，重复使用会抛出Can't collect styles once you've consumed... -
collectStyles()返回的是 React 元素，不是字符串；需额外调用sheet.getStyleTags()获取 HTML 片段 - 该字符串必须塞进
，且位置要在<script></script>加载前，否则客户端 hydration 读不到服务端 class 映射 - 示例关键链：
const sheet = new ServerStyleSheet(); const stream = renderToPipeableStream(sheet.collectStyles(<app></app>), { onShellReady() { res.write(`${sheet.getStyleTags()}`); } });
@emotion 在流式中需配合 CacheProvider 和服务端 createCache
@emotion/react 不依赖 ServerStyleSheet，但要求服务端与客户端 cache 实例完全一致（包括 key、nonce、insertionPoint），否则 class 名 hash 不同，hydration 直接失败。
- 服务端必须用
createCache({ key: 'emotion', stylisPlugins: [] })创建 cache，并传给CacheProvider - 客户端必须用**完全相同配置**重建 cache，不能依赖默认值——比如服务端设了
nonce，客户端没设，class 名就会变 - 流式中不能用
renderStylesToString()替代CacheProvider包裹，前者只生成字符串，不建立运行时 cache 映射，客户端 hydration 仍会重新计算 class - 开发环境（
process.env.NODE_ENV === 'development'）下 emotion 会加调试前缀，务必确保服务端也走 dev 构建，否则两端 class 名结构不一致
流式渲染对 CSS-in-JS 来说不是“加个插件就能跑”，而是强制暴露了样式生成时机与 hydration 一致性之间的强耦合关系——任何一个环节（实例生命周期、cache 配置、注入位置、环境变量）错配，都会让 class 名在服务端和客户端彻底脱钩。这比传统 SSR 更敏感，也更难 debug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
