Streaming Data in Edge Functions
Learn how to fetch streamable data in Edge Functions to deliver faster responses using the Streams Web API.Vercel Edge Functions support the Streams Web API, which allows you to read, write, transform, encode, and decode streams. You can also set your function responses to be streams, which will cause them to respond as data is transmitted in chunks, rather than wait until all the data is fetched.
Edge Functions must begin sending a response within 30 seconds to fall within the maximum initial response time. Once a reply is made, the function can continue to run. This means that you can use Edge Functions to stream data, and the response will be delivered as soon as the first chunk of data is available.
To create an Edge Function that returns a readable stream, your Function's exported handler method should return a Response object that takes an instance of the ReadableStream interface as the first argument in its constructor. For example:
export const config = {
runtime: 'edge',
};
export default async function handler(_) {
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' },
});
}The following example demonstrates an Edge Function that returns a ReadableStream object which contains an HTML page. The page says "Vercel Edge Functions + Streaming", and this code works in both JavaScript and TypeScript.
export const config = {
runtime: 'edge',
};
export default async function handler(_) {
const encoder = new TextEncoder();
const readable = new ReadableStream({
start(controller) {
controller.enqueue(
encoder.encode(
'<html><head><title>Vercel Edge Functions + Streaming</title></head><body>',
),
);
controller.enqueue(encoder.encode('Vercel Edge Functions + Streaming'));
controller.enqueue(encoder.encode('</body></html>'));
controller.close();
},
});
return new Response(readable, {
headers: { 'Content-Type': 'text/html; charset=utf-8' },
});
}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.
End to end example of a streaming Edge Function using OpenAI's GPT-3 API.
To learn more about the Streams API, and its concepts see the MDN docs: