server-sent-events

Implement Server-Sent Events streams for Next.js app router environments.

1|Updated Dec 30, 2025

Search Tags:#next.js #real-time #frontend-backend #server-sent events #sse #progress updates #web streams

Ready to run

npx skills add https://github.com/SecurityRonin/ronin-marketplace --skill server-sent-events

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: server-sent-events
Source: https://github.com/SecurityRonin/ronin-marketplace/tree/main/plugins/ui-skills/skills/server-sent-events
Command: npx skills add https://github.com/SecurityRonin/ronin-marketplace --skill server-sent-events

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables real-time server-to-client progress updates in Next.js apps using Server-Sent Events (SSE), simplifying live dashboards and long-running task progress.

Core Features & Use Cases

Real-time progress streams: Continuously push progress updates to the UI.
Simple client consumption: Consume SSE on the client with a TransformStream-based reader.
Use Case: Long-running batch jobs, file processing, or live status dashboards in Vercel/Next.js deployments.

Quick Start

Set up an SSE route that streams events with data: JSON payloads and implement a client that reads the stream and updates progress UI in real time.

Frequently Asked Questions about server-sent-events

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I stream real-time progress updates from a server to a client in Next.js?▼

You can stream real-time progress updates in Next.js using Server-Sent Events (SSE) by setting up a route with proper response headers and a TransformStream-based data channel to continuously push event payloads to the client.

What is the best way to show live progress for long-running tasks in a Next.js app?▼

The best way to show live progress for long-running tasks in a Next.js app is using SSE, which pushes continuous server-side batch processing or file processing updates directly to your UI via a client-side stream reader.

Can I use Server-Sent Events with the Next.js App Router on Vercel?▼

Yes, Server-Sent Events work with the Next.js App Router on Vercel and Edge environments. The implementation uses web streams and TransformStream objects to push real-time data within platform limits.

How do I handle errors and cancellation when consuming SSE streams in Next.js?▼

Handling errors and cancellation when consuming SSE streams in Next.js involves using the client-side reader to detect stream interruptions and properly closing the TransformStream data channel when the user cancels the long-running task.

What are the limitations of using SSE for real-time updates on Vercel?▼

Limitations of using SSE for real-time updates on Vercel include platform-specific execution time limits for long-running tasks and Edge environment constraints, which require careful stream management and adherence to platform notes.