skills.rest
SecurityRonin
SecurityRoninOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/SecurityRonin/ronin-marketplace --skill server-sent-events
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
voidrotvoidrot

nextjs-app-router-patterns

Provide guidelines for developing Next.js applications using the App Router.

Community
Intermediate
ldmrepoldmrepo
3

agui

Build real-time streaming AI agent applications using the AG-UI protocol.

Community
Intermediate
jackspacejackspace
16

timeout-prevention

Chunk long Claude Code operations into batches with progress checkpoints.

Community
Advanced
telum-aitelum-ai
2

websocket-implementation

Implement WebSocket server-client communication with automatic reconnection and Redis scaling.

Official
Advanced