Core implementation of Server-Sent Events (SSE) for realtime one-way communication in Next.js. Basic patterns for setup, message format, and client consumption.
Foundation for SSE in social apps: one-way server push for notifications, feeds.
text/event-stream content type, each message ends with \n\n.retry: 5000 message.Create a route handler that streams events using TransformStream or ReadableStream.
// app/api/sse-basics/route.ts
import { NextRequest } from 'next/server';
export async function GET(req: NextRequest) {
const stream = new TransformStream();
const writer = stream.writable.getWriter();
const encoder = new TextEncoder();
(async () => {
// Send initial message
await writer.write(encoder.encode('data: {"message":"Hello SSE"}\n\n'));
// Keep stream open (can send more messages)
await new Promise(resolve => setTimeout(resolve, 5000));
await writer.write(encoder.encode('data: {"message":"Still connected"}\n\n'));
await writer.close();
})();
return new Response(stream.readable, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
}
});
}
Use EventSource to connect and listen for messages.
'use client';
import { useEffect, useState } from 'react';
export default function SSEClient() {
const [messages, setMessages] = useState<string[]>([]);
useEffect(() => {
const es = new EventSource('/api/sse-basics');
es.onmessage = (event) => {
const data = JSON.parse(event.data);
setMessages(prev => [...prev, data.message]);
};
es.onerror = (error) => {
console.error('SSE error:', error);
es.close();
};
return () => es.close();
}, []);
return (
<div>
<h1>SSE Messages</h1>
<ul>
{messages.map((msg, i) => <li key={i}>{msg}</li>)}
</ul>
</div>
);
}
SSE messages follow a specific format: