Next.js12+Antd5页面重载时CSS样式延迟加载问题求助

针对SSR下Ant Design 5动态CSS注入导致的样式加载延迟、视觉闪烁问题，可通过以下步骤解决：

1. 安装配套依赖 #

首先安装AntD5官方的CSS-in-JS工具库，用于服务端样式提取：

npm install @ant-design/cssinjs
# 或
yarn add @ant-design/cssinjs

2. 完善_document.tsx的SSR样式提取逻辑 #

替换现有_document.tsx内容，确保服务端渲染时将AntD样式提前注入HTML，避免客户端动态加载的延迟：

import { Html, Head, Main, NextScript } from 'next/document';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import type { DocumentContext } from 'next/document';

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Document.getInitialProps = async (ctx: DocumentContext) => {
  const cache = createCache();
  const originalRenderPage = ctx.renderPage;

  // 用StyleProvider包裹App，收集SSR期间生成的样式
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => (
        <StyleProvider cache={cache}>
          <App {...props} />
        </StyleProvider>
      ),
    });

  const initialProps = await Document.getInitialProps(ctx);
  // 提取收集到的静态CSS代码
  const styleText = extractStyle(cache, true);

  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        {/* 将静态CSS注入到HTML头部 */}
        <style dangerouslySetInnerHTML={{ __html: styleText }} />
      </>
    ),
  };
};

3. 在_app.tsx中全局配置StyleProvider #

确保客户端渲染时复用样式缓存，避免重复注入样式：

import type { AppProps } from 'next/app';
import { StyleProvider } from '@ant-design/cssinjs';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <StyleProvider>
      <Component {...pageProps} />
    </StyleProvider>
  );
}

export default MyApp;

4. 移除全局CSS引入（关键） #

如果项目中曾经全局引入过AntD旧版样式文件（比如import 'antd/dist/antd.css'），必须删除。AntD5采用CSS-in-JS方案，全局CSS会和动态注入的样式冲突，导致加载延迟或样式异常。

5. 检查Next.js基础配置 #

确保next.config.js启用SWC编译（Next.js 12默认启用），避免Babel编译导致的样式处理异常：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

额外排查点 #

• 生产环境下，检查构建产物的HTML源码，确认是否包含AntD的静态CSS代码，验证服务端提取逻辑是否生效。
• 清除浏览器缓存后测试，避免旧资源干扰样式加载。
• 检查第三方样式库的加载顺序，确保AntD样式优先级高于自定义样式。

内容的提问来源于stack exchange，提问作者moon