Streaming Functions

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.

Most, but not all, functions allow you to stream responses by default. See the information below for Next.js App Router, Next.js Pages Router, and other frameworks for more information.

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. This is because the App Router uses Route Handlers, which support streaming by default:

export const dynamic = 'force-dynamic'; // static by default, unless reading the request
 
export function GET(request: Request) {
  return new Response(`Hello from ${process.env.VERCEL_REGION}`);
}

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, Hobby users that deploy their Next.js Page Router function on Vercel will have streaming enabled for all functions. Otherwise, Next.js Pages Router doesn't support streaming out-of-the-box.

When using the Next.js Pages Router, you can use functions that stream in either of the following ways:

• Use Route Handlers in the App Router, even if the rest of your app uses the Pages Router:

  app/api/hello/route.ts

  export const dynamic = 'force-dynamic'; // static by default, unless reading the request
   
  export function GET(request: Request) {
    return new Response(`Hello from ${process.env.VERCEL_REGION}`);
  }

• Force streaming for all functions in your project by adding a new environment variable with the Key: VERCEL_FORCE_NODEJS_STREAMING and the Value true. See Forcing streaming functions for more information.

• Alternatively, you can use the edge runtime, although this is subject to several limitations.

Functions using the following frameworks will always support streaming:

• Next.js App Router
• SvelteKit
• Remix
• Solid Start

When using other frameworks, you can use functions that stream in any of the following ways:

• For Node.js functions, use the Web Handler signature in your function:

  api/hello.ts

  export function GET(request: Request) {
    return new Response(`Hello from ${process.env.VERCEL_REGION}`);
  }

• Force streaming for all functions in your project by adding a new environment variable with the Key: VERCEL_FORCE_NODEJS_STREAMING and the Value true. See Forcing streaming functions for more information.

• To stream on a per-function basis for functions using the Node.js Handler signature, add the supportsResponseStreaming:true config:

  api/hello.ts

  export const config = {
    supportsResponseStreaming: true,
  };
   
  export default function handler(request: Request, response: Response) {
    const { name = 'World' } = request.query;
    return response.send(`Hello ${name}!`);
  }

• Alternatively, you can use the edge runtime, although this is subject to several limitations.

To force your functions to stream on Vercel, do the following:

1. From the dashboard, select your project and go to the Settings tab.
2. Select Environment Variables from the left side in settings.
3. Add a new environment variable with the Key: VERCEL_FORCE_NODEJS_STREAMING and the Value true. You should ensure this is set for all environments you want to force streaming for.
4. Pull your env vars into your local project with the following command:
   terminal

   vercel env pull

For more information, see Environment Variables.

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

• Streaming Concepts
• Quickstart
• Streaming recipes