React 18 pipeToNodeWritable实现SSR搭配React Redux的方案咨询

核心问题答复 #

createServerData是执行路由匹配、异步Promise等待逻辑的合适位置，你完全可以将传统SSR的Redux数据预取逻辑迁移到这个函数内执行。

具体适配步骤 #

• 首先在createServerData函数内完成请求路径和React Router路由的匹配工作，收集所有命中路由组件约定的异步数据预取方法（比如通常约定的静态loadData方法）
• 按业务需求串行或并行执行所有收集到的预取Promise，将返回的数据通过dispatch存入Redux全局store，等待所有预取Promise执行完毕后，再返回最终的serverData对象
• 服务端渲染App组件时传入已经完成数据预取的Redux store，保证渲染输出的HTML和预取数据完全对应
• 将预取完成的Redux state序列化后插入到HTML初始模板的全局变量中，客户端hydrate阶段直接读取该全局变量初始化客户端Redux store，即可完成服务端到客户端的数据同步、预填充客户端缓存

体验优化方案 #

如果你想要完全发挥React 18流式SSR的性能优势，可以不需要等待所有路由的预取逻辑全部执行完成再开始输出HTML：
将非首屏区块的预取逻辑放在Suspense边界内，配合服务端Suspense能力，实现边加载对应区块的数据边流式输出该区块的HTML，相比传统全量等待预取完成再渲染的模式，能进一步缩短首屏可见时间，提升页面响应速度。

内容的提问来源于stack exchange，提问作者jaybe78