Creación de un feed de notificaciones en tiempo real

Un feed de notificaciones en tiempo real combina un flujo SSE para recibir notificaciones con endpoints REST para marcar elementos como leídos. El componente mantiene un estado local con la lista de notificaciones, se suscribe al flujo del servidor mediante EventSource en un useEffect y gestiona las interacciones del usuario (marcar como leída, descartar) con actualizaciones optimistas.

Un objeto de notificación suele tener esta estructura: { id: string, type: 'info' | 'warning' | 'success', message: string, timestamp: string, read: boolean }. El campo type determina el icono y el color. El campo read indica si el usuario ha reconocido la notificación. timestamp permite agruparlas por periodo de tiempo.

En un useEffect, cree un EventSource conectado a /api/notifications/stream. En cada evento de mensaje, analice el JSON y anteponga la nueva notificación al estado: setNotifications(prev => [JSON.parse(e.data), ...prev]). Anteponer (comportamiento de unshift) coloca la notificación más reciente en la parte superior, que es lo habitual en los feeds de notificaciones.

Obtenga el recuento de no leídas a partir del array de notificaciones sin utilizar estado adicional: const unreadCount = notifications.filter(n => !n.read).length. Muéstrelo como un distintivo en el icono de la campana de notificaciones. El recuento se actualiza automáticamente cada vez que cambia el estado de las notificaciones; no es necesario gestionar un estado independiente.

Cuando el usuario hace clic en una notificación, aplique inmediatamente una actualización optimista para marcarla como leída: setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)). Después, envíe en segundo plano una solicitud PATCH a /api/notifications/:id con { read: true }. Deshaga la actualización optimista si falla la solicitud.

Agrupe las notificaciones para mostrarlas: «Hoy» (el mismo día natural), «Ayer» y «Más antiguas». Calcule el grupo mediante la marca de tiempo de la notificación y la fecha actual: const today = new Date().toDateString(). Muestre cada grupo como una sección independiente con una etiqueta de encabezado. Esto facilita mucho la revisión de una lista larga de notificaciones.

Cuando el usuario se encuentra en otra página y llega una notificación nueva mediante SSE, muestre un toast en lugar de actualizar la lista de notificaciones, o además de hacerlo. Utilice un contexto global de notificaciones o un almacén de Zustand al que puedan acceder tanto el suscriptor SSE como el componente que muestra los toasts. El toast desaparece después de unos segundos; la notificación permanece en la lista.

Para que las notificaciones aparezcan en toda la aplicación, almacénelas en un contexto de React o en un almacén de Zustand en el nivel raíz de la aplicación. La suscripción SSE debe vivir en un componente proveedor cerca de la parte superior del árbol. Cualquier componente puede leer las notificaciones o enviar nuevas mediante el almacén compartido, lo que permite mostrar toasts desde cualquier página.

EventSource gestiona automáticamente la reconexión cuando se interrumpe la red, pero los cambios de visibilidad de una pestaña son distintos. Cuando el usuario vuelve a una pestaña después de una ausencia prolongada, es posible que el servidor haya terminado la conexión SSE. EventSource se reconecta automáticamente y el mecanismo Last-Event-ID reproduce las notificaciones que el usuario se perdió mientras la pestaña estaba en segundo plano.

Las aplicaciones de una sola página pierden el estado de las notificaciones en memoria al navegar fuera de la página. Almacene las notificaciones en localStorage después de cada actualización: localStorage.setItem('notifications', JSON.stringify(notifications)). Al montarse, inicialice el estado desde localStorage antes de que se conecte el flujo SSE. Esto conserva el historial de notificaciones al navegar entre páginas.

El endpoint SSE del servidor debe establecer encabezados específicos: Content-Type: text/event-stream, Cache-Control: no-cache y Connection: keep-alive. En Express/NestJS, escriba los eventos como data: ${JSON.stringify(payload)} ; observe el salto de línea doble, que indica el final de un evento. El servidor debe vaciar el búfer después de cada escritura para garantizar que el navegador reciba el evento inmediatamente.

¿Cuál es el encabezado Content-Type correcto para un endpoint SSE (Server-Sent Events)?

Los feeds de notificaciones combinan una suscripción SSE (useEffect con limpieza de EventSource) con mutaciones REST (PATCH para marcar como leída). Estructura de datos: {id, type, message, timestamp, read}. Obtenga unreadCount con filter y agrupe por hoy/ayer/más antiguas para mostrar las notificaciones. Utilice un contexto global o Zustand para los toasts entre páginas. Persista los datos en localStorage para conservarlos durante la navegación. El endpoint SSE requiere Content-Type: text/event-stream, Cache-Control: no-cache y delimitadores de eventos con un salto de línea doble.