React 流式 SSR 解决什么问题?
解释 renderToPipeableStream 的壳、Shell、Suspense 和错误处理边界,区分流式输出与客户端 hydration。
参考答案
流式 SSR 可以先发送已经准备好的 HTML 壳,再随着数据或组件准备完成继续输出内容,从而缩短首字节到可见内容的等待。Suspense 边界帮助服务器和客户端表达哪些部分可以稍后补齐。
流式输出不是“服务端生成后就能交互”。浏览器仍需要加载脚本并完成 hydration,事件才能接管;服务端和客户端的初始内容必须一致,否则会出现 hydration mismatch。错误处理要区分 Shell 发送前后,因为响应状态码和已经发送的字节无法同样处理。
生产实现还要处理请求取消、客户端断开、缓存、数据权限和代理是否支持长连接。不要把流式 SSR 当成所有页面的默认优化,先测量真实首屏和交互指标。