javascript / expert
Snippet
Hochperformantes Data-Streaming in Route-Handlern
Das Streamen großer Datensätze direkt aus Route-Handlern unter Verwendung der `ReadableStream`-API ist ein leistungsstarkes Muster zur Reduzierung der 'Time to First Byte' (TTFB). Indem Daten in Chunks gesendet werden, sobald sie verfügbar sind, vermeiden Sie das Warten auf die Generierung des gesamten Payloads auf dem Server. Dies ist essenziell für KI-gestützte Textgenerierung oder die Verarbeitung massiver Logs, bei denen der Memory-Overhead minimal gehalten werden muss.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export async function GET() {const stream = new ReadableStream({async start(controller) {const encoder = new TextEncoder();for (let i = 0; i < 100; i++) {controller.enqueue(encoder.encode(`Chunk ${i}\n`));await new Promise(r => setTimeout(r, 100));}controller.close();},});return new Response(stream, { headers: { 'Content-Type': 'text/plain' } });}
nextjs
Erklärung
1
new ReadableStream({ async start(controller) { ... } })
Erstellt einen manuellen Stream-Controller, um Daten inkrementell an den Client zu pushen.
2
controller.enqueue(encoder.encode(...))
Kodiert einen String in Uint8Array-Chunks und fügt sie der Stream-Warteschlange hinzu.
3
return new Response(stream, ...)
Gibt ein Response-Objekt zurück, das den Stream konsumiert und Chunked-Transfer-Encoding ermöglicht.