Durante mucho tiempo se pensó que ciertas tecnologías tendrían que emplearse desde el lado del cliente; sin embargo, el avance en este rubro cambió esto, por lo cual han salido al mercado distintas soluciones que permiten realizar cambios desde el servidor. Uno de las mejores soluciones se llama Angular Universal, pero ¿qué es Angular Universal?
¿Qué es?
Antes de hablar de Angular Universal (AU) es necesario hablar de Angular, este es un framework de JavaScript de código abierto y fue escrito en TypeScript. Tiene por objetivo es el desarrollo de aplicaciones de una sola página.
Por su parte, Angular Universal es una tecnología que permite ejecutar la aplicación de Angular desde el servidor, y genera páginas de aplicaciones estáticas en el servidor mediante SSR (server side rendering o en español, renderizado de lado del servidor).
Se podría decir que en el centro está la aplicación de Angular, y está recubierto con la renderización, misma que ocurre gracias a Angular Universal y tiene varios beneficios:
✔ Facilita la indexación del SEO
✔ Mejora el rendimiento de la aplicación en dispositivos de baja potencia
✔ Muestra la primera página de forma más rápida
✔ Pre-rendering: precarga los elementos de una página
AU permite al usuario pre-renderizar alguna aplicación de Angular desde el servidor. Por lo cual, en caso de querer ver una página y esta no cargue, la carga se dará a través del servidor, solucionando el problema. Además, esto brinda tiempo para que la página de la aplicación arranque de manera correcta y funcione.
¿Por qué Angular necesita de Angular Universal?
Angular presentó una serie de inconvenientes cuando ciertos equipos querían visualizar contenido, lo mismo pasaba cuando se indexaban páginas, por lo cual se optó por implementar una tecnología que resolviera estas problemáticas.
Mientras que la aplicación Angular se ejecuta desde el navegador y muestra las páginas web en el DOM, Angular Universal, ejecuta la página de la aplicación desde el servidor y muestra las páginas de forma estática, por lo cual se ve el diseño de la app y sitios web de forma más rápida antes de volverse interactiva.
Los beneficios que ha proporcionado AU frente a Angular son bastantes; sin embargo, destacan tres rubros.
Función | Angular | Angular Universal |
Facilitar los rastreadores web (SEO):
| Los rastreadores no podrán lograr la navegación e indexar la aplicación de Angular | Con Angular Universal es posible generar una versión estática de la aplicación. Esta se puede buscar, enlazar y navegar sin utilizar JavaScript. También ayuda a visualizar un sitio de manera previa porque la URL devuelve la página renderizada. |
| Mejorar el rendimiento de los dispositivos móviles y de baja potencia | Algunos dispositivos no permiten JavaScript (o no lo ejecutan), por lo cual la experiencia de usuario es mala. | Lanzar versiones de apps sin necesidad de JavaScript y que estén renderizadas en el servidor. Con esta versión sería posible ver la app y usarla. |
| Mostrar la primera página rápidamente | En ocasiones, las aplicaciones Angular no se muestran de manera rápida, por lo cual los usuarios optan por abandonar la página web. | Se generan páginas para la aplicación que se aparecen a la app completa. Estas son HTML, y puede mostrarse incluso aunque JavaScript no esté activado. Con esto, se muestra la página al usuario mientras se carga la aplicación Angular. |
Como se aprecia, gracias a la solución de Angular Universal se tiene velocidad, rastreo y rendimiento, de esta forma, se mejora la experiencia de usuario y es posible realizar SEO sin interrupciones.
Funcionamiento
Contar con Angular Universal es muy sencillo, la página oficial ya cuenta con el esquema para la instalación de la dependencia deseada. La más utilizada es @nguniversal/express-engine. Además, esto permite que los ficheros se modifiquen.
Para iniciar:
- Se verifica que la aplicación de Angular se esté ejecutando y desde la consola se detiene el servidor.
- En la consola se añade el comando ng add @nguniversal/express-engine (o el nombre del package elegido).
- Inicia la instalación del package elegido, así como la creación y modificación de ciertos ficheros.
- Una vez que los ficheros estén listos, se pueden efectuar varias modificaciones con el DOM, así como instalar ciertas dependencias que permitan el trabajo libre del DOM.
- Para comprobar, en la consola se agrega el comando ng build– prod, se da enter y así se puede visualizar el build de la producción.
- Después se ingresa el comando cd list en la consola, una vez que abra el proyecto, se visualiza si está activo en una carpeta browser, esta carpeta ayudará a ejecutar del lado del cliente.
- De nuevo en la consola, se ejecuta el comando npm run prerender y una vez que haya concluido, se podrá revisar que en el proyecto ya existe una nueva carpeta server con otros ficheros. A partir de aquí, Angular sabrá dónde tiene que ejecutarse por su cuenta.
El proceso anterior tiene por packeage a Express-Engine, pero, en caso de querer efectuar el renderizado desde cero, se puede instalar alguno de los packages permitidos por Angular.
Angular Universal se convirtió en una de las herramientas más utilizadas en cuanto a páginas de aplicaciones, pues permite realizar un trabajo más efectivo con respecto al usuario.
En Bambú Mobile nos hemos dado a la tarea de implementar esta y otras soluciones tecnológicas dentro de nuestros proyectos, con la finalidad de ofrecer servicios que sean eficientes y confiables, tanto para nuestros clientes como los usuarios que usan cualquiera de nuestras implementaciones tecnológicas.
Fuentes
Introducción a Angular Universal
Server-side rendering (SSR) with Angular Universal
Angular Universal: a Complete Practical Guide
