Server Side Rendering con Angular: Mejora Rendimiento y SEO

Contenido del curso

Configuración Inicial

Gestión de Entornos

Nuevas Funcionalidades en Angular

Server-Side Rendering (SSR) y Navegación

Optimización de Rendimiento

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:26

Server Side Rendering con Angular: Mejora Rendimiento y SEO

Curso de Angular Avanzado

Clase 23 de 36

Clase 23 / 36

Recursos

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

Detén cualquier proceso de desarrollo que esté ejecutándose (ng serve).
Ejecuta el siguiente comando en la terminal:

ng add @angular/ssr

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:

Ejecuta tu aplicación con ng serve
Abre tu navegador y navega a tu aplicación
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.

Configuración Inicial

Curso Avanzado de Desarrollo con Angular para eCommerce

Clona y explora el proyecto base de Angular

Configuración de ESLint y Prettier en proyectos Angular

Prettier y ESLint sin conflictos en Angular

Gestión de Entornos

Manejo de environments en Angular

Ambiente de staging en Angular paso a paso

Nuevas Funcionalidades en Angular

Variables locales con @let en Angular

Lazy loading de imágenes con ngSrc en Angular

URLs amigables para SEO en Angular

"Reactividad en Angular: Migración a Input Signals"

Migración automática de @Input a signals en Angular

Migración de Outputs en Angular: De Decoradores a Funciones

linkedSignal en Angular: computed con set

Sincronización de Componentes en Angular con Model y Signals

toSignal: Observables de RxJS como Signals

Conversión de Observables a Signals en Angular con toSignal

Interoperabilidad de RXDS y Signals en Angular: Uso de RX Resourcers

Manejo de Parámetros Reactivos con RX Resource en Angular

Manejo de Promesas y Fetch en Angular sin RXJS

Reactividad en Angular: Uso de Signals para Consultas DOM

Configuración de Prettier para HTML en Angular

Server-Side Rendering (SSR) y Navegación

Migración al Application Builder de Angular

Server Side Rendering con Angular: Mejora Rendimiento y SEO

afterNextRender: código seguro solo en el browser

Geolocalización y APIs: Creando un Mapa de Tiendas Cercanas

Pre-rendering en Angular con ng build

Desplegando Angular SSR en Firebase

Optimización de Rendimiento

Generación de Meta Tags Dinámicos con Angular y Open Graph

Creación de MetaTags Dinámicos en Angular

Proceso de Hydration y Event Replay en Angular

Productos relacionados con RxResource en Angular

Carga diferida de componentes en Angular para mejorar rendimiento

Optimización de Incremental Hydration en Angular

Configuración de Server Routing en Angular

Aplicaciones Sin Zone.js: Migración a Signals en Angular

Cierre del curso avanzado de Angular

Server Side Rendering con Angular: Mejora Rendimiento y SEO