ant-design / ant-design/pro-components
🐛[BUG]在SSR的场景下,ProLayout报错`style` did not match
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
### 🐛 bug 描述
在使用Nextjs14.14 中使用ProLayout,会报错`style` did not match和Hydration failed because the initial UI does not match what was rendered on the server.
如果这部分确实需要SSR的话,应该如何处理呢?
### 📷 复现步骤
在nextjs14的版本中使用ProLayout 100%的复现。
### 🏞 期望结果
不要有这种报错
### 💻 复现代码
https://github.com/ideaviewes/pro-layout-test.git
### © 版本信息
- ProComponents 版本: 2.7.14
- umi 版本:未使用
- 浏览器环境: chrome 127.0.6533.89(正式版本) (arm64)
- 开发环境 [e.g. mac OS] macos m1 pro
- nextjs版本:14.1.4
- react版本:18
### 🚑 其他信息
Contributor guide
Research direction
Start with the reproduction repository at https://github.com/ideaviewes/pro-layout-test.git and reproduce the `style` did not match and hydration errors using Next.js 14.1.4, React 18, and ProComponents 2.7.14. Compare the server-rendered and client-rendered ProLayout output; done means the reported SSR scenario no longer emits either error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100