解决 Next.js 引入 Antd Design SSR 服务端渲染样式丢失、首屏闪烁问题

望舒的头像
望舒
标签：
Next.jsAntd DesignSSR服务端渲染样式丢失首屏闪烁

在使用 Next.js 进行服务端渲染时，如果引入 Antd Design，可能会遇到样式丢失或者首屏闪烁的问题。这是因为 Antd Design 使用了 CSS-in-JS 技术，而 CSS-in-JS 的样式需要额外的处理才能正确渲染。为了解决这个问题，可以通过重写 Next.js 的 _document.js 来处理样式提取和注入。

代码解决示例

通过在 Document.getInitialProps 中进行缓存创建，并将生成的样式提取出来并注入到 HTML 中，可以解决样式丢失和首屏闪烁问题。以下是处理代码：

复制
展开
Document.getInitialProps = async (context: DocumentContext) => {
    const cache = createCache();
    const originalRenderPage = context.renderPage;
    context.renderPage = () =>
        originalRenderPage({
            enhanceApp: (App) => (props) => (
                <StyleProvider cache={cache}>
                    <App {...props} />
                </StyleProvider>
            ),
        });

    const initialProps = await Document.getInitialProps(context);
    const style = extractStyle(cache, true);
    return {
        ...initialProps,
        styles: <>
            {initialProps.styles}
            <style dangerouslySetInnerHTML={{__html: style}}/>
        </>
    };
};

通过这种方式，Antd Design 的 CSS-in-JS 样式会被正确地在服务端渲染时提取和注入，避免了页面加载时的样式丢失和首屏闪烁现象。

Antd Design 官方解决文档说明

Ant Design 官方已经提供了相关的解决方案，详细内容可以参考 Ant Design 的官方文档，该文档详细说明了如何在 Next.js 中使用 Ant Design 进行 SSR。

解决 Next.js 引入 Antd Design SSR 服务端渲染样式丢失、首屏闪烁问题

作者：https://blog.xn--rpv331d.com/望舒

链接：https://blog.xn--rpv331d.com/望舒/blog/104

转载注意保留文章出处...

‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌‌​‌​​‌‌​​‌​​‌​‌‌​‌​‌‌​‌​‌‌​‌​‌‌​​​​​​‌​​​​‌​‌​‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​​‌‌‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​​‌​​‌​​‌​‌​​​‌‌​​​‌​​‌​‌​‌‌‌‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌​‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​​‌‌‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​​‌​​‌​​‌​‌​​​‌‌​​​‌​​‌​‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌​‌‌​​​‌‌‌‌​​‌‌‌​‌​​‌‌‌​​‌‌‌​​​​​​​​​​​‌​​​​‌​‌​‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​​‌‌‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​​‌​​‌​​‌​‌​​​‌‌​​​‌​​‌​‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​​‌‌‌‌​‌‌‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌​‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌‌‌​​‌‌‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​​‌​​‌​​‌​‌​​​‌‌​​​‌​​‌​‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌​​‌​‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌​‌‌‌​‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​​‌‌‌‌​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌‌‌‌‌​​‌‌‌​‌‌​‌‌‌​‌‌‌​‌‌‌‌‌​‌​‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌‌​‌​‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌‌​‌‌‌​‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌‌‌​​​‌‌‌‌​‌​​‌‌‌‌‌​​​​‌‌‌​‌​​​‌‌‌‌‌‌​‌‌​‌​‌‌‌‌​​‌​‌‌‌‌‌​​‌​​​​​‌‌‌​‌​​‌‌​​‌​​​​​​‌‌‌​​‌​​‌‌‌​​​‌‌​‌‌​‌​​​‌​​​​​​​‌​‌‌‌​​‌​‌‌‌‌​​​‌‌‌‌​‌‌‌‌​‌​‌​​​​‌‌‌‌​‌​​‌​​‌​‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌‌‌‌‌​‌‌‌​‌‌‌‌‌​‌‌‌‌‌​‌‌‌‌‌‌‌‌​​‌​‌‌‌‌‌‌‌​​‌‌‌‌‌‌‌‌‌‌​‌‌‌​‌‌‌‌​​‌‌‌‌
No data