Conceptual

Streaming Functions

Learn how Vercel enables streaming Function responses over time for ecommerce, AI, and more.
Table of Contents

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.

Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/streaming-example/route.ts
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:

Last updated on October 2, 2024