Next.js 应用程序路由器中的 FOUC 了解与修复指南（2025 年版）

FOUC（闪烁未样式内容）是 React 应用程序中的一种视觉故障，在加载过程中，未样式的内容会短暂出现。这种情况发生在 HTML 渲染之前 CSS 应用时，通常是由于服务器渲染的 HTML 和客户端渲染的 UI 之间的不匹配，例如在 Next.js 等框架中。症状包括原始 HTML 在样式生效之前显示，CSS 变量不能立即应用。常见的原因包括动态主题、在共享组件中使用 `Date.now()` 或 `Math.random()`、以及太晚导入 CSS 库。要修复 FOUC，始终在 `layout.tsx` 中导入全局 CSS，以确保样式尽早加载。在 `globals.scss` 中提供回退主题样式可以防止未样式元素闪烁。使用水合保护延迟渲染，直到客户端接管，防止不匹配。避免动态 CSS 导入、在渲染中直接使用 `Date.now()` 或 `Math.random()`、以及在服务器组件中读取 `localStorage` 或 `window`。将服务器逻辑与客户端特定渲染分离，可以消除样式闪烁和水合警告。