Next.jsCSS-in-JSSSR优化方案

本文深入解析了 Ant Design 在 Next.js 中使用 CSS-in-JS（@ant-design/cssinjs）实现服务端渲染（SSR）时的关键机制与常见陷阱，重点揭示样式闪烁（FOUC）并非配置疏漏，而是服务端与客户端样式缓存不一致、版本错配、提取时机不当或水合逻辑脱节所致；从 cache 实例的请求级隔离、extractStyle 的无副作用调用，到 @ant-design/nextjs-registry 的版本对齐难题，再到 App Router 下手动构建 RootStyleRegistry 的实操要点，以及为何 suppressHydrationWarning 无法根治闪屏——所有细节都指向一个核心：SSR 样式水合的本质是服务端生成与客户端复用的精确匹配，任何环节的微小偏差都会在首屏瞬间暴露为视觉断裂，值得每一位追求极致用户体验的 Next.js 开发者逐行审视。

Antd 的 @ant-design/cssinjs 在 SSR 中怎么工作

它不是把样式写进 CSS 文件，而是用 JS 创建样式缓存，在服务端渲染时收集所有组件生成的样式字符串，再注入到 HTML 的