Configuración de Server Routing en Angular

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:0010:43

Configuración de Server Routing en Angular

Curso de Angular Avanzado

Clase 34 de 36

Clase 34 / 36

Recursos

El Server Routing en Angular representa una evolución significativa en el control que los desarrolladores tienen sobre las estrategias de renderizado. Esta característica experimental permite personalizar cómo se renderizan diferentes rutas de nuestra aplicación, ofreciendo un equilibrio óptimo entre rendimiento, SEO y experiencia de usuario.

¿Qué es el Server Routing en Angular?

El Server Routing es una característica experimental de Angular que permite definir estrategias de renderizado específicas para diferentes rutas de nuestra aplicación. Aunque actualmente se encuentra en fase experimental, es probable que se convierta en una característica estable en próximas versiones debido a su utilidad.

Esta funcionalidad nos brinda la flexibilidad de decidir qué páginas queremos que sean:

Renderizadas del lado del servidor (Server-Side Rendering)
Renderizadas del lado del cliente (Client-Side Rendering)
Pre-renderizadas (Static Site Generation)

La principal ventaja es que podemos combinar estas estrategias en una misma aplicación, optimizando cada ruta según sus necesidades específicas.

¿Por qué necesitamos el Server Routing?

Cuando implementamos Server-Side Rendering (SSR) en una aplicación Angular, tradicionalmente todas las páginas siguen esta estrategia. Sin embargo, esto puede no ser ideal para todas las rutas:

Algunas páginas altamente dinámicas funcionan mejor con Client-Side Rendering
Páginas con contenido estático se benefician más del pre-rendering
Páginas críticas para SEO necesitan Server-Side Rendering

El Server Routing nos permite elegir específicamente qué estrategia aplicar a cada ruta, en lugar de usar un enfoque único para toda la aplicación.

¿Cómo implementar Server Routing en Angular?

La implementación del Server Routing requiere algunos pasos de configuración. Si estás creando un nuevo proyecto, puedes incluir esta característica desde el inicio agregando la opción --server-routing al comando de creación.

Para proyectos existentes, la configuración es manual pero sencilla:

Paso 1: Crear el archivo de configuración de rutas del servidor

Debemos crear un archivo llamado app.routes.server.ts donde definiremos qué estrategia de renderizado seguirá cada ruta:

export const serverRoutes = [
  {
    path: 'locations',
    rendering: 'client'
  },
  {
    path: 'about',
    rendering: 'pre-render'
  },
  {
    path: '**',
    rendering: 'server'
  }
];

En este ejemplo:

La ruta locations utilizará Client-Side Rendering
La ruta about será pre-renderizada (Static Site Generation)
Cualquier otra ruta utilizará Server-Side Rendering

Paso 2: Configurar el proveedor de Server Routing

Debemos modificar el archivo app.config.server.ts para incluir el proveedor de Server Routing:

import { serverRoutes } from './app.routes.server';
import { provideServerRouting } from '@angular/ssr';

export const appConfig = {
  providers: [
    // Otros proveedores...
    provideServerRouting(serverRoutes)
  ]
};

Paso 3: Configurar el modo de salida

Finalmente, debemos configurar el angular.json para especificar el modo de salida:

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "outputMode": "server"
          }
        }
      }
    }
  }
}

Con esta configuración, ya no es necesario mantener un archivo routes.txt separado para las rutas pre-renderizadas, ya que toda la configuración de renderizado está centralizada en el archivo app.routes.server.ts.

¿Cuándo usar cada estrategia de renderizado?

La elección de la estrategia adecuada para cada ruta depende de varios factores:

Server-Side Rendering

Ideal para:

Páginas que necesitan buen SEO
Contenido que cambia con frecuencia pero necesita indexación
Primera carga rápida para mejorar métricas de rendimiento

Client-Side Rendering

Ideal para:

Páginas con alta interactividad
Contenido muy dinámico
Rutas que no necesitan SEO, como páginas de login
Secciones protegidas o privadas

Pre-rendering (Static Site Generation)

Ideal para:

Páginas con contenido estático
Secciones informativas como "Acerca de", "Términos y condiciones"
Contenido que cambia con poca frecuencia

Un caso práctico mencionado en la clase es la página de login. Esta ruta generalmente no necesita ser optimizada para motores de búsqueda, por lo que podría configurarse para usar Client-Side Rendering, ahorrando recursos del servidor.

El Server Routing en Angular nos permite crear aplicaciones más eficientes y optimizadas, adaptando la estrategia de renderizado a las necesidades específicas de cada sección de nuestra aplicación. Aunque sea una característica experimental, su potencial para mejorar el rendimiento y la experiencia de usuario la convierte en una herramienta valiosa para los desarrolladores de Angular.

¿Has probado ya esta característica en tus proyectos? ¿Qué estrategias de renderizado utilizarías para diferentes tipos de páginas? Comparte tu experiencia en los comentarios.

Resumen

¿Qué es el Server Routing en Angular?

Esta funcionalidad nos brinda la flexibilidad de decidir qué páginas queremos que sean:

Renderizadas del lado del servidor (Server-Side Rendering)
Renderizadas del lado del cliente (Client-Side Rendering)
Pre-renderizadas (Static Site Generation)

La principal ventaja es que podemos combinar estas estrategias en una misma aplicación, optimizando cada ruta según sus necesidades específicas.

¿Por qué necesitamos el Server Routing?

Cuando implementamos Server-Side Rendering (SSR) en una aplicación Angular, tradicionalmente todas las páginas siguen esta estrategia. Sin embargo, esto puede no ser ideal para todas las rutas:

Algunas páginas altamente dinámicas funcionan mejor con Client-Side Rendering
Páginas con contenido estático se benefician más del pre-rendering
Páginas críticas para SEO necesitan Server-Side Rendering

El Server Routing nos permite elegir específicamente qué estrategia aplicar a cada ruta, en lugar de usar un enfoque único para toda la aplicación.

¿Cómo implementar Server Routing en Angular?

Para proyectos existentes, la configuración es manual pero sencilla:

Paso 1: Crear el archivo de configuración de rutas del servidor

Debemos crear un archivo llamado app.routes.server.ts donde definiremos qué estrategia de renderizado seguirá cada ruta:

export const serverRoutes = [
  {
    path: 'locations',
    rendering: 'client'
  },
  {
    path: 'about',
    rendering: 'pre-render'
  },
  {
    path: '**',
    rendering: 'server'
  }
];

En este ejemplo:

La ruta locations utilizará Client-Side Rendering
La ruta about será pre-renderizada (Static Site Generation)
Cualquier otra ruta utilizará Server-Side Rendering

Paso 2: Configurar el proveedor de Server Routing

Debemos modificar el archivo app.config.server.ts para incluir el proveedor de Server Routing:

import { serverRoutes } from './app.routes.server';
import { provideServerRouting } from '@angular/ssr';

export const appConfig = {
  providers: [
    // Otros proveedores...
    provideServerRouting(serverRoutes)
  ]
};

Paso 3: Configurar el modo de salida

Finalmente, debemos configurar el angular.json para especificar el modo de salida:

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "outputMode": "server"
          }
        }
      }
    }
  }
}

¿Cuándo usar cada estrategia de renderizado?

La elección de la estrategia adecuada para cada ruta depende de varios factores:

Server-Side Rendering

Ideal para:

Páginas que necesitan buen SEO
Contenido que cambia con frecuencia pero necesita indexación
Primera carga rápida para mejorar métricas de rendimiento

Client-Side Rendering

Ideal para:

Páginas con alta interactividad
Contenido muy dinámico
Rutas que no necesitan SEO, como páginas de login
Secciones protegidas o privadas

Pre-rendering (Static Site Generation)

Ideal para:

Páginas con contenido estático
Secciones informativas como "Acerca de", "Términos y condiciones"
Contenido que cambia con poca frecuencia

¿Has probado ya esta característica en tus proyectos? ¿Qué estrategias de renderizado utilizarías para diferentes tipos de páginas? 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

Configuración de Server Routing en Angular