Building a Real-Time Notification Feed

A real-time notification feed combines an SSE stream for incoming notifications with REST endpoints for marking items as read. The component maintains local state for the notification list, subscribes to the server stream via EventSource in a useEffect, and handles user interactions (mark-as-read, dismiss) with optimistic updates.

A notification object typically has this shape: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. The type field drives the icon and color. The read field tracks whether the user has acknowledged the notification. The timestamp enables grouping by time period.

In a useEffect, create an EventSource connected to /api/notifications/stream. On each message event, parse the JSON and prepend the new notification to state: setNotifications(prev => [JSON.parse(e.data), ...prev]). Prepending (unshift behavior) puts the newest notification at the top, which is standard for notification feeds.

Derive the unread count from the notifications array without additional state: const unreadCount = notifications.filter(n => !n.read).length. Display this as a badge on the notification bell icon. The count updates automatically whenever the notifications state changes — no separate state management needed.

When the user clicks a notification, apply an optimistic read update immediately: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Then send a PATCH request to /api/notifications/:id with { read: true } in the background. Rollback the optimistic update if the request fails.

Group notifications for display: "Today" (same calendar day), "Yesterday", and "Older". Compute the group using the notification's timestamp and the current date: const today = new Date().toDateString(). Render each group as a separate section with a header label. This makes scanning a long notification list much easier.

When the user is on a different page and a new notification arrives via SSE, show a toast instead of (or in addition to) updating the notification list. Use a global notification context or Zustand store that both the SSE subscriber and the toast renderer can access. The toast disappears after a few seconds; the notification persists in the list.

For notifications that appear across the whole app, store them in a React context or Zustand store at the app root level. The SSE subscription lives in a provider component near the top of the tree. Any component can read notifications or dispatch new ones via the shared store, enabling toast rendering from any page.

EventSource automatically handles reconnection when the network drops, but tab visibility changes are different. When the user switches back to a tab after a long absence, the SSE connection may have been terminated by the server. EventSource reconnects automatically — and the Last-Event-ID mechanism replays any notifications the user missed while the tab was backgrounded.

Single-page applications lose in-memory notification state when navigating away from the page. Store notifications in localStorage after each update: localStorage.setItem('notifications', JSON.stringify(notifications)). On mount, initialize state from localStorage before the SSE stream connects. This preserves the notification history across page navigation.

The server-side SSE endpoint must set specific headers: Content-Type: text/event-stream, Cache-Control: no-cache, and Connection: keep-alive. In Express/NestJS, write events as data: ${JSON.stringify(payload)} — note the double newline which signals the end of an event. The server must flush after each write to ensure the browser receives the event immediately.

What is the correct Content-Type header for an SSE (Server-Sent Events) endpoint?

Notification feeds combine SSE subscription (useEffect with EventSource cleanup) with REST mutations (PATCH for mark-as-read). Data shape: {id, type, message, timestamp, read}. Derive unreadCount with filter, group by today/yesterday/older for display. Use global context or Zustand for cross-page toasts. Persist to localStorage for navigation resilience. SSE endpoint requires Content-Type: text/event-stream, Cache-Control: no-cache, and double-newline event delimiters.