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：稳定首包低延迟；逐条解析与更新平稳