React/Next.js能否消费返回IAsyncEnumerable的.NET异步流式API？

答案是可以在所有数字返回前就更新React状态，无需等待全部数据返回，核心在于.NET的IAsyncEnumerable会生成**分块传输编码(Chunked Transfer Encoding)**的流式响应，React端可以通过流式API逐块接收数据并实时更新。

关键原理 #

.NET返回IAsyncEnumerable时，ASP.NET Core会自动启用分块传输，把数据分成多个小块逐步发送给前端，而不是等待所有数据生成完成后一次性返回。React端只要能处理这种流式响应，就能做到边接收边渲染。

React端实现方式 #

1. 使用Fetch API结合ReadableStream

通过Fetch获取响应后，直接读取响应体的可读流，逐块解析数据并更新状态：

import { useState, useEffect } from 'react';

function StreamedNumbers() {
  const [numbers, setNumbers] = useState([]);

  useEffect(() => {
    const consumeStream = async () => {
      const res = await fetch('/api/stream-numbers');
      const reader = res.body.getReader();
      const decoder = new TextDecoder('utf-8');

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        // 解析每个数据块（根据后端输出格式调整，这里假设每行一个数字）
        const chunkContent = decoder.decode(value);
        const newNums = chunkContent.split('\n').filter(Boolean).map(Number);
        setNumbers(prev => [...prev, ...newNums]);
      }
    };

    consumeStream();
  }, []);

  return (
    <div>
      <h2>实时接收的数字：</h2>
      {numbers.map((num, index) => (
        <p key={index}>已收到：{num}</p>
      ))}
    </div>
  );
}

export default StreamedNumbers;

2. 使用Server-Sent Events(SSE)（可选）

如果后端将IAsyncEnumerable包装成SSE格式（每个数据块带data:前缀），可以用原生EventSource更简洁地处理：

import { useState, useEffect } from 'react';

function SseNumbers() {
  const [numbers, setNumbers] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('/api/stream-numbers-sse');
    
    eventSource.onmessage = (e) => {
      const num = Number(e.data);
      setNumbers(prev => [...prev, num]);
    };

    return () => eventSource.close();
  }, []);

  return (
    <div>
      <h2>SSE实时数字：</h2>
      {numbers.map((num, index) => (
        <p key={index}>已收到：{num}</p>
      ))}
    </div>
  );
}

export default SseNumbers;

关于Hydration的说明 #

• 如果是客户端渲染(CSR)：完全可以边接收数据边渲染，无需等待完整响应，初始加载后就能实时更新。
• 如果是服务端渲染(SSR)：传统SSR的初始hydration需要完整的初始数据，但可以在hydration完成后，通过流式请求获取后续数据并实时更新状态；如果使用支持流式SSR的框架（如Next.js App Router），甚至可以在服务端就流式发送渲染内容，前端边接收边完成hydration和渲染。

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