Angular universal transfer state

Despliegue universal de Angular

El proyecto Angular Universal es un proyecto impulsado por la comunidad para ampliar el núcleo de las APIs de Angular (plataforma-servidor) para permitir a los desarrolladores hacer un renderizado del lado del servidor de las aplicaciones Angular en una variedad de escenarios. Este repositorio albergará varias herramientas como motores para integrar con varios backends(NodeJS, ASP.NET etc.) y también módulos extra y ejemplos para ayudarte a empezar con el renderizado del lado del servidor. Controle la página renderizada por el servidor y transfiera el estado antes de que la aplicación web del lado del cliente se cargue a la aplicación del lado del cliente.

La Plataforma Vivantio le permite centrarse en las herramientas de gestión de servicios de TI que tienen sentido para el modelo de servicio único de su organización: desde solicitudes de incidencias, problemas y cambios, hasta solicitudes de servicio, conocimiento del cliente y gestión de activos.

Ejemplo de estado de transferencia universal angular

Angular Universal puede ser descrito como el proceso de renderizar tu aplicación a HTML en el Servidor (ie: Node.js) también conocido como server-side rendering (SSR), a diferencia de las típicas aplicaciones Angular como las Single-Page Applications (SPA’s) donde el renderizado ocurre en el Navegador, un proceso que también puede ser referido como client-side rendering (CSR).

Lazy loading es el proceso de dividir la aplicación en múltiples módulos. Cuando el usuario va a una ruta diferente, el navegador descargará y ejecutará el módulo. Mi sugerencia es tener un módulo por ruta/componente, porque mejorará tu posicionamiento SEO, la “home” de tu sitio será más pequeña y más rápida de cargar. Pero esto no sólo es importante para SEO, si también tienes una aplicación Angular regular siempre es importante utilizar Lazy Loading.

Cuando comienzas un proyecto tendrás la tentación de hacer un módulo compartido y tener ahí todos los componentes y librerías básicas o comunes que se usan en todos los componentes. Esto es un gran error cuando quieres que tus páginas/app se carguen rápidamente porque habrá algunas páginas que no necesiten una librería o componente en particular pero se cargan porque los has añadido en esa librería compartida. Así que tómate tu tiempo y ten todos los módulos con las librerías específicas que necesitas.

Contenido dinámico universal de Angular

En una aplicación Angular Universal cuando la vista del servidor pasa a la vista del cliente hay un parpadeo en la pantalla, porque todas las API’s que fueron llamadas en el renderizado del lado del servidor, también fueron llamadas en el renderizado del lado del cliente, debido a que había un parpadeo.

Para eliminar este parpadeo he implementado Angular Universal Transfer Module, que almacena los datos en una caché de Mapas (private _map = new Map<string, any>()), mientras que en el renderizado del lado del servidor, y los transfiere al cliente para que el cliente no tenga que llamar a la api de nuevo e imedi tener los datos de la caché.

De esta manera el parpadeo se ha ido, pero el rendimiento de la aplicación ha disminuido, en las pruebas de carga de la aplicación, el resultado con parpadeo es más rápido que la aplicación sin parpadeo, ¿por qué es eso? En el navegador la aplicación sin parpadeo es más rápida, en page insights también la aplicación sin parpadeo tiene más puntuación.

Puede ser porque en el caso de las pruebas de carga o en el caso de los robots de golpear el sitio web no hay navegador por lo que la caché nunca se borran y que acaba de llenar el servidor con la memoria caché y el servidor se pone lento, lo que podría ser la solución para que, o bien crear diferentes instace para los robots y el usuario real, mediante la identificación de solicitud a nivel nginx, oe hay alguna otra cosa que me falta en angular universal.

Transferhttpcachemodule

Angular Universal es una tecnología que permite crear aplicaciones Angular que se renderizan tanto en el navegador como en un servidor Node.js. A diferencia de una aplicación Angular normal renderizada en el navegador (aplicación de una sola página), una aplicación Universal es indexable por los motores de búsqueda y los rastreadores de redes sociales, lo que le permite cosechar los beneficios del SEO.

En el artículo, voy a discutir por qué usted podría utilizar Angular Universal y cuáles son las alternativas, cómo Universal funciona a un alto nivel, y cómo empezar. A continuación, haré una inmersión profunda en el código que compone una aplicación Angular Universal. Por último, hablaré sobre la transferencia de datos desde una aplicación Angular renderizada en servidor a una aplicación renderizada en cliente a través del módulo Angular TransferState.

Si después de leer este artículo quieres aprender más sobre Angular Universal, el siguiente curso de Udemy tiene una sección dedicada a ello, además de cubrir muchos otros conceptos importantes de Angular (enlace de afiliado):

En pocas palabras, prerendering también sirve una versión renderizada del servidor de tu sitio que la versión renderizada del cliente ‘tomará’. La diferencia entre el prerendering y el renderizado universal es que cada página/ruta de tu sitio se renderiza en tiempo de compilación en lugar de en tiempo de ejecución.