Server Side Rendering con Angular: Mejora Rendimiento y SEO

Clase 23 de 36 • Curso de Angular Avanzado

Clase anteriorSiguiente clase

Resumen

El Server Side Rendering (SSR) representa una evolución significativa en el desarrollo web moderno, especialmente para aplicaciones Angular. Esta técnica optimiza el rendimiento y mejora la visibilidad en buscadores al trasladar la carga de renderizado desde el navegador del usuario hacia el servidor. Descubre cómo implementar SSR en tu proyecto Angular y potencia tu aplicación web con mejoras sustanciales en velocidad y SEO.

¿Qué es el Server Side Rendering y por qué implementarlo?

El Server Side Rendering es una técnica que permite renderizar una aplicación web en el servidor antes de enviarla al navegador del cliente. Esto significa que cuando un usuario accede a tu sitio web, recibe una página ya renderizada y lista para mostrar, en lugar de tener que esperar a que su navegador procese todo el JavaScript para construir la interfaz.

Las principales ventajas de implementar SSR son:

  • Mejor rendimiento: La carga inicial es más rápida porque el usuario recibe contenido ya renderizado.
  • Optimización para SEO: Los motores de búsqueda pueden indexar correctamente el contenido de tu sitio.
  • Mejor experiencia en dispositivos con recursos limitados: Al reducir la carga de procesamiento en el cliente.

Es importante destacar que SSR es especialmente útil para aplicaciones públicas como eCommerce o landing pages, donde el rendimiento inicial y el SEO son cruciales. Para aplicaciones de tipo "back office" o administrativas protegidas por login, el beneficio puede ser menor.

¿Cómo afecta el SSR al SEO de tu aplicación?

Sin SSR, cuando un crawler de motores de búsqueda como Google o Bing visita tu aplicación Angular, lo que ve es básicamente un HTML vacío sin contenido real. Esto ocurre porque el contenido se genera dinámicamente mediante JavaScript en el navegador del usuario.

Para comprobar esto, puedes hacer clic derecho en tu página y seleccionar "View page source". En una aplicación Angular tradicional (client-side rendering), verás un HTML prácticamente vacío, sin información sobre tus productos, categorías o cualquier otro contenido dinámico.

Esta falta de contenido visible para los crawlers afecta negativamente al SEO, ya que los motores de búsqueda no pueden indexar correctamente tu sitio ni entender de qué trata.

¿Cómo implementar Server Side Rendering en Angular?

Implementar SSR en Angular es sorprendentemente sencillo gracias a las herramientas que el framework proporciona. El proceso se realiza mediante un único comando que configura automáticamente tu aplicación.

Paso a paso para habilitar SSR en tu proyecto Angular

  1. Detén cualquier proceso de desarrollo que esté ejecutándose (ng serve).
  2. Ejecuta el siguiente comando en la terminal:
ng add @angular/ssr
  1. El comando te hará algunas preguntas de configuración:
    • Confirma la versión de SSR a instalar.
    • Para la pregunta sobre "server routing and API engine APIs", puedes seleccionar "No" por ahora (estas son características avanzadas que puedes explorar más adelante).

Este comando realiza varios cambios importantes en tu proyecto:

  • Crea nuevos archivos para manejar el renderizado en el servidor
  • Modifica archivos existentes para soportar SSR
  • Instala dependencias necesarias como Express (un framework para Node.js)
  • Agrega nuevos scripts en el package.json

Cambios principales en la estructura del proyecto

Después de ejecutar el comando, notarás nuevos archivos como:

  • server.ts: Configuración del servidor
  • main.server.ts: Punto de entrada para el renderizado en servidor
  • Archivos de configuración para el browser y el servidor

También se añade un nuevo comando serve:ssr que puedes utilizar para ejecutar tu aplicación con SSR habilitado.

¿Cómo verificar que SSR está funcionando correctamente?

Una vez implementado SSR, puedes comprobar que está funcionando correctamente de la siguiente manera:

  1. Ejecuta tu aplicación con ng serve
  2. Abre tu navegador y navega a tu aplicación
  3. Haz clic derecho y selecciona "View page source"

Ahora, a diferencia de antes, verás que el HTML contiene todo el contenido de tu página, incluyendo productos, categorías y otros elementos dinámicos. Esto significa que el renderizado se está realizando en el servidor y que los crawlers de motores de búsqueda podrán indexar correctamente tu contenido.

Optimizando las peticiones HTTP en el servidor

Al implementar SSR, es posible que veas advertencias relacionadas con el cliente HTTP. Esto ocurre porque las peticiones a la API ahora se realizan desde el servidor en lugar del navegador.

Para optimizar estas peticiones, es recomendable utilizar fetch nativo en lugar del HttpClient de Angular cuando se ejecuta en el servidor:

// En app.config.ts
import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    // Otros providers...
    provideHttpClient(withFetch())
  ]
};

Esta configuración mejora el soporte para peticiones HTTP en entornos Node.js, eliminando las advertencias y optimizando el rendimiento.

¿Qué consideraciones debes tener al implementar SSR?

Al implementar SSR, debes tener en cuenta algunas consideraciones importantes:

  • Infraestructura: Necesitarás un servidor que pueda ejecutar Node.js, lo que implica una conversación con tu equipo de DevOps o infraestructura.
  • APIs del navegador: Algunas funcionalidades solo están disponibles en el navegador (como localStorage, window, alertas, etc.) y no funcionarán en el entorno del servidor.
  • Rendimiento del servidor: El servidor ahora tiene más carga de trabajo, lo que puede requerir más recursos.

Es importante recordar que SSR es solo un paso en la optimización de tu sitio para SEO. Para mejorar realmente tu posicionamiento en buscadores, deberías considerar otras prácticas recomendadas de SEO técnico.

El Server Side Rendering representa un avance significativo para mejorar tanto el rendimiento como la visibilidad de tu aplicación Angular. Con un simple comando, has dado un gran paso hacia una aplicación más rápida y mejor posicionada en los motores de búsqueda. ¿Has notado mejoras en el rendimiento de tu aplicación después de implementar SSR? Comparte tu experiencia en los comentarios.