Server routing

Configurar rutas ServerRoute

El enrutado del servidor en Angular SSR permite definir rutas que se procesan específicamente en el lado del servidor, optimizando el rendimiento y la experiencia del usuario. Las rutas ServerRoute proporcionan un control granular sobre cómo se manejan las diferentes URLs durante el renderizado del servidor.

Definición de ServerRoute

Una ServerRoute es una configuración que especifica cómo el servidor debe manejar una ruta particular durante el proceso de SSR. Estas rutas se definen en la configuración del servidor y permiten establecer comportamientos específicos como prerenderizado, carga de datos o configuraciones de caché.

import { ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '/home',
    renderMode: 'prerender'
  },
  {
    path: '/products/**',
    renderMode: 'server'
  },
  {
    path: '/api/**',
    renderMode: 'client'
  }
];

Modos de renderizado

Las rutas del servidor admiten diferentes modos de renderizado que determinan cuándo y cómo se procesa cada ruta:

• prerender: La ruta se genera en tiempo de build y se sirve como HTML estático
• server: La ruta se renderiza dinámicamente en el servidor para cada solicitud
• client: La ruta se renderiza exclusivamente en el navegador del cliente

export const serverRoutes: ServerRoute[] = [
  // Página de inicio prerenderizada para mejor rendimiento
  {
    path: '/',
    renderMode: 'prerender'
  },
  // Páginas de producto dinámicas renderizadas en servidor
  {
    path: '/product/:id',
    renderMode: 'server',
    preload: true
  },
  // Panel de administración renderizado en cliente
  {
    path: '/admin/**',
    renderMode: 'client'
  }
];

Configuración en app.config.server.ts

Las rutas del servidor se configuran típicamente en el archivo app.config.server.ts donde se define la configuración específica del servidor:

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering, ServerRoute } from '@angular/ssr';
import { appConfig } from './app.config';

const serverRoutes: ServerRoute[] = [
  {
    path: '/',
    renderMode: 'prerender'
  },
  {
    path: '/blog',
    renderMode: 'prerender'
  },
  {
    path: '/blog/:slug',
    renderMode: 'server',
    headers: {
      'Cache-Control': 'public, max-age=3600'
    }
  }
];

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering({
      routes: serverRoutes
    })
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

Opciones avanzadas de configuración

Las rutas del servidor admiten opciones adicionales para un control más preciso del comportamiento de renderizado:

export const serverRoutes: ServerRoute[] = [
  {
    path: '/catalog/:category',
    renderMode: 'server',
    // Precargar datos necesarios para la ruta
    preload: true,
    // Configurar headers HTTP personalizados
    headers: {
      'Cache-Control': 'public, max-age=1800',
      'X-Custom-Header': 'catalog-page'
    },
    // Configurar metadata específica
    metadata: {
      priority: 'high',
      description: 'Páginas de catálogo con renderizado dinámico'
    }
  }
];

Patrones de rutas y comodines

El sistema de rutas del servidor soporta patrones flexibles para manejar grupos de rutas similares:

export const serverRoutes: ServerRoute[] = [
  // Rutas estáticas específicas
  {
    path: '/about',
    renderMode: 'prerender'
  },
  // Patrones con parámetros
  {
    path: '/user/:id',
    renderMode: 'server'
  },
  // Comodines para subcarpetas
  {
    path: '/docs/**',
    renderMode: 'prerender'
  },
  // API routes manejadas por el cliente
  {
    path: '/api/**',
    renderMode: 'client'
  }
];

Integración con el build process

Durante el proceso de construcción, Angular analiza las rutas ServerRoute configuradas para optimizar la generación de la aplicación. Las rutas marcadas como prerender se procesan durante el build, mientras que las rutas server se preparan para renderizado dinámico.

El CLI de Angular utiliza esta configuración para generar los archivos necesarios y configurar el servidor de producción apropiadamente, asegurando que cada ruta se maneje según su modo de renderizado especificado.