Configuración de Server Routing en Angular

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.