extractcritical/extractstyles必须在rendertostring前调用，因为样式缓存仅在渲染期间活跃，之后清空；若后调用则返回空字符串，导致fouc或布局跳变。
服务端渲染（SSR）中提取 CSS-in-JS 样式，关键在于捕获运行时生成的样式规则并注入到 HTML 的 <style></style> 标签中——否则客户端 hydration 会因样式缺失导致 FOUC 或布局跳变。
为什么 extractCritical / extractStyles 必须在 renderToString 前调用
styled-components 和 emotion 等库在 SSR 过程中会把样式收集到一个“样式缓存”里（比如 StyleSheetManager 或 CacheProvider 的实例），但这个缓存只在组件树渲染期间活跃。一旦 renderToString() 执行完毕，缓存中的规则若未显式提取，就会被丢弃。
-
extractCritical()（styled-components）或extractStyles()（emotion）必须包裹整个renderToString()调用，而不是反过来 - 错误写法：
renderToString(...); const { css, ids } = extractCritical();→ 此时缓存已清空，css为空字符串 - 正确顺序：先调用
extractCritical(() => renderToString(...))，让渲染过程触发样式收集 - emotion v11+ 使用
renderStylesToString()替代旧版extractStyles()，API 更明确
styled-components 中 extractCritical 返回的 css 字符串不包含 @font-face 或 @keyframes
默认情况下，extractCritical() 只提取实际被渲染组件用到的样式规则（即“critical CSS”），而 @font-face、@keyframes、全局 @media 等不会被自动包含——即使它们定义在某个 styled 组件内，只要没被当前页面组件树引用，就不会输出。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 解决办法：手动将全局样式通过
createGlobalStyle注入，并确保它在 SSR 渲染的组件树中被挂载（哪怕只是空 div 包裹） - 或者改用
ServerStyleSheet+collectStyles()（v6+ 推荐），它能更可靠地捕获所有声明，包括全局规则 -
ServerStyleSheet实例必须在每次 SSR 请求中新建，不可复用，否则样式会累积污染后续请求
emotion 提取时 class 名重复或 hydration 失败
客户端 hydration 阶段样式失效，常见原因是服务端和客户端的 cache 实例不一致，导致 class 名哈希值不同。emotion 默认使用 cache 实例管理样式注入，SSR 和 CSR 必须共享同一 cache 引用。
- 服务端需创建唯一 cache 实例：
const cache = createCache({ key: 'css' }); - 渲染时传入：
<cacheprovider value="{cache}">{app}</cacheprovider> - 客户端初始化时，必须复用服务端传递的
cache对象（通常通过 window.__EMOTION_CACHE__ 注入），而非新建 - 若用 Next.js，推荐直接用
@emotion/server的renderStylesToString，它会自动处理 cache 序列化与反序列化 - 注意：
key参数必须和服务端一致，否则 class 名前缀不同，hydration 时无法匹配
真正容易被忽略的是 cache 生命周期和跨请求隔离——尤其在 Node.js worker 多实例或 serverless 环境下，全局缓存变量会导致样式错乱；每个请求都该有独立 cache 实例，且不能依赖模块级单例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
