React Server Component中response.readRoot()的替代方案及渲染问题

一、response.readRoot()的替代方式 #

React Server Components（RSC）API更新后，原response.readRoot()方法已被移除，服务端返回的组件树数据存储在响应的value属性中，但不能直接使用该属性值，需通过React官方客户端工具解析：

• 若服务端返回流式响应（RSC标准实践），使用createFromReadableStream替代readRoot()，它会直接从响应流中解析出可渲染的RSC根节点。
• 若已将响应解析为JSON对象，可使用createFromFetch处理，但流式处理性能更优，更推荐前者。

二、正确渲染服务端响应的步骤 #

1. 服务端生成合规RSC响应 #

服务端需用React提供的RSC渲染API生成响应，示例（Node.js + Express）：

import { renderToPipeableStream } from 'react-server-dom-webpack/server';
import RootServerComponent from './RootServerComponent';

app.get('/rsc', (req, res) => {
  const { pipe } = renderToPipeableStream(<RootServerComponent />);
  pipe(res);
});

2. 客户端解析并渲染 #

客户端通过fetch获取响应后，用createFromReadableStream解析并挂载：

import { createFromReadableStream } from 'react-server-dom-webpack/client';
import { createRoot } from 'react-dom/client';

async function loadRSC() {
  const response = await fetch('/rsc');
  // 替代readRoot()，生成可渲染节点
  const rscRoot = await createFromReadableStream(response.body);
  // 挂载到DOM
  createRoot(document.getElementById('root')).render(rscRoot);
}

loadRSC();

关键注意事项 #

• 直接渲染response.value无效，因为它是序列化后的组件数据结构，并非React可识别的渲染节点，必须通过官方工具转换。
• 确保客户端与服务端的react-server-dom-webpack版本一致，版本不匹配会导致解析失败。

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