Nuxt3默认不内联首屏关键CSS，导致外链样式未纳入首帧渲染流程而FOUC；修复需用vite-plugin-critical-css等工具内联≤10KB关键样式，并配合@css-render/vue3-ssr收集Naive UI样式，禁用@import和动态插入，确保Content-Type为text/css。
因为 Nuxt3 默认不内联首屏关键 CSS，而外链 <link rel="stylesheet"> 在 SSR + hydration 场景下无法保证样式在首次绘制前就位——这不是加载慢，是浏览器根本没把这部分样式纳入首帧渲染流程。
为什么 SSR 渲染完还是闪
Nuxt3 服务端输出的 HTML 确实包含完整 DOM，但若关键样式（如 .header、.hero、字体定义、CSS 变量）仍靠外链 CSS 加载，客户端 hydration 时会面临两种情况：
- 外链 CSS 还没下载完，浏览器用默认样式渲染首帧（白屏/错位）
- JS 动态插入样式（比如某些 UI 库的 runtime 注入）→ 预加载器看不到它 → 必然 FOUC
- Naive UI 等基于
@css-render的库，若未启用 SSR 收集，样式只在客户端生成，服务端 HTML 里压根没有对应<style>
怎么验证是不是关键 CSS 缺失
打开 Chrome DevTools → More Tools → Coverage → 刷新页面 → 查看哪些 CSS 规则实际被执行（绿色高亮）。重点关注：
-
body背景色是否被覆盖（没覆盖 = 顶部白屏） -
.n-layout、.n-card等 Naive UI 组件类是否出现在绿色区域 -
@font-face是否被标记为未使用（说明字体声明没进内联块） - 有没有大量灰色规则来自
node_modules—— 那是工具没提取干净
最有效的修复动作
不是改构建配置，而是让关键样式在 HTML 解析阶段就“物理存在”于 <head> 里：
立即学习“前端免费学习笔记（深入）”；
- 用
vite-plugin-critical-css或critters插件，在构建时提取并内联首屏必需样式（体积 ≤10KB，无media属性） - 对 Naive UI，必须配合
@css-render/vue3-ssr：在plugins/naive-ui.ts中调用collect()，把服务端收集的样式注入useServerHead({ style: [...] }) - 禁用所有
@import和 JS 动态appendChild(<link>)；确保app.css是静态外链，不参与 runtime 注入 - 检查服务端返回的 CSS 文件
Content-Type是否为text/css，否则浏览器直接拒解析
最容易被忽略的是：内联块里混进了 @media (prefers-color-scheme: dark) 或 url(...) 字体引用——它们会让整个内联样式失效或延迟应用。Coverage 面板离线模式下刷新一次，就能暴露真实问题。
