typescriptadvanced
Streaming Response from Route Handler
Stream large responses from Next.js route handlers using ReadableStream for real-time data.
typescriptPress ⌘/Ctrl + Shift + C to copy
// app/api/stream/route.ts
export async function GET() {
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
for (let i = 0; i < 10; i++) {
const data = JSON.stringify({ count: i, timestamp: Date.now() });
controller.enqueue(encoder.encode(`data: ${data}\n\n`));
await new Promise((r) => setTimeout(r, 500));
}
controller.enqueue(encoder.encode('data: [DONE]\n\n'));
controller.close();
},
});
return new Response(stream, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
Connection: 'keep-alive',
},
});
}
// Server-Sent Events with dynamic data
// app/api/notifications/route.ts
export async function GET(request: Request) {
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
const send = (event: string, data: unknown) => {
controller.enqueue(
encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`)
);
};
// Send initial data
send('connected', { status: 'ok' });
// Poll for updates
const interval = setInterval(async () => {
const notifications = await getNewNotifications();
if (notifications.length > 0) {
send('notification', notifications);
}
}, 5000);
// Cleanup on disconnect
request.signal.addEventListener('abort', () => {
clearInterval(interval);
controller.close();
});
},
});
return new Response(stream, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
},
});
}Use Cases
- real-time updates
- AI streaming
- notifications
Tags
Related Snippets
Similar patterns you can reuse in the same workflow.
typescriptintermediate
Type-Safe API Route Handler
Next.js App Router route handler with input validation, typed responses, and proper error handling.
Best for: CRUD API endpoints
#api#route-handler
typescriptintermediate
Next.js Streaming with Suspense
Stream server components with Suspense boundaries for progressive page loading and better TTFB.
Best for: Progressive loading for data-heavy dashboards
#nextjs#streaming
typescriptintermediate
Streaming with Loading UI and Suspense
Use loading.tsx and React Suspense to stream UI progressively in Next.js App Router.
Best for: dashboards
#nextjs#streaming
typescriptintermediate
Route Handler with CORS Support
Add CORS headers to Next.js route handlers for cross-origin API access.
Best for: external API consumers
#nextjs#cors