一套代码兼容 Node.js 与 Web Stream 的核心是统一使用 ReadableStream 接口，通过轻量适配层（如 createReadableStream、pipeToWritable）屏蔽环境差异，业务逻辑只处理标准流；组件消费无感，SSR/边缘需注意生命周期与取消机制。
一套代码兼容 Node.js Stream 与 Web Stream，核心在于抽象掉底层差异，统一使用浏览器和 Node 环境都支持的 ReadableStream 接口，并在运行时做轻量适配。这不是“写两套再合并”，而是从设计之初就面向标准流协议，让服务端逻辑可直接复用于客户端（如 SSR 渲染、本地 mock、边缘函数），真正实现大前端的流式同构。
统一用 ReadableStream 构建数据源
放弃直接操作 fs.createReadStream 或 res.write，转而封装为返回 ReadableStream 的工厂函数：
- Node 端：用
stream.Readable.from(iterable)或stream.pipeline+ReadableStream.from()（v18.19+ / v20.12+ 原生支持）桥接原生流 - Web 端：直接构造
new ReadableStream({ pull })，或从fetch().body获取原生流 - 关键点：所有业务逻辑（如日志分块、AI token 拆解、HTML 流式生成）只接收和处理
ReadableStream，不感知来源
适配层仅做一次环境判断
避免分散的 if (typeof window !== 'undefined')。建一个薄薄的 streamAdapter 模块，导出标准化方法：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
-
createReadableStream(source)：接受string、AsyncIterable、NodeJS.ReadableStream或Response.body，自动返回跨平台ReadableStream -
pipeToWritable(stream, writable)：对 Node 的Writable调用stream.pipe()；对 Web 的WritableStream调用stream.pipeTo() - 不封装底层类，只封装行为——这样既保持标准 API 一致性，又不增加运行时负担
Vue/React 组件内消费流要“无感”
组件不关心流来自 SSE、Fetch Stream 还是本地 Node 服务。通过组合式函数封装通用消费逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
useReadableStream(stream)（基于@vueuse/core或自定义 hook）统一处理 chunk 解析、错误重试、取消控制 - 文本类流（如 AI 回复）默认用
TextDecoderStream（Web）或new TextDecoder()+for await（Node）解码，自动处理 UTF-8 中文乱码 - 渲染节流交给
requestIdleCallback或queueMicrotask，避免高频 chunk 导致 UI 卡顿
SSR/边缘环境需注意流生命周期
同构流在服务端渲染中容易出错，关键约束有：
- Node 端不能直接
return stream给框架（如 Next.js、Nuxt），需用renderToPipeableStream（React）或pipeToNodeWritable（Vue SSR）正确衔接 - 流必须可取消：
AbortSignal需透传到源头（如fetch(url, { signal })或ReadableStream的cancel()） - 避免内存泄漏：每次请求结束后，确保所有
on('data')监听器被移除，或使用stream.finished()（Node）或reader.closed（Web）做清理
