Habilitar SSR en Angular

En este artículo explicamos cómo habilitar Server Side Rendering SSR en una aplicación Angular, traducido y adaptado para desarrolladores que buscan mejorar SEO y rendimiento en tiempo de carga. Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida que ofrece soluciones integrales en inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y mucho más, y puede ayudarte a implementar SSR en proyectos de producción.

Por qué añadir SSR. Angular normalmente renderiza en el navegador, lo que no es óptimo para indexación por buscadores ni para la primera pintura. SSR aporta mejor indexación de contenido dinámico, primera pintura más rápida y mejor Time to Interactive TTI, posibilita devolver códigos HTTP personalizados como 404 y permite renderizado previo para editores de CMS.

Escenario real: manejo de códigos HTTP personalizados como 404. Imagina páginas que deben devolver un código 404 cuando no existen. En aplicaciones que se ejecutan solo en el cliente no se puede devolver un código HTTP desde el servidor, pero con SSR podemos inyectar el objeto de respuesta del servidor y establecer status codes personalizados.

Biblioteca utilizada. La opción recomendada es usar el adaptador Express de Angular Universal a través de @nguniversal/express-engine para renderizar Angular en el servidor y controlar la respuesta HTTP.

Paso a paso para habilitar SSR. Paso 1 ejecutar el comando ng add @nguniversal/express-engine para añadir Angular Universal al proyecto. Paso 2 verificar que existan los archivos server.ts main.ts main.server.ts y que angular.json tenga un target server configurado.

Configuración de server.ts. En server.ts debes crear un servidor Express que utilice el engine de SSR para renderizar documentos server side y exponer recursos estáticos desde la carpeta browser. Asegúrate de proveer providers como APP_BASE_HREF y el token RESPONSE del engine de express para poder acceder a la respuesta HTTP desde componentes renderizados en el servidor.

Modificaciones en main.ts y main.server.ts. main.ts sigue arrancando la app en el cliente con platformBrowserDynamic, mientras que main.server.ts exporta el módulo servidor para bootstrapping en SSR. Esto permite tener dos puntos de entrada separados para cliente y servidor.

Cómo ejecutar SSR. Añade en package.json un script que ejecute el servidor compilado, por ejemplo un script serve:ssr:MiApp que haga node dist/mi-app/server/server.mjs y luego ejecuta npm run serve:ssr:MiApp.

Ejemplo práctico 404 con SSR. Para devolver un 404 desde un componente renderizado en el servidor, inyecta el token RESPONSE proporcionado por @nguniversal/express-engine/tokens y desde ngOnInit comprueba si response existe. Si existe asigna response.statusCode = 404 y response.statusMessage = Page Not Found. De este modo cualquier componente puede actualizar el estado HTTP cuando se renderiza en el servidor.

Integración con CMS y BFF. Si tu arquitectura incluye un BFF Backend for Frontend o un registro de páginas que mapea respuestas a componentes, puedes detectar cuando la respuesta de backend trae un 404 y redirigir automáticamente al componente 404, que a su vez asignará el código HTTP correcto usando el token RESPONSE. Esto es especialmente útil en aplicaciones CMS driven y en proyectos con rutas dinámicas.

Consideraciones de seguridad y despliegue. Al añadir SSR y un servidor Express es importante asegurar certificados TLS, revisar cabeceras HTTP y mantener prácticas de ciberseguridad para proteger endpoints. Q2BSTUDIO ofrece servicios de ciberseguridad y pentesting que ayudan a auditar y asegurar despliegues SSR y APIs.

Beneficios para negocio y SEO. Implementar SSR mejora la indexación en buscadores y la experiencia de usuario inicial, lo que repercute positivamente en métricas de negocio. Además, combinado con soluciones de inteligencia de negocio y visualización como Power BI se potencia el análisis y toma de decisiones sobre métricas de rendimiento y uso.

Servicios relacionados y cómo te podemos ayudar. Si necesitas desarrollar aplicaciones a medida o software a medida con SSR y arquitectura BFF, en Q2BSTUDIO diseñamos y construimos soluciones personalizadas. Conecta con nuestros expertos en desarrollo consultando nuestra página de aplicaciones a medida en desarrollo de aplicaciones y software multicanal. Para proyectos que requieren capacidades avanzadas de inteligencia artificial, agentes IA o IA para empresas ofrecemos servicios especializados que integran modelos y automatización; conoce más en servicios de inteligencia artificial.

Palabras clave. Este artículo aborda temas relevantes para aplicaciones a medida y software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi para mejorar posicionamiento y resultados.

Conclusión. Habilitar SSR en Angular con Angular Universal aporta una mejora notable en SEO y rendimiento sin sacrificar la flexibilidad del framework. Si necesitas apoyo para implementar SSR, optimizar rendimiento, integrar con CMS o desplegar en servicios cloud aws y azure, contacta con Q2BSTUDIO para una consultoría y desarrollo a medida.