umi fix(ssr): render same root in server

Background

https://github.com/ant-design/ant-design/issues/46517

在 Umi SSR 下使用 React 18 的 useId 时会出现 client 和 server 不一致的情况，但是根据 useId 的描述只要 fiber 树一致结果就应该是相同的。

检查发现 Server 渲染的 root 是从 html 开始的 (ref)，而 hydrateRoot 是从 document.getElementById('root') 开始注水的 (ref)，所以导致两边 fiber 树不一致，useId 得到的结果也不同。

Solution

~~renderToPipeable 接受的 jsx 改为从 <div id="root"> 开始的节点，与 client 一致，外层的 html 由字符串拼接。~~

根据文档，使用 renderToPipeableStream 需要传入整个 html 作为渲染组件，同时 hydrateRoot 也同样需要接受 html 作为注水组件，并且 dom 节点需要指定为 document。所以在注水阶段给 <Browser /> 套了一层 server 同样的 <Html> 来保证 ReactDOM 深度一致。但是由于客户端缺少信息，注水时在 head 中会有一些 html 不一致的警告：但是并不影响注水，生产下该警告会消失。这个问题暂时可以忽略，因为之前也不一致，只不过注水没有经过 html 元素。

Dec 26 '23 02:12 MadCcc

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
umi	⬜️ Ignored (Inspect)	Visit Preview		Jan 12, 2024 2:16am

Dec 26 '23 02:12 vercel[bot]

Codecov Report

Attention: 7 lines in your changes are missing coverage. Please review.

Comparison is base (76eb589) 28.77% compared to head (04dff5b) 28.76%.

Files	Patch %	Lines
packages/renderer-react/src/server.tsx	0.00%	4 Missing :warning:
packages/renderer-react/src/browser.tsx	0.00%	2 Missing :warning:
packages/server/src/ssr.ts	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #12002      +/-   ##
==========================================
- Coverage   28.77%   28.76%   -0.01%     
==========================================
  Files         489      489              
  Lines       14962    14965       +3     
  Branches     3554     3556       +2     
==========================================
  Hits         4305     4305              
- Misses       9891     9894       +3     
  Partials      766      766

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

Dec 26 '23 02:12 codecov[bot]

原来的代码有一些冗余导入，我个人不太喜欢，给整合到一起了，我认为滥用 getXXX 这种名字的方法不是好习惯，随便一个方法我就叫它 getXXX 很啰嗦，应该更优雅的整合一些。

Dec 27 '23 05:12 fz6m

any progress ?

Apr 01 '24 08:04 li-jia-nan

umi umi copied to clipboard

fix(ssr): render same root in server

Background

Solution

Codecov Report

umi
umi copied to clipboard