Streaming Functions
Learn how Vercel enables streaming Function responses over time for ecommerce, AI, and more.Vercel Functions support streaming responses, allowing you to render parts of the UI as they become ready. This lets users interact with your app before the entire page finishes loading by populating the most important components first.
Vercel enables you to use the standard Web Streams API in your functions. All functions using the Node.js runtime support streaming by default.
Streaming functions also support the waitUntil
method, which allows you to keep a function running after a response has been sent and finished. This means that while your function will likely run for the same amount of time, and therefore cost the same as waiting for your whole response to be ready, your end-users can have a better, more interactive experience.
You can stream by default with the Next.js App Router, when using either the Node.js or Edge runtimes. Other frameworks that support streaming functions include:
To stream functions when using Next.js Pages Router, create an app/api
directory in your project and add your streaming functions there. App Router
can be used in conjunction with the Pages Router to enable streaming
functions.
export const runtime = 'nodejs'; // This is the default and can be omitted
export const dynamic = 'force-dynamic'; // always run dynamically
export async function GET() {
// This encoder will stream your text
const encoder = new TextEncoder();
const customReadable = new ReadableStream({
start(controller) {
// Start encoding 'Basic Streaming Test',
// and add the resulting stream to the queue
controller.enqueue(encoder.encode('Basic Streaming Test'));
// Prevent anything else being added to the stream
controller.close();
},
});
return new Response(customReadable, {
headers: { 'Content-Type': 'text/html; charset=utf-8' },
});
}
Streaming functions also support the waitUntil method
, which allows you to keep a function running after a response has been sent and finished.
When using the edge runtime, some limitations apply.
By default, Vercel Functions have a maximum duration of 10 seconds on Hobby and 15 seconds on Pro and Enterprise.
You should consider configuring the default maximum duration for Node.js functions to enable streaming responses for longer periods.
When using the edge runtime, the following limitations apply:
- These functions must begin sending a response within 25 seconds. After the initial response begins, you can continuously stream the response with no time limit
- Your streamed response size cannot exceed Vercel's memory allocation limit of 128 MB
Was this helpful?