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.
Contenidos
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.