如何在React SSR服务端渲染时无缝收集并注入CSS？-css教程-PHP中文网

React SSR 中 CSS 收集与注入需显式管理：服务端每次请求新建 ServerStyleSheet，collectStyles 包裹整树，seal 后用 getStyleTags 插入 HTML head；客户端 hydrate 前必须调用 StyleSheet.rehydrate()；Ant Design 需用 AntDesignRegistry 替代；流式渲染须用 interleaveWithNodeStream。

如何在react ssr服务端渲染时无缝收集并注入css？

React SSR 中 CSS 收集和注入不是“自动发生”的，必须显式创建样式收集上下文，并确保服务端与客户端使用同一实例或注册机制，否则必然出现 FOUC 或 hydration 不匹配。

ServerStyleSheet 必须在每次请求中新建

很多人把 ServerStyleSheet 实例挂到全局或模块缓存里复用，这是错的。Node.js 服务器是多请求并发的，共享一个 sheet 会导致样式污染（A 请求的组件样式混进 B 请求的 HTML）。

每次 HTTP 请求进入时，都要调用 new ServerStyleSheet()
用 sheet.collectStyles() 包裹整个 React 树，不能只包部分组件
渲染完成后必须调用 sheet.seal()（可选但推荐），防止后续误操作
最后务必调用 sheet.toString() 或 sheet.getStyleTags() 提取样式，再手动插入到 HTML 的中

客户端 hydrate 前必须调用 `StyleSheet.rehydrate()`

服务端输出的标签，客户端不会自动识别。如果不主动调用 rehydrate()，styled-components 会重新生成一套新类名，导致样式丢失、FOUC、甚至 React 报 warning：「Prop `className` did not match」。

在客户端入口（如 index.tsx）中，import { StyleSheet } from 'styled-components'
在 ReactDOM.hydrateRoot() 之前，执行 StyleSheet.rehydrate(window.__NEXT_DATA__?.styles || [])（Next.js 场景）或更通用的 StyleSheet.rehydrate(document.querySelectorAll('style[data-styled]'))
注意：Next.js 13+ App Router 默认不暴露 window.__NEXT_DATA__.styles，需配合 @ant-design/nextjs-registry 或自定义 getInitialProps 注入

Ant Design 用户请直接用 `AntDesignRegistry`

Ant Design 的样式是通过 css-in-js + 动态 token 注入实现的，自己套 ServerStyleSheet 无法捕获其内部 useStyle 生成的规则。官方方案就是绕过 styled-components 的机制，改用独立注册表。

Reactivation Specialist · 流失召回

适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p

下载

必须用 {children} 包裹整个应用（包括 RootLayout）
该组件内部会拦截所有 Ant Design 组件的样式收集，并在服务端完成时注入标签
它不依赖 styled-components，也不和 ServerStyleSheet 冲突，但二者不能混用同一组件树——比如不要在 AntDesignRegistry 内再套 styled.div 的 SSR 收集逻辑
如果你同时用了 Ant Design 和自定义 styled-components 组件，需要分别处理：前者走 AntDesignRegistry，后者走 ServerStyleSheet + rehydrate()

流式渲染（Streaming）下不能用 `renderToString`

当使用 renderToPipeableStream 或 renderToReadableStream 时，ServerStyleSheet 的 collectStyles 会失效——因为流式渲染不等整棵树完成就吐出 chunk，而 collectStyles 是同步收集器。

必须改用 interleaveWithNodeStream（styled-components v6+）或 interleaveWithStream（v7+）
示例：const sheet = new ServerStyleSheet(); const stream = sheet.interleaveWithNodeStream(renderToPipeableStream(...))
此时 sheet.getStyleTags() 不可用，样式会随每个 HTML chunk 自动注入，客户端仍需 rehydrate()
Next.js App Router 的 streaming 默认启用，所以如果你开了 export const runtime = 'edge' 或用了 Suspense + loading.tsx，就得确认你用的是流式适配 API

最容易被忽略的是：服务端收集的样式是否真的进了最终返回的 HTML ——很多人只写了 sheet.getStyleTags()，却没把它拼进 res.send() 的字符串里，或者在 Next.js 中忘了在 generateStaticParams 或 generateMetadata 之外手动注入。样式不在 HTML 中，hydration 就永远对不上。