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

0•

API Development

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

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

01Standardized client-side consumption using Fetch API and React state hooks

020 GitHub stars

03Vercel-optimized lifecycle management to prevent premature function termination

04Real-time progress tracking patterns including percentage, phase-based, and indeterminate logs

05Comprehensive error handling and cancellation support with AbortController

06Next.js App Router compatible Route Handler patterns using TransformStream

Use Cases

01Displaying real-time progress bars for long-running batch processing or data migrations

02Streaming live logs or status updates from background tasks directly to a user dashboard

03Implementing lightweight live notification feeds that don't require bidirectional communication

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add securityronin/ronin-marketplace server-sent-events

For use in Claude.ai and ChatGPT

Download Skill