Next.js 15 Route Handlers 流式 NDJSON 与 TransformStream 实践

概览NDJSON 将对象按行分隔输出，便于客户端逐行解析。利用 Edge Runtime 的 Web Streams 与 TransformStream，可在生成数据时持续投递，降低首包与总体等待时间。服务端 Route Handlerapp/api/stream/route.tsexport const runtime = 'edge' function encode(obj: unknown) { return new TextEncoder().encode(JSON.stringify(obj) + '\n') } export async function GET() { const { readable, writable } = new TransformStream() const writer = writable.getWriter() let i = 0 const timer = setInterval(() => { i++ writer.write(encode({ id: i, ts: Date.now() })) if (i >= 5) { clearInterval(timer) writer.close() } }, 500) return new Response(readable, { headers: { 'Content-Type': 'application/x-ndjson', 'Cache-Control': 'no-cache', Connection: 'keep-alive', }, }) } 客户端消费async function consume() { const res = await fetch('/api/stream') const reader = res.body!.getReader() const decoder = new TextDecoder() let buffer = '' while (true) { const { value, done } = await reader.read() if (done) break buffer += decoder.decode(value, { stream: true }) let idx while ((idx = buffer.indexOf('\n')) !== -1) { const line = buffer.slice(0, idx) buffer = buffer.slice(idx + 1) if (line) { const obj = JSON.parse(line) console.log('item', obj) } } } } 治理要点设置 `text/event-stream` 或 `application/x-ndjson` 之一并保持客户端解析一致。使用 `Cache-Control: no-cache` 避免中间层缓存截断。控制行对象大小与频率，避免客户端阻塞与内存膨胀。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+Next.js：15.0+；Edge Runtime：稳定首包低延迟；逐条解析与更新平稳