Conceptual
4 min read

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.

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.

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:

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}`);
}

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.

By default, Hobby users have streaming enabled for all functions. Functions using the following frameworks will always support streaming:

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:

Last updated on July 20, 2024