Vercel Streaming Quickstart

2. 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

   // Can be 'nodejs', but Vercel recommends using 'edge'
   export const runtime = 'edge';
   // Prevents this route's response from being cached
   export const dynamic = 'force-dynamic';
    
   // This method must be named GET
   export async function GET() {
     // Streaming code will go here
   }

   To learn more about creating Edge Functions, see Edge Functions quickstart.

A ReadableStream is a stream of data that can be read. To demonstrate a basic example of streaming on Vercel, this quickstart will show you how to send a ReadableStream as a response to requests to your Function.

Add the following code to your API method to instantiate a new ReadableStream:

const customReadable = new ReadableStream({
  start(controller) {},
});

The start method is where you provide your ReadableStream with a data source, or begin generating the data that will be streamed. The function will generate a string of text to demonstrate basic streaming functionality.

To do so, use the TextEncoder interface, which emits a stream of text as UTF-8 bytes.

Update your API handler so that its code looks like this:

// 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();
  },
});

To complete your Function, return a new instance of a Response object. Pass your customReadable as an argument to the constructor, along with the appropriate Content-Type headers. Add the following to the end of your API handler:

return new Response(customReadable, {
  headers: { 'Content-Type': 'text/html; charset=utf-8' },
});

Finally, the whole file should look like this:

// Can be 'nodejs', but Vercel recommends using 'edge'
export const runtime = 'edge';
// Prevents this route's response from being cached
export const dynamic = 'force-dynamic';
 
// This method must be named GET
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' },
  });
}

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".