初步建立起 RSC 的直观体验

[xxleyi]

[xxleyi]

[xxleyi]

fetch("http://localhost:3000/rsc")
  .then((response) => response.body)
  .then((rb) => {
    const reader = rb.getReader();

    return new ReadableStream({
      start(controller) {
        // The following function handles each data chunk
        let count = 1;
        function push() {
          // "done" is a Boolean and value a "Uint8Array"
          reader.read().then(({ done, value }) => {
            // If there is no more data to read
            if (done) {
              console.log("forward done");
              controller.close();
              return;
            }
            // Get the data and send it to the browser via the controller
            controller.enqueue(value);
            // Check chunks by logging to the console
            console.log('forward chunk ' + count,   new TextDecoder().decode(value));
            count += 1;
            push();
          });
        }

        push();
      },
    });
  })
  .then((stream) =>
    // Respond with our stream
    new Response(stream, { headers: { "Content-Type": "text/plain" } }),
  )
  .then(async (result) => {
    // Do things with result
    console.log({result});
    let count = 1;
    for await (const chunk of (await result).body) {
        console.log('receive chunk ' + count,  new TextDecoder().decode(chunk));
        count += 1;
    }
    console.log('receive done');
  });

上面的代码是先请求一个返回 stream 的接口，然后再用 stream 转发出去，作为 reponse 返回，然后再模拟接收。

可以看到 stream 真正的优势：一边接收，一边发送；一边接收，一边处理。

这是 RSC 背后最根本的技术支撑，背后依托的是网络层和服务端的新一代基础设施，如果不用 stream 处理，那 RSC 作为一个创新性的 idea，在实际业务中的表现和使用场景，将会受到极大限制，或许足以让这个 idea 本身变得不切实际。

用了 stream 之后，可以比较放心的使用 rsc 返回较大组件；以及，未来在服务端，有希望在多个 server 之间串联 RSC，做到跨语言，跨团队，跨基础设施，组合「UI 页面」。

RSC 提供的两个最基础能力：

1. 服务端组件在简单的 resquest-response 模型之上，流式传输到客户端
2. 服务端组件可以通过引用的方式接收并渲染客户端组件，客户端组件可以通过 props 的方式接收并渲染服务端组件。

RSC 之上的第三方工具库和全栈框架，需要解决更复杂微妙的问题：

1. 如何更有效的缓存、并行加载 RSC
2. 如何针对各种应用场景降低灵活度，同时提供开箱即用的最佳实践
3. 面向下一个十年，进行更多实践范式的探索