En los últimos años, Angular se convirtió en uno de los marcos front-end más famosos para desarrollar aplicaciones de una sola página.
La mayoría de la gente piensa que Angular solo funciona en el lado del cliente, pero es parcialmente cierto, ya que hay un concepto en Angular que explica que parte de la aplicación se renderice en el lado del servidor antes de descargarla en su navegador. Este concepto se llama Angular Universal .
Hablemos de ello en detalle y de cómo implementarlo en su aplicación. Antes de pasar a Angular Universal, hablemos brevemente sobre cómo se comporta la aplicación Angular y por qué se necesita Angular Universal.
En general, cuando intentamos ejecutar la aplicación Angular, el JavaScript se descarga primero en el navegador, que luego se procesa dentro del navegador y la página web se muestra al usuario. Generalmente, debido a la alta conectividad, generalmente no notamos todos estos pasos. Pero el problema surge cuando la conectividad es lenta, lleva tiempo descargar los archivos JavaScript requeridos y renderizarlos hasta que estén completos, el usuario ve una página en blanco que puede frustrar a cualquier usuario.
Entonces, para resolver este problema, se introduce el concepto de Angular Universal en Angular.
Angular universal permite al usuario renderizar previamente alguna aplicación angular en el servidor. No es como un JavaScript del lado del servidor. Por lo tanto, no podrá escribir código del lado del servidor dentro de la aplicación angular.
La solicitud inicial se procesa previamente en el servidor y la solicitud js posterior cargará toda la aplicación angular en el navegador para que sea más rápida y reactiva. La primera carga se maneja en el servidor que soluciona el problema de la interfaz de usuario para el usuario si la conexión es lenta. Por lo tanto, el usuario puede ver la primera página web de la aplicación que puede ser la página de autenticación o cualquier otra página, incluso si el JavaScript se ha descargado o renderizado parcialmente debido a un problema de conectividad lenta.
Entonces, esta es la idea básica detrás del Angular Universal. Ahora, veamos cómo implementarlo. Para hacer que su aplicación Angular Universal simplemente ejecute el siguiente comando en la terminal.
ng agregue @nguniversal/express-engine –clientProject nombre del proyecto
Nota: el nombre del proyecto se puede encontrar en el archivo angular.json debajo del proyecto y luego identificatier-name.
Esto agregará la opción de renderizar la aplicación en el servidor y obtendrá las cosas previas al renderizado.
Nota: Si está utilizando Angular 8 o inferior, debe verificar lo siguiente.
ModuleMapLoader debe importarse en app.server.module.ts en la sección de importación. Si no puede encontrar el archivo app.server.module.ts, ejecute el siguiente comando.
npm install –save @nguniversal/module-map-ngfactory-loader
No es necesario realizar el paso anterior para Angular 9 y superior. El módulo anterior ayuda a habilitar la carga diferida en el universal angular.
Ahora, su aplicación está lista para renderizar previamente parte del contenido angular en el servidor. La primera página se renderizaría en el servidor y solo después de que la primera página se renderice y se devuelva al usuario solo entonces toda la aplicación se ejecutará en el navegador como de costumbre.
Ahora bien, este enfoque tiene una implicación importante. Si su primera solicitud que ahora se procesa en el lado del servidor contiene algunos métodos basados en el navegador que no se pueden ejecutar en un servidor como localStorage, su aplicación no se podrá compilar. Para resolver este problema tenemos dos enfoques. Si es posible, lo reemplazamos con otros métodos o nos aseguramos de que dicha solicitud solo se envíe cuando la plataforma sea el navegador y no el servidor. Para verificar si la plataforma es un navegador o un servidor, angular proporciona un método denominado Navegador de plataforma que se puede importar desde @angular/common.
Ahora, use el siguiente comando para construir la aplicación:
npm ejecutar compilación: ssr
Nota: Dado que ahora su aplicación angular se representa parcialmente en el lado del servidor, necesita un servidor node js para ejecutar la aplicación, ya que el host estático no es suficiente para ejecutar su aplicación.
Después de asegurarse de que instaló el servidor node js o cargue la aplicación en el servidor implementado. Ejecute el siguiente comando para ejecutar la aplicación.
npm ejecutar servicio: ssr
Entonces, de esta manera, ahora su aplicación angular aprovecharía al máximo el servidor y puede usarlo para renderizar previamente parte del contenido de la aplicación angular.