Streaming Data in Edge Functions
Learn how to stream responses from Edge Functions to provide an improved user experience.Vercel Functions support streaming responses, allowing you to progressively send data to the client as it becomes available.
Edge Functions must begin sending a response within 25 seconds. You may continue streaming a response beyond that time for as long as needed. Learn more about the supported runtime APIs and limits.
The Edge Function supports the Web Streams APIs, allowing you to use functions like ReadableStream
, WritableStream
, and TransformStream
to stream data to and from the client.
export const runtime = 'edge';
export const dynamic = 'force-dynamic';
export async function GET(request: Request) {
const encoder = new TextEncoder();
const customReadable = new ReadableStream({
start(controller) {
controller.enqueue(encoder.encode('Basic Streaming Test'));
controller.close();
},
});
return new Response(customReadable, {
headers: { 'Content-Type': 'text/html; charset=utf-8' },
});
}
Streaming responses is only available with Route Handlers inside Next.js. You cannot stream responses from API Routes with the Pages Router. Learn more about incrementally adopting the App Router to start using Route Handlers.
To simplify streaming responses from Edge Functions when using LLMs and AI APIs, we've created the Vercel AI SDK.
This open-source library is designed to help developers build conversational streaming user interfaces in JavaScript and TypeScript. The SDK supports React/Next.js, Svelte/SvelteKit, and Vue/Nuxt as well as Node.js, Serverless, and Edge Runtimes.
Learn more about building AI applications with Vercel.
The amount of data you can stream in an Edge Function is limited by its memory allocation, and execution initial response time. Exceeding these limits will cause your function to fail.
To learn more about the Streams API, check out some code samples on web.dev:
Was this helpful?