ant-design / ant-design/pro-components

🐛[BUG]在SSR的场景下,ProLayout报错`style` did not match

Open
#8,622 3 comments 0 reactions 0 assignees View on GitHub
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
### 🚑 其他信息

image
image

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.