Primeros pasos con Angular SSR

Angular es un framework creado a finales de 2016 por Google escrito en TypeScript. Es de código abierto, por lo tanto, lo puedes encontrar en GitHub. Con Angular, además de páginas Single Page Application (SAP), se pueden crear Progressive Web App (PWA), es decir, funciona para escritorio y para móviles.

El Server Side Rendering (SSR) es ejecutar el proyecto al lado del servidor, ya que solo lo hace al lado del cliente: La tecnología con la que podemos crear aplicaciones estáticas al lado del servidor es Angular Universal.

En esta guía explicaré conceptos, ventajas, desventajas y realizando ejemplos claros con Angular Universal.

Ventajas de Angular SSR

✅ Mejor rendimiento de la aplicación: Esto se nota especialmente en los dispositivos de baja potencia. Como el servidor es el que carga la página web, Angular SSR se muestra casi inmediatamente al consultar la página. Por lo tanto, se requiere menos tiempo para visualizar el contenido para mirar la primera página.

✅ Mejoramiento en el SEO: Por la rapidez de la carga, los motores de búsqueda indexan de una manera más eficiente.

✅ Mejora de rastreo de Redes Sociales: Así como el SEO en las páginas web, los rastreadores apoyan redes sociales como X (Antes conocido como Twitter) o Facebook, ya que en cada publicación de enlaces a las plataformas sociales, Angular SSR busca el contenido en la web y hace lo posible para que la publicación sea más llamativa para los usuarios.

Desventajas

❌ Tiempo de carga del servidor: Al tener que procesar y reconstruir la página, se necesitaun tiempo de espera para que algunos recursos se recarguen.

❌ Menos interactividad en la página: Los eventos y las actualizaciones en tiempo real pueden requerir una comunicación adicional con el servidor.

Requisitos

✅ Node.js: versión 18.17.0 o superior.

✅ NPM: versión 9.6.7 o superior.

✅ Angular Cli: versión 16.1.5 o superior.

✅ Editor de código: Puede ser el de tu preferencia. En este caso, usaré Visual Studio Code (VSC).

Para ver las versiones, ejecuta en el CMD o en PowerShell el comando:

ng versión

Paso 1

• Seleccionaremos la opción yes, pero queda a tu elección.
• ¿Qué tipo de hoja de estilos te gustaría usar? En este caso, usando las flechas direccionales, seleccionaremos la primera opción: CSS.

Y ¡listo!, ya hemos creado el proyecto Angular.

Paso 2

Agregar Angular Universal. Se debe ejecutar el comando:

ng add @nguniversal/express-engine

Al ejecutar este comando aparecerá la siguiente pregunta:

¿Te gustaría continuar?

Se debe escribir y.

Si se logran observar los cambios de esta manera es que todo está correcto. De lo contrario, repite el proceso.

Al agregar el paquete, observamos que tenemos nuevas integraciones en el package.json, orientadas a realizar el renderizado al lado del servidor. Entre ellas:

• dev:ssr: Funciona para levantar el proyecto. Su equivalente dell lado del cliente es el script start.
• serve:ssr: Ejecuta el script al lado del servidor, mostrando los cambios que se realizan al momento.
• build:ssr: Genera la carpeta dist del proyecto.
• prerender: Ejecuta el código del lado del servidor, lo que se había creado con el script anterior.

Los scripts se visualizan de la siguiente manera:

Paso 3

Para ejecutar el proyecto se sigue este orden:

✅ Ejecutar en la terminal:

npm run build:ssr

👉Importante: Recuerda estar en la raíz del proyecto, donde está el package.json.

A continuación, vemos en la terminal lo siguiente:

Esto significa que todo se ha realizado exitosamente. Si no es tu caso, verifica que los pasos anteriores estén correctos.

En el proyecto se creará una carpeta llamada dist y dentro de ésta se genera otra con el nombre del proyecto (en este caso se llama practicassg). Asimismo, vemos que se generaron dos carpetas. La segunda, llamada server, será la que ejecutaremos con el comando:

ng run serve:ssr

Con esto, podemos ver el proyecto en un servidor. Para ello, usa Node con Express en:

http://localhost:4000

Para ver la diferencia, ejecuta:

npm run start

El proyecto se podrá ver en http://localhost:4200.

Dentro del navegador, haz clic derecho y selecciona la opción ver código fuente de página o con la combinación en Windows Ctrl + U.

Ahora veremos una comparación entre ambos, de modo de visualizar el SSR:

Con la primera opción, se puede observar código fuente, mientras que con  la segunda vemos solo el link del archivo JavaScript donde se ejecuta el proyecto.

¿Se pueden indexar las páginas a base de Javascript?

La respuesta, en definitiva, es no, ya que no se puede indexar contenido dinámico. Los motores de búsqueda necesitan encontrar archivos HTML y CSS para saber qué es lo que identifican. De lo contrario, ni siquiera la revisarán la página, queda inexistente para ellos.

http://localhost:4000

http://localhost:4200

Llevar el SSR a otro nivel

Si piensas crear páginas web e implementar SEO, entonces el SSR es una mejor opción. ¿Por qué? Si creas sitios estáticos y necesitas refrescar, lo indicado no es desplegar la vista completa en cada cambio. Esto no es lo mejor, porque sobrecargas con recursos al servidor y creas una experiencia negativa para el usuario (y eso es lo primero que debemos evitar).

Para no sufrir estos problemas, podemos usar el Incremental Static Render o sus siglas ISR. En pocas palabras, es hacer SSR pero en tiempo de ejecución. Este tema lo abordaré en un próximo artículo.

Conclusión

Angular es un framework muy robusto y, combinado con el renderizado al lado del servidor, obtendrás una poderosa herramienta con la cual podrás crear aplicaciones muy atractivas. Trabajar con Angular Universal es sencillo: el framework mantiene una comunidad muy activa y se realizan mejoras constantemente. Por lo tanto, encontrarás respuestas a prácticamente todas las preguntas que pueden surgir al momento del desarrollo.

Te invito a que descubras, a que practiques y a que innoves con Angular para potenciar tus habilidades. Si deseas ver el código completo en este artículo, da un vistazo al repositorio en GitHub.

Espero que este contenido sea de mucha ayuda en tus proyectos. Nunca dejes de practicar todos los conocimientos para ser cada vez mejor 💻.

¡Hasta la próxima! 🚀

Referencias

• Associats, C. (2023). Ventajas de trabajar con Angular Universal. CS Associats. https://www.csassociats.com/ventajas-de-trabajar-con-angular-universal/
• Jahollari, E. (2022). Incremental static Regeneration for Angular | ITNEXT. Medium. https://itnext.io/incremental-static-regeneration-for-angular-42b0a8440e53