Vercel Streaming Quickstart

Learn how to stream responses from Serverless and Edge Functions to provide an improved user experience.
Table of Contents

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
  1. 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
    yarn
    npm
    pnpm i -g vercel@latest
  2. You should be using Node.js 18 or later.

  3. 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
    yarn
    npm
    pnpm i next
terminal
npx create-next-app@latest

Vercel 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 edge runtime, will always allow for streaming. Learn more about selecting a runtime in Choosing a Runtime
  • For serverless streaming using the nodejs runtime, you can either:
    • Use a framework that supports streaming
    • Use the Web Handler signature
    • Use supportsResponseStreaming:true with the Node.js signature
  1. Create a Function

    1. To get started, first create app/api/streaming-example/route.ts
    1. Then, add the following code, which sets up a basic Function with a route handler method:
    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    app/api/streaming-example/route.ts
    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
    }
  2. Create a ReadableStream

    This example will demonstrate a basic example of streaming on response from your function. Add the following code to your function:

    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    app/api/streaming-example/route.ts
    export async function GET() {
      const customReadable = new ReadableStream({
        start(controller) {...},
      });
    }
  3. Add content to your stream

    Use a TextEncoder to emit a stream of text as UTF-8 bytes:

    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    app/api/streaming-example/route.ts
    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();
        },
      });
    }
  4. Return the stream as your API response

    Next, start producing a streaming response from your function:

    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    app/api/streaming-example/route.ts
    export async function GET() {
      ...
     
      return new Response(customReadable, {
        headers: { 'Content-Type': 'text/html; charset=utf-8' },
      });
    }

    Finally, the whole file should look like this:

    Next.js (/app)
    Next.js (/pages)
    Other frameworks
    app/api/streaming-example/route.ts
    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' },
      });
    }
  5. Test your code locally

    Use next dev to start a local development server:

    terminal
    next dev

    Navigate to http://localhost:3000/api/streaming-example to see the streamed response from your route.

    The page should display the message "Basic Streaming Text".

Last updated on May 27, 2024