How does this handle connection drops?

The implementation includes standard headers like 'Connection: keep-alive' and 'Cache-Control: no-cache', alongside client-side buffer management to handle incomplete messages and reconnections.

Is this skill compatible with Vercel Serverless Functions?

Yes, it specifically addresses Vercel-specific challenges like background task termination and timeout limits (10s for Hobby, 60s for Pro) by providing correct stream-closing patterns.

Can I use SSE with HTTP POST requests?

While the traditional EventSource API only supports GET, this skill provides patterns using the Fetch API and ReadableStream which allow you to use POST requests for complex data payloads.

Why use SSE instead of WebSockets for progress updates?

SSE is much lighter than WebSockets, works over standard HTTP without additional protocol overhead, and is perfectly suited for unidirectional data flow like progress bars or status notifications.

Server-Sent Events (SSE) Helper

Name: Server-Sent Events (SSE) Helper
Author: SecurityRonin

bySecurityRonin

API Development

Implements real-time, unidirectional server-to-client streaming for progress updates and live data in Next.js and Vercel environments.

About

This skill provides standardized implementation patterns for Server-Sent Events (SSE) within the Next.js App Router, specifically optimized for Vercel’s serverless architecture. It offers battle-tested boilerplate for using TransformStream on the server and ReadableStream on the client, ensuring reliable progress tracking, notification delivery, and live data feeds without the overhead of WebSockets. It includes critical guidance on managing function timeouts and lifecycle termination to prevent unexpected behavior in production environments.

Key Features

Standardized client-side consumption using Fetch API and React state hooks
0 GitHub stars
Vercel-optimized lifecycle management to prevent premature function termination
Real-time progress tracking patterns including percentage, phase-based, and indeterminate logs
Comprehensive error handling and cancellation support with AbortController
Next.js App Router compatible Route Handler patterns using TransformStream

Use Cases

Displaying real-time progress bars for long-running batch processing or data migrations
Streaming live logs or status updates from background tasks directly to a user dashboard
Implementing lightweight live notification feeds that don't require bidirectional communication

About

Key Features

Standardized client-side consumption using Fetch API and React state hooks
0 GitHub stars
Vercel-optimized lifecycle management to prevent premature function termination
Real-time progress tracking patterns including percentage, phase-based, and indeterminate logs
Comprehensive error handling and cancellation support with AbortController
Next.js App Router compatible Route Handler patterns using TransformStream

Use Cases

Displaying real-time progress bars for long-running batch processing or data migrations
Streaming live logs or status updates from background tasks directly to a user dashboard
Implementing lightweight live notification feeds that don't require bidirectional communication