NestJS + Next.js: событийно-ориентированная архитектура

В этом материале мы шаг за шагом разберём, как связать NestJS и Next.js в единую событийно‑ориентированную архитектуру, используя EventEmitter и Server‑Sent Events (SSE). Такой подход позволит вам создавать приложения с обновлениями в реальном времени без излишней сложности.

Что такое событийно‑ориентированная архитектура

Событийно‑ориентированный подход основан на передаче информации через события: один модуль сообщает о произошедшем «факте», а другие модули реагируют на него. Это упрощает взаимодействие между частями приложения и повышает масштабируемость.

Почему это важно для современных веб‑приложений

• Мгновенная реакция интерфейса без перезагрузки страницы.
• Чистая логика между сервисами и компонентами благодаря слабой связности.
• Готовность к масштабированию при увеличении нагрузки и числа модулей.

Как NestJS обрабатывает события

NestJS предоставляет встроенный EventEmitter, который позволяет легко создавать, отправлять и слушать события внутри приложения.

Основные возможности EventEmitter в NestJS

• Генерация пользовательских событий.
• Подписка сервисов на события.
• Асинхронная обработка событий.

Пример базового события

this.eventEmitter.emit('task.completed', { id: 123 });

Использование Server‑Sent Events (SSE) для связи с Next.js

SSE позволяет серверу отправлять данные на фронтенд односторонним постоянным потоком, что идеально подходит для real‑time обновлений.

Почему SSE удобно использовать с NestJS и Next.js

• Простота реализации без WebSocket‑инфраструктуры.
• Нативная поддержка стримминга в браузере.
• Идеально подходит для событий, которые идут только от сервера.

Пример SSE‑эндпоинта в NestJS

@Get('events')
@Sse()
sendEvents() {
  return fromEvent(this.eventEmitter, 'task.completed');
}

Интеграция с Next.js

На стороне фронтенда Next.js легко подключается к SSE‑потоку, позволяя обновлять интерфейс в реальном времени.

Пример подключения к SSE в компоненте

useEffect(() => {
  const events = new EventSource('/api/events');
  events.onmessage = (e) => {
    const data = JSON.parse(e.data);
    console.log('Новое событие:', data);
  };
  return () => events.close();
}, []);

Применение в реальных проектах

Такая архитектура отлично подходит для широкого набора задач.

Типичные сценарии использования

• живые уведомления пользователей;
• мониторинг фоновых задач и очередей;
• обновления прогресса операций;
• динамические дашборды и аналитика.

Итоги

Комбинация NestJS, Next.js, EventEmitter и SSE даёт мощную и гибкую основу для приложений в реальном времени. Освоив событийно‑ориентированную архитектуру, вы сможете разрабатывать быстрые, отзывчивые и хорошо масштабируемые интерфейсы.