SSR中必须内联CSS到<style>标签而非<link>，否则因CSS异步加载导致首屏FOUC；需构建时提取CSS、服务端注入带唯一id的<style>、客户端hydration时精准移除。
服务端渲染时不能用 <link rel="stylesheet"> 引入 CSS，否则首屏必然 FOUC（样式闪动）；必须内联 CSS 字符串到 <style> 标签中，并确保客户端 hydration 时能精准移除重复样式。
为什么 SSR 中 <link> 会导致 FOUC
浏览器遇到 <link rel="stylesheet"> 会发起异步 HTTP 请求，HTML 解析和渲染不等它完成就继续——服务端返回的 HTML 里没有样式，页面先以无样式状态渲染一次，等 CSS 加载完再重绘。这就是 FOUC（Flash of Unstyled Content）。SSR 的核心价值之一就是消除这个闪动，所以必须绕过网络加载环节。
- 即使 CSS 文件在 CDN 上、缓存命中率高，仍存在 DNS 查询、TCP 握手、TTFB 等不可控延迟
- 服务端无法控制客户端是否启用缓存或是否清除了本地 CSS 缓存
- 使用
preload或prefetch也解决不了“首次渲染无样式”问题，它们只是优化后续加载
如何安全地把 CSS 字符串注入 HTML 模板
关键不是“怎么塞”，而是“塞得准、塞得稳、塞完不冲突”。最简可行路径是：构建阶段提取 CSS 内容 → 服务端读取字符串 → 注入到 <head> 中带唯一 id 的 <style> 标签里。
- 用
fs.readFileSync('./dist/main.css', 'utf8')读取构建输出的 CSS 文件（确保构建产物已生成且路径正确） - 注入时必须加
id="ssr-css"或类似标识，例如：<style id="ssr-css">${cssContent}</style> - 替换位置要精确，推荐用
template.replace(//, `<style id="ssr-css">${cssContent}</style>`)，避免正则误匹配其他内容 - 不要用
document.write或拼接 DOM 字符串的方式——服务端没有document对象
使用 css-modules 时的常见陷阱
Node.js 环境下 require('xxx.module.css') 会直接报错，因为 Webpack loader（如 css-loader）不在服务端运行。你不能指望服务端“解析” CSS Modules，只能靠构建阶段导出结果。
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
立即学习“前端免费学习笔记（深入）”；
- Webpack 配置中对服务端环境禁用
MiniCssExtractPlugin.loader，改用css-loader/locals或设置exportOnlyLocals: true - 真正需要的 CSS 字符串，应由构建时提取（例如通过
extract-css-chunks-webpack-plugin输出.css文件，或用css-loader的toString()能力配合构建脚本导出 JSON + CSS 双产物） - 若用了
css-loader的modules: true，服务端只负责读取已生成的全局 CSS（非模块化部分），模块化 class 名映射应完全交给客户端运行时处理
客户端 hydration 时必须移除 SSR 注入的 <style>
如果客户端 JS 启动后又加载了同一份 CSS（比如通过 import './index.css'），浏览器会同时存在两份相同规则，不仅浪费，还可能因优先级或顺序导致样式覆盖异常。hydration 阶段必须主动清理服务端注入的那块。
- 在客户端入口文件（如
index.js）顶部加逻辑：const ssrStyle = document.getElementById('ssr-css'); if (ssrStyle) ssrStyle.remove(); - 移除时机很重要：必须在任何 CSS-in-JS 库（如 styled-components）或样式加载逻辑执行前完成
- 若用 React，可封装成一个
SSRCleanup组件，在useEffect中执行，但注意 SSR 环境下useEffect不执行，所以它天然只在客户端运行
最容易被忽略的是：CSS 字符串注入和客户端移除之间的时间窗口。哪怕只有几毫秒，也可能被用户感知为样式跳变——尤其当服务端注入的 CSS 包含过渡动画或字体声明时。务必验证整个链路：构建产出 → 服务端读取 → 模板注入 → 客户端启动 → 移除动作执行，缺一不可。
