type
Post
status
Published
date
Aug 1, 2024
slug
nextjs-style-ssr
summary
tags
开发
category
技术分享
icon
password
我写的项目在首页登录时会出现样式闪烁问题，下面是我的解决问题的记录。
1、问题复现
下面直接上我的原代码。
可以看到，ant的样式也都是引入了的，刷新时候，css样式全部消失，后面刷新完成后又加载回来了。
2、寻找解决办法
看到也有不少GitHub issues提到这个问题：
试了一下，但都没解决问题，直到后面我看到了这篇：NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题_display:flex的样式在nextjs初始化渲染样式错乱-CSDN博客
成功解决问题，加上样式组件包裹下面的组件即可。
3、思考
为什么加上这个样式组件就可以解决问题了呢，来看看gpt4o对这段代码的解释。
来看看ant design官方文档中相关部分：样式兼容 - Ant Design，服务端渲染 - Ant Design
大概发生这种样式闪烁原因就是NextJs默认是SSR渲染，我们需要先加载ant的样式，然后再去加载组件，加上这个组件包裹就可以保证优先加载相关样式。