Diagrama de arquitectura de la interfaz de usuario de Novi

Este diagrama de arquitectura ilustra la cadena técnica completa del frontend de Novi, desde las solicitudes del usuario hasta la renderización de la página. Utiliza el framework de renderizado del lado del servidor Next.js, gestionando las solicitudes mediante enrutamiento multinivel (enrutamiento de página y enrutamiento de API). La gestión del estado del frontend utiliza Redux Toolkit junto con React Context para una gestión por capas. La biblioteca de componentes de la interfaz de usuario se desarrolla a medida basándose en Ant Design y encapsula componentes de negocio comunes. La arquitectura incluye una capa de intercepción de solicitudes (encapsulación Axios, gestión unificada de errores), una capa de almacenamiento en caché de datos (React Query combinado con localStorage), aceleración de CDN de recursos estáticos y estrategias de optimización de compilación (división de código, carga diferida de imágenes e importación bajo demanda). También integra un sistema de monitorización del frontend (Sentry) y seguimiento de eventos, que soporta un sistema completo de ingeniería de frontend desde el desarrollo y la depuración hasta las operaciones en línea.