sse-basics

Implement server-sent events in Next.js with route handlers and EventSource.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/vuthuonghai-steve/KLTN --skill sse-basics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sse-basics
Source: https://github.com/vuthuonghai-steve/KLTN/tree/main
Command: npx skills add https://github.com/vuthuonghai-steve/KLTN --skill sse-basics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SSE Basics provides a simple, reliable pattern for server-to-client real-time updates using Server-Sent Events. It lets you push events from server to web clients in Next.js with clean formatting and predictable connection handling.

Core Features & Use Cases

  • Unidirectional server-to-client streaming (server → client)
  • Text/event-stream formatting with data: payload and double newline
  • Basic server-side route handler using TransformStream/ReadableStream
  • Client consumption via EventSource with automatic reconnect
  • Use cases: live notifications, feeds, progress updates

Quick Start

To begin, implement a minimal SSE endpoint and a client EventSource to subscribe to /api/sse-basics that prints incoming JSON payloads.

Frequently Asked Questions about sse-basics

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

FAQPage Schema
How do I implement server-sent events in Next.js for real-time updates?

Server-sent events in Next.js are implemented using route handlers with TransformStream or ReadableStream to format text/event-stream payloads, pushing real-time data from server to client for live feeds and notifications.

What is the best way to push real-time data from a Next.js server to a client?

Server-sent events provide a reliable pattern for unidirectional server-to-client streaming in Next.js, using standard text/event-stream formatting with data: payloads and automatic client reconnection via EventSource.

Does EventSource work with Next.js route handlers for live notifications?

Yes, EventSource works with Next.js route handlers to consume server-sent events, automatically managing connection handling and reconnection for real-time client updates like live notifications and progress feeds.

How do I format a server-sent events stream payload correctly?

Server-sent events stream payloads must use text/event-stream formatting, sending data: prefixed JSON strings terminated by a double newline to ensure the client EventSource correctly parses and triggers real-time updates.

When should I use server-sent events instead of other real-time streaming methods?

Use server-sent events for unidirectional server-to-client real-time updates like live dashboards and feeds, relying on EventSource automatic reconnection rather than implementing bidirectional channels for simple push notifications.

How do I handle heartbeat and reconnection strategies for SSE in Next.js?

SSE reconnection is handled natively by the client EventSource API, while server-side Next.js route handlers can implement heartbeat strategies within the ReadableStream to keep the text/event-stream connection alive.