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.
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.
All new and existing Hobby users, and new Pro and Enterprise teams created on or after July 31st 2024, have streaming enabled for all functions by default. All existing customers will soon have streaming by default, but until then, can choose to force streaming for all their projects.
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.
All new and existing Hobby users, and new Pro and Enterprise teams created on or after July 31st 2024, have streaming enabled for all functions by default. All existing customers will soon have streaming by default, but until then, can choose to force streaming for all their projects.
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.tsexport 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 Valuetrue
. See Forcing streaming functions for more information. -
Alternatively, you can use the edge runtime, although this is subject to several limitations.
All new and existing Hobby users, and new Pro and Enterprise teams created on or after July 31st 2024, have streaming enabled for all functions by default. All existing customers will soon have streaming by default, but until then, can choose to force streaming for all their projects.
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.tsexport 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 Valuetrue
. 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.tsexport 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:
- From the dashboard, select your project and go to the Settings tab.
- Select Environment Variables from the left side in settings.
- Add a new environment variable with the Key:
VERCEL_FORCE_NODEJS_STREAMING
and the Valuetrue
. You should ensure this is set for all environments you want to force streaming for. - 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
Was this helpful?