在 React 18 的 server render 中，只要使⽤ pipeToNodeWritable 代替 renderToString 并配合 Suspense 就能解决上⾯三个问题。
使⽤ pipeToNodeWriteable 可以看 这个例⼦。
最⼤的区别在于，服务端渲染由简单的 res.send 改成了 res.socket，这样渲染就从单次⾏为变成了持续性的⾏为。
那么 React 18 的 SSR 到底有怎样的效果呢？这篇介绍⽂档 的图建议看⼀看，⾮常直观，这⾥我简要描述⼀下：
transition用法搭配1. 被 <Suspense> 包裹的区块，在服务端渲染时不会阻塞⾸次吞吐，⽽且在这个区块准备完毕后（包括异步取数）再实时打到页⾯中（以 HTML
模式，此时还没有 hydration），在此之前返回的是 fallback 的内容。
2. hydration 的过程也是逐步的，这样不会导致⼀下执⾏所有完整的 js 导致页⾯卡顿（hydration 其实就是 React ⾥写的回调注册、各类
Hooks，整个应⽤的量⾮常庞⼤）。
3. hydration 因为被拆成多部，React 还会提前监听⿏标点击，并提前对点击区域优先级进⾏ hydration，甚⾄能抢占已经在其他区域正在进⾏
中的 hydration。
那么总结⼀下，新版 SSR 性能提⾼的秘诀在于两个字：按需。
⽽这个难点在于，SSR 需要后端到前端的配合，在 React 18 之前，后端到前端的过程完全没有优化，⽽现在将 SSR HTML 的吞吐改成多次，按需，并且⽔合过程中还⽀持抢占，因此性能得到进⼀步提升。
总结
结合起来看，React 18 关注点在于更快的性能以及⽤户交互响应效率，其设计理念处处包含了中断与抢占概念。
以后提起前端性能优化，我们就多了⼀些应⽤侧的视⾓（⽽不仅仅是⼯程化视⾓），从以下两个应⽤优化视⾓有效提升交互反馈速度：
1. 随时中断的框架设计，第⼀优先级渲染⽤户最关注的 UI 交互模块。
2. 从后端到前端 “顺滑” 的管道式 SSR，并将 hydration 过程按需化，且⽀持被更⾼优先级⽤户交互⾏为打断，第⼀优先⽔合⽤户正在交互的
部分。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。