Vercel Streaming Quickstart
Learn how to stream responses from Serverless and Edge Functions to provide an improved user experience.In this quickstart, you'll learn how to get started with streaming on Vercel. The guide will cover:
- Creating a Vercel Function
- Using the Web Streams API to stream an API response
- Running your function locally
-
You should have the latest version of Vercel CLI installed. To check your version, use
vercel --version. To install or update Vercel CLI, use:pnpm i -g vercel@latest -
You should be using Node.js 18 or later.
-
You should have an existing project. If you don't have one, you can run the following terminal commands to create a Next project:
pnpm i next
npx create-next-app@latestVercel supports streaming responses from Vercel Functions:
- Most of the time, functions will be created as part of your framework code. For example, using a Next.js Route Handler
- Using the
edgeruntime, will always allow for streaming. Learn more about selecting a runtime in Choosing a Runtime - For serverless streaming using the
nodejsruntime, you can either:
- To get started, first create
app/api/streaming-example/route.ts
- Then, add the following code, which sets up a basic Function with a route handler method:
export const runtime = 'edge'; // or 'nodejs' which uses Serverless Functions
export const dynamic = 'force-dynamic'; // always run dynamically
export async function GET() {
// Streaming code will go here
}This example will demonstrate a basic example of streaming on response from your function. Add the following code to your function:
export async function GET() {
const customReadable = new ReadableStream({
start(controller) {...},
});
}Use a TextEncoder to emit a stream of text as UTF-8 bytes:
export async function GET() {
const encoder = new TextEncoder();
const customReadable = new ReadableStream({
start(controller) {
controller.enqueue(encoder.encode('Basic Streaming Test'));
// Prevent anything else being added to the stream
controller.close();
},
});
}Next, start producing a streaming response from your function:
export async function GET() {
...
return new Response(customReadable, {
headers: { 'Content-Type': 'text/html; charset=utf-8' },
});
}Finally, the whole file should look like this:
export const runtime = 'edge'; // or 'nodejs' which uses Serverless Functions
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' },
});
}Use next dev to start a local development server:
next devNavigate to http://localhost:3000/api/streaming-example to see the streamed response from your route.
The page should display the message "Basic Streaming Text".
Was this helpful?