Fix/ssr full display all invisibly#41
Fix/ssr full display all invisibly#41huan-qiu wants to merge 3 commits intoreact-component:masterfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| let suffixStyle: React.CSSProperties = {}; | ||
| const isFullySSRResponsiveFirstRender = | ||
| fullySSR && shouldResponsive && containerWidth === null; | ||
| const fullySSRFirstRenderStyle: React.CSSProperties = { |
There was a problem hiding this comment.
有点蛋疼，效果感觉也不好。SSR 的时候这块就直接空了也会有 CLS。如果是 SSR Full Render 然后 SSR 的时候 overflow hidden 掉呢？
There was a problem hiding this comment.
在overflow没设置高度下，会有一点shift，因为高度被撑大了。如果有设置的话，就是先空白然后显示，layout上就不会shift。如果是 SSR Full Render + overflow hidden，假设能让 item 是都显示在同一行溢出的话，效果是后面两个item的位置可能会闪一下。这个的前提是要 overflow 这个组件不要 wrap 成多行，目前是会wrap成多行，需要先有高度限制然后来 x y 都overflow hidden。看似都有 tradeoff。
There was a problem hiding this comment.
@zombieJ overflow组件 有接受个style的prop，因此在pr改动的基础上，可以传入height的值来先占好需要的高度。我理解这样做在 fullySSR 就不会有 CLS 的问题。因为 fullySSR 这个问题目前只会影响到 overflow 是水平一行 maxCount 值是RESPONSIVE的时候。看了下 rc-menu 使用 rc-overflow的时候是会传入 style prop的，rc-select 则是没开启 ssr，所以没有这个问题。你康康ok不？
There was a problem hiding this comment.
@zombieJ 如果暂时没有满意的方案，可以先让ssr=full在 menu 那里可以 opt out 吗？即考虑这条 pr react-component/menu#665
Codecov Report
@@ Coverage Diff @@
## master #41 +/- ##
==========================================
- Coverage 98.10% 96.92% -1.18%
==========================================
Files 6 6
Lines 211 228 +17
Branches 72 86 +14
==========================================
+ Hits 207 221 +14
- Misses 4 7 +3
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
2 participants
背景 & 复现方法:
close react-component/menu#665
期许:
在overflow ssr="full" 模式下, 在首次渲染所有 items 内容时, SEO友好且页面不闪烁
代码改动简述:
逻辑部分
在 ssr="full", shouldResponsive 为true时,
让首次 render 时会绘制所有 items(display prop 为true, css 宽度为0);
message channel 执行更新 containerWidth itemWidths 等值(值虽有, 但都为0), 触发第二次 render
第2次 render 时所有 items(但display prop 为false, css 宽度则回归正常), 随后触发 layoutEffect, layoutEffect 更新 displayCount 为 data.length - 1, 同步开始第3次 render, render所有的 items 并绘制(此次display prop 为false, css 宽度正常)
随后等到 message channel 再次执行更新 itemWidths 等值, 触发第4次 render, 此时 itemWidths 赋有正确的值, 因此所有 items(display prop 为 true, css 宽度正常), 后触发 layoutEffect, 更新 displayCount 为正确的计算结果. 同步开始第5次render, 并正确绘制出应该可见的 items
更新 ssr 相关测试