nextjs
CHAPTER 29 / 34
읽기 약 2분
FUNCTION
Next.js 실전: 실시간 알림 (SSE)
핵심 개념
Server-Sent Events로 실시간 알림을 구현합니다. Route Handler에서 스트림을 생성하고 클라이언트에서 EventSource로 수신합니다.
코드 분석
SERVER-SENT EVENTS
// app/api/events/route.ts
export async function GET() {
const stream = new ReadableStream({
start(controller) {
setInterval(() => {
controller.enqueue(
`data: ${Date.now()}
`
)
}, 1000)
}
})
return new Response(stream, {
headers: { 'Content-Type': 'text/event-stream' }
})
}
실시간 스트림 시뮬레이션...AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Next.js 실전: 실시간 알림 (SSE)' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Next.js 실전: 실시간 알림 (SSE)'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Next.js 실전: 실시간 알림 (SSE)' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Next.js 실전: 실시간 알림 (SSE)' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Next.js 실전: 실시간 알림 (SSE)는 이 3가지만 확실히 잡으세요
1.클라이언트가 주기적으로 폴링하면 불필요한 요청이 반복되고, 실시간성이 떨어집니다
2.Server-Sent Events는 서버→클라이언트 단방향 스트림으로, Route Handler에서 ReadableStream을 반환해서 구현합니다
3.다음 챕터에서 사용자가 파일을 업로드하는 기능을 구현합니다
공유하기
진행도 29 / 34