服务端渲染时CSS应内联至HTML的标签中以避免FOUC，需确保注入顺序、客户端hydration时精准移除、class名一致及样式优先级正确，而非简单拼接字符串。
Node服务端渲染时，CSS字符串怎么塞进HTML的<style></style>标签里
直接拼接字符串最常见也最容易出错。关键不是“能不能塞”，而是“塞完浏览器会不会重绘、服务端要不要缓存、同构时样式是否闪动”。
典型做法是把构建阶段提取的css内容读成字符串，在res.send()前注入到HTML模板的里：
const cssContent = fs.readFileSync('./dist/main.css', 'utf8');
const html = template.replace('</head>', `<style id="ssr-css">${cssContent}</style></head>`);
- 务必用
id="ssr-css"或类似标识，客户端 hydration 时可精准移除，避免重复插入 - 不要用
<link rel="stylesheet">——它触发异步加载，SSR首屏会先无样式渲染（FOUC） - 如果使用
webpack+MiniCssExtractPlugin，注意它默认不生成 CSS 字符串，得靠css-loader的exportOnlyLocals: false配合toString()提取，或改用extract-css-chunks-webpack-plugin支持 SSR 友好输出
Vue SSR中renderToString后如何获取组件内联样式
Vue 2 的vue-server-renderer和 Vue 3 的@vue/server-renderer都提供renderStyles能力，但行为不同：Vue 2 需手动调用renderer.renderStyles，Vue 3 则必须用renderToString(app, { styleSheets })并开启styleSheets选项。
- Vue 2 示例：
const app = createApp(); const renderer = createRenderer(); const context = {}; const html = await renderer.renderToString(app, context); const styles = renderer.renderStyles(context); // ← 这一步不能漏 - Vue 3 中若没传
{ styleSheets: true }，context.styles始终为空，且不会自动收集<style scoped></style>内容 - 如果用了
useCssModule或defineStyle等新 API，需确认目标构建工具（如 Vite）是否在 SSR 模式下保留了样式收集逻辑
React SSR中ReactDOMServer.renderToString不输出CSS怎么办
React 本身不处理样式，所以“不输出”是正常现象——它只管 HTML 结构。CSS 注入完全依赖你用的样式方案。
立即学习“前端免费学习笔记（深入）”；
- 用
styled-components：必须搭配ServerStyleSheet，且collectStyles要包裹整个App组件，漏掉一层（比如忘了包Router）就会漏样式 - 用
emotion：启用@emotion/server的renderStylesToString，但要注意cache实例必须和服务端每次请求隔离，否则多用户样式会混在一起 - 用普通
import './index.css'：Webpack 打包时若用了style-loader，它在 Node 环境下直接报错；必须换为css-loader+ 提取逻辑，或改用mini-css-extract-plugin并确保其在target: 'node'下被禁用
注入CSS后发现样式优先级错乱或被覆盖
根本原因不是“塞的位置不对”，而是服务端注入的<style></style>标签在 DOM 中的顺序，影响了 CSS cascade 计算。
- 如果 HTML 模板里已有其他
<style></style>或<link>，确保 SSR 注入的<style></style>在它们之后（即靠近），否则会被前面的规则压制 - 使用 CSS-in-JS 时，服务端生成的 class 名（如
css-1a2b3c）必须和客户端 hydration 时一致，否则样式丢失——这要求cache或sheet实例在每次请求中唯一，且不能跨请求复用 - 动态主题切换类场景下，服务端注入的 CSS 若含
:root变量，需确认客户端 JS 是否在 hydration 后立即重写了这些变量，导致闪动
真正麻烦的从来不是“怎么塞进去”，而是“塞进去之后，客户端不再重新计算样式”。一旦漏掉 hydration 清理、class 名不一致、或<style></style>位置被模板引擎意外挪动，就只能靠 DevTools 逐行比对document.styleSheets了。
