使用antd时存在样式闪烁问题

[WankkoRee]

详细描述你的问题

模板使用了midway-react18-ssr，环境是Windows 11+Node v18.16.0，包管理工具是yarn 1.22.19。

通过yarn add antd安装antd后，在web/pages/index/render.tsx添加了<Button type="primary">Button</Button>及import { Button } from 'antd'。

• 尝试运行yarn run start，发现首屏按钮无样式大概半秒不到，才会渲染antd样式。
• 尝试运行yarn run start:vite，发现首屏按钮无样式大概一秒多，才会渲染antd样式。
• 尝试运行yarn run prod，发现首屏按钮无样式大概半秒不到，才会渲染antd样式。
• 尝试运行yarn run prod:vite，发现首屏按钮无样式大概半秒不到，才会渲染antd样式。

期望的结果

样式正常初始化。

当前使用的版本

yarn list v1.22.19
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ ssr-common-utils@6.2.89
├─ ssr-core@6.2.24
├─ ssr-deepclone@1.0.1
├─ ssr-hoc-react18@6.2.11
├─ ssr-mini-css-extract-plugin@1.6.3
├─ ssr-plugin-midway@6.2.20
├─ ssr-plugin-react18@6.2.65
├─ ssr-serialize-javascript@6.0.4
├─ ssr-types@6.2.46
├─ ssr-vite-plugin-style-import@2.0.1
├─ ssr-webpack@6.2.11
├─ ssr@6.2.48
├─ ssri@7.1.1
└─ webpack@4.46.0
   └─ ssri@6.0.2
Done in 0.62s.

复现仓库地址

https://github.com/WankkoRee/demo1

你本人对问题可能的原因判断(如果你能大概判断的话)

未知

[zhangyuang]

用antd4.x或者5.0.0吧 antd 5.x用了css in js 的方案处理样式比较麻烦。4.x是ok的

5.0.0版本之前试过是没有问题，不确定他们后续做了什么更新

[WankkoRee]

尝试了5.0.0，确实是正常的，然后上5.0.1就有FOUC问题了。

[zhangyuang]

参考 https://ant.design/docs/blog/extract-ssr-cn ，目前没有计划支持antd5.x的这种需要手动特殊化处理的形式，建议使用4.x

[WankkoRee]

我尝试使用 https://ant.design/docs/react/customize-theme-cn#内联方式 进行手动水合，并且稍作修改以适应ssr，发现效果还行，性能似乎有所下降（首页就一个antd的按钮，请求耗时从30ms+到50ms+，不确定后期复杂页面性能是否会严重下降）。

commit: https://github.com/WankkoRee/demo1/commit/5f6865f0ce4058b76aacaf1f2dcc316febb5a880

---

另外，antd后续版本似乎与vite不太兼容，打开后一直pending。 后续等了好久出来了，单纯就是慢。

---

还有一个问题，react插件是否还不支持react-router-dom的v6.x.x，尝试更新后发现会报错：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
unhandledRejection Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[zhangyuang]

react插件不支持react-router-dom 6.x，现在底层用的是5.x。这个是breaking change，擅自更新会影响到之前的用户，暂时没有更新的打算

[zhangyuang]

这种运行时的收集style以来的行为肯定会影响性能的，所以这里一般都要做一些缓存逻辑

[WankkoRee]

了解，谢谢。