SSR 水平不匹配 (服务器和客户端的所有类名不同) 在 6.3.12 中引入,使用 webpack + nodeExternals

** 说明**

在从"6.3.11"升级到"6.3.12"(以及包括"6.4.x"在内的所有后期版本)后,每一个有样式的组件都会在服务器对客户端产生不同的类名,导致React报告整个组件树的水合不匹配. 回到 " 6.3.11 " 解决了这一问题。

** 环境**

QQ 软件包 QQ 版本 |-|-|-. 6.3.12、6.4.0、6.4.1(中断)、6.3.11(工作) | 2.1.4 | | react react 19.2.5 | 网络包装 5.106.2 | |24.14.0分

** 设置**

• ** 服务包**:带目标:节点'+网点-节点-外部'的网包。 服务器不****捆绑 " 一类组件 " ——它在运行时需要()从node modules'装入dist/类组件'.cjs.js'。
• ** 客户捆绑**:装有目标:web''的网络包装。 网页包解决了“浏览器”字段的“包件”。
• 服务器侧渲染使用 " ServerStyleSheet " + " 收集Styles " / " GetStyleTags() " 。
• `babel-plugin-styled-cupers',配置为:真-。

页:1

在开发模式中,React会为树上每个样式组件抛出水合错误. 示例

水分失败,因为服务器提供了HTML不符合客户端.

< 动画  有型动画>
< div 数据
+ className="动画 Styped Animation-sc-14yz3tx-0 gCnCGD" QQ客户端
- ClassName="动画 Styped Animation-sc-14yz3tx-0 fajRrh" QQ服务器
> 翻译:

** 构件ID**( " sc-14yz3tx-0 " )在两侧匹配,证实`babel-plugin类构件 ' 正在生成稳定的构件ID。 只有动力类散列后缀不同,每个组件包括有完全静态CSS(无动态插值)的组件.

在出品模式("process.env.NODE ENV ="出品""出品")中,错误被React默默地吞噬了,但错配现象依然存在(可能出现出错误样式的闪光).

** Root 原因假设**

服务器在运行时装入dist/styled-cuplics.cjs.js'(通过Node.jsrequire'),而网络包则装入dist/styled-cuplics.browser.cjs.js'(通过package.json'中的`browser'字段)。 这两个文件有不同的初始化代码. 其中一个或两个文件的 " 6.3.11 " 和 " 6.3.12 " 之间有些变化,导致内部类别名称散去,使两个不同的模块情况相去甚远。

** 复制步骤**

1. 使用带有 " webpack-node-Externals " 的网页包用于安全部门改革(服务器不捆绑样式组件)。
2. 对客户包使用 " 目标: " 网络 " 网页包(网页包取取 " 浏览器 " 字段- " 类组件. browser.cjs.js " )。
3. 使用ServerStyleSheet'/colleStyles'/`getStyleTags()'进行安全部门改革。
4. 从 " 所谓的组件@6.3.11 " 升级为 " 6.3.12 " 或以后升级。
5. 访问浏览器中任何带有开发模式打开的devtool的SSR已发送页面。

** 预计:** 没有水合警告,类名匹配服务器和客户端. ** 实际:** 水分不匹配 . . . . . . .