Angular vs angular universal

Angular universal

Para entender lo que esto significa, recordemos que en una aplicación normal de una sola página, normalmente llevamos los datos al cliente y luego construimos el HTML que representa esos datos en el último segundo en el lado del cliente.

Pero en ciertas situaciones y por buenas razones, es posible que queramos en cambio hacer ese renderizado antes de tiempo, por ejemplo en el servidor o en el momento de construir la aplicación: y eso es exactamente lo que Angular Universal nos permite hacer.

Cuando usamos Angular Universal, renderizamos el HTML y CSS inicial que se muestra al usuario antes de tiempo. Podemos hacerlo, por ejemplo, en tiempo de compilación, o sobre la marcha en el servidor cuando el usuario solicita la página.

Esta aplicación cliente de Angular se encargará entonces de la página, y a partir de ahí todo funcionará como una aplicación normal de una sola página, lo que significa que todo el renderizado en tiempo de ejecución ocurrirá directamente en el cliente como es habitual.

Como sabemos, una página única cuando se carga inicialmente es esencialmente un archivo index.html vacío con casi nada de HTML. Esto significa que cuando este archivo HTML es renderizado inicialmente por el navegador, todo lo que el usuario verá es una pantalla completamente en blanco.

Introducción a Angular

El primer comando npm run build:ssr compilará tu sitio en un archivo que puede ser servido usando una aplicación NodeJS Express, como ves en server.ts. De esta manera, sólo tendrás un archivo index.html, pero dependiendo de tu ruta, universal entregará un archivo html renderizado para esa ruta al navegador. Por lo tanto, está renderizando en el servidor, renderizando del lado del servidor.

El segundo comando npm run prerender utilizará el server.ts para “pre-renderizar” cada una de las rutas con su propio archivo index.html individual, todo colocado en una estructura de directorios de acuerdo a sus rutas. El código compilado se parece a un sitio web estático tradicional. Por lo tanto, está renderizando antes de desplegar, pre-renderizando.

Tutorial de Angular

Angular Universal puede describirse como el proceso de renderización de su aplicación a HTML en el servidor (es decir, Node.js), también conocido como renderización del lado del servidor (SSR), a diferencia de las aplicaciones típicas de Angular, como las aplicaciones de una sola página (SPA), en las que la renderización se produce en el navegador, un proceso que también puede denominarse renderización del lado del cliente (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 rango SEO, la “casa” de tu sitio será más pequeña y más rápida de cargar. Pero esto no sólo es importante para el SEO, si también tienes una aplicación regular de Angular siempre es importante usar Lazy Loading.

Cuando empiezas un proyecto estarás tentado 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. Eso es un gran error cuando quieres que tus páginas/app se carguen rápidamente porque habrá algunas páginas que no necesitan una biblioteca o componente en particular pero se cargan porque los has añadido en esa biblioteca compartida. Así que tómate tu tiempo y ten todos los módulos con las librerías específicas que necesitas

Angular 14

Pero en la aplicación soportada por SSR, el servidor también hace toda la configuración necesaria y luego envía la respuesta final al navegador. El navegador renderiza la respuesta e inicia la aplicación SPA. La aplicación SPA se hace cargo desde allí y las solicitudes posteriores se desvían a la aplicación SPA. El flujo de SPA y SSR es como se muestra en el siguiente diagrama.

Para habilitar SSR en Angular, Angular debe ser capaz de renderizar en el servidor. Para ello, Angular proporciona una tecnología especial llamada Angular Universal. Es una tecnología bastante nueva y está en continua evolución. Angular Universal sabe cómo renderizar la aplicación Angular en el servidor. Podemos actualizar nuestra aplicación a Angular Universal para soportar SSR.