Angular Universal

Características de la tecnología client-side (SPA Angular)

👍Usabilidad casi nativa: muy útil en aplicaciones empresariales con usuarios identificados donde se hace un uso intensivo y repetido.

👎Descarga inicial lenta: la primera visita exige una gran descarga y el contenido se genera ejecutando JS lo que ralentiza la carga.

👎Indexado nulo: si no es nulo, al menos no indexa de manera inmediata.

Modelo AppShell

Permite pre-renderizar en tiempo de desarrollo el index.html para desplegarlo en la aplicación y que el usuario reciba algo de contenido en la primera carga para amortiguar la primera carga.

https://next.angular.io/cli/generate#appShell-command

Configurar AppShell

ng g appShell

El comando anterior crea el componente app-shell en el que tenemos el HTML que se va a pre-renderizar. Modificar este HTML en función de lo que queramos mostrar en la primera carga. Puede ser un simple gif de carga o ciertos datos.

Ejecutar app-shell (se ha añadido el comando app-shell a angular.json)

ng run project-name:app-shell

Probar el compilado generado (se genera una carpeta de distribución en ./dist)

npm i angular-http-server
angular-http-server --open -p 8082 --path ./dist/project-name/browser

D-SSR – Dynamic site server rendering

Consiste en renderizar las páginas en el servidor y enviar el HTML ya preparado al cliente.

Ventajas:

  • Mejora el tiempo de carga en que el usuario ve algo en la primera visita
  • Es SEO friendly. El contenido ya se puede indexar como en cualquier otra tecnología de renderizado en el servidor PHP, ASP NET…

Problemas:

  • Hay que tener cuidado con el uso de APIs que no están disponibles en Node como localStorate, windows, etc..

Añadir Angular Universal

ng add @nguniversal/express-engine --clientProject universal-app

Compilar y generar los paquetes necesarios para Angular Universal. El siguiente comando compilará las 3 aplicaciones necesarias: una para el cliente, otra para el servidor y el servidor Node necesario para renderizar la aplicación.

Añadir un nuevo comando a package.json para facilitar la ejecución de comandos

"build-and-serve:ssr": "npm run build:ssr && npm run serve:ssr"

Ejecutar:

npm run build-and-serve:ssr

SSG – Static site generator

Se renderizan todas las páginas en la máquina de desarrollo y se generan archivos estáticos para cada URL.

La ventaja frente a los anteriores es la velocidad. Tener una página ya renderizada en el servidor y servirla directamente es imbatible en cuanto a velocidad.

Una librería que nos permite generar un sitio estático a partir de angular es Scully.

👇Tu comentario