首屏样式丢失是因服务端未注入样式，serverstylesheet须每次请求新建实例；collectstyles需包裹顶层组件并插入；服务端与客户端class名必须完全一致，依赖相同版本、生产环境变量、完整theme及统一构建配置。
首屏样式丢失不是“没加载完”，而是服务端压根没把样式塞进 HTML 字符串里——ServerStyleSheet 用错一次，首屏就闪。
ServerStyleSheet 必须每次请求新建实例
Node.js 服务器是长生命周期进程，若在模块顶层写 const sheet = new ServerStyleSheet()，这个实例会被多个请求共享。一旦被 consume 过，后续调用 collectStyles() 就会直接报错：Can't collect styles once you've consumed a ServerStyleSheet's styles!，且样式完全不生成。
- ✅ 正确做法：在 Express 的
res.render回调、Next.js Pages Router 的getInitialProps或自定义 SSR 函数内部，每次渲染前调用new ServerStyleSheet() - ❌ 错误做法：在文件顶部声明 sheet 并到处 import，或在中间件外初始化
- ⚠️ Next.js App Router 场景下，
ServerStyleSheet基本不可用——它不兼容 React Server Components 的流式渲染模型
collectStyles 必须包裹整个 App 树，且 getStyleTags() 要插入 HTML 的
collectStyles 不是装饰器，它是个收集器：只有被它包裹的组件树中实际渲染的 styled 组件，其样式才会被捕获。漏掉任意一层（比如只包了某个子组件），对应样式就永远不会出现在服务端输出中。
- ✅
sheet.collectStyles(<app></app>)必须作用于顶层入口组件，不能只包<header></header>或<main></main> - ✅
sheet.getStyleTags()返回的是字符串，必须作为<style></style>标签插入最终返回的 HTML 字符串的内，不能丢弃、不能插到底部 - ⚠️ 在 Next.js Pages Router 中，需通过
props.styles透传，并在_document.tsx的中渲染；App Router 则需放弃该方案，改用@emotion/server或静态提取
客户端 hydration 前 class 名必须严格一致
服务端吐出的 class 名（如 sc-aBvKx bXQqJF）和客户端 JS 执行后生成的 class 名只要有一个字符不同，React 就判定 DOM 不匹配，跳过样式复用，强制重绘——FOUC 立刻发生。
- ✅ 确保服务端和客户端使用**完全相同版本**的
styled-components（检查package-lock.json，避免 v5/v6 混用） - ✅ 生产环境必须设
process.env.NODE_ENV = 'production'，否则服务端不 hash class 名，客户端却按 hash 规则找，必然失败 - ✅ theme 对象必须在服务端完整传入（不能依赖
useEffect或localStorage），动态插值如color: ${props => props.theme.primary}必须两端输入完全一致 - ⚠️ 最易被忽略的是 theme 结构细节：服务端传
{primary: '#007'}，客户端却读到{primary: undefined}，哪怕只差一个undefined，哈希就全变了
构建与运行时配置必须统一
开发环境可能一切正常，但构建后出问题，往往是因为 Babel 插件没启用，或服务端/客户端用了不同 hash salt。
- ✅ 确认
.babelrc或babel.config.js启用了babel-plugin-styled-components，且ssr: true已开启 - ✅ Next.js 用户注意：app 目录下 SSR 默认启用，但若手动集成，需显式传入
fileName和displayName保证哈希稳定 - ✅ 禁用开发专用行为：比如
process.env.NODE_ENV === 'development'下加的额外前缀，在服务端走 production 构建时会导致 class 名不匹配 - ⚠️ 动态插值中禁止出现非确定性值：
Date.now()、Math.random()、useState、useContext返回的运行时状态都会破坏一致性
真正卡住人的地方，往往不在代码怎么写，而在 theme 注入时机、props 默认值处理、或构建配置两端是否真的对齐——class 名哈希只差一个字符，浏览器就当它不存在，FOUC 就不可逆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
