Rutas del servidor y modos de renderizado
Configurar prerender, SSR y CSR por ruta
Rutas del servidor y modos de renderizado es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
No hay una solución única
No todas las rutas deben renderizarse de la misma forma. Angular SSR permite asignar un modo de renderizado por ruta: renderizado en el servidor, en el cliente o prerenderizado durante la compilación.
Los tres modos
RenderMode.Server renderiza en cada solicitud, RenderMode.Client renderiza únicamente en el navegador (CSR) y RenderMode.Prerender genera HTML estático durante la compilación (SSG).
Configuración de las rutas del servidor
Defina un ServerRoute[] que asigne rutas a modos de renderizado y, después, proporciónelo mediante provideServerRouting en la configuración del servidor.
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '', renderMode: RenderMode.Prerender },
{ path: 'dashboard', renderMode: RenderMode.Client },
{ path: '**', renderMode: RenderMode.Server }
];Conectarlo todo
Registre las rutas en la configuración de la aplicación del servidor para que el motor SSR sepa cómo gestionar cada ruta.
// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';
providers: [
provideServerRendering(),
provideServerRouting(serverRoutes)
]Cuándo prerenderizar
Elija Prerender para páginas públicas y estables: inicio, información y documentación. Se compilan una vez en HTML y se sirven al instante desde una CDN, sin coste de servidor por solicitud.
Cuándo usar Server
Elija Server para páginas cuyo contenido cambia en cada solicitud o según el usuario, pero que siguen necesitando SEO o un primer renderizado rápido, como una página de producto con existencias actualizadas.
Cuándo usar Client
Elija Client para páginas privadas y muy interactivas en las que el SEO y el primer renderizado importan poco, como un panel autenticado. El servidor envía una estructura básica y el navegador se encarga del renderizado.
Prerenderizar parámetros dinámicos
Para las rutas parametrizadas, debe indicar al prerenderizador qué parámetros generar devolviendo una lista mediante getPrerenderParams.
{
path: 'product/:id',
renderMode: RenderMode.Prerender,
async getPrerenderParams() {
const ids = await fetchProductIds();
return ids.map(id => ({ id }));
}
}Alternativa para el prerenderizado
Los parámetros que no se prerendericen pueden recurrir al renderizado en el servidor o en el cliente durante la ejecución. Así puede prerenderizar los elementos populares y renderizar bajo demanda los menos frecuentes.
Encabezados y estado por ruta
Las rutas del servidor pueden establecer encabezados de respuesta y códigos de estado, algo útil para la política de caché o para devolver un 404 desde un gestor de rutas no encontradas.
{
path: 'old-page',
renderMode: RenderMode.Server,
headers: { 'Cache-Control': 'no-store' }
}Combinar modos estratégicamente
Una aplicación real combina los modos: prerenderiza las páginas de marketing, renderiza en el servidor las páginas dinámicas críticas para el SEO y renderiza en el cliente la aplicación protegida por inicio de sesión. Así optimiza conjuntamente los costes y el rendimiento.
Comprobación rápida
Compruebe sus conocimientos sobre los modos de renderizado.
Resumen
Configuró el renderizado por ruta con ServerRoute[] y provideServerRouting: Prerender para páginas públicas estables, Server para páginas dinámicas que necesitan SEO y Client para páginas privadas e interactivas, incluidos los parámetros de prerenderizado para rutas dinámicas.
Preguntas frecuentes
¿La lección «Rutas del servidor y modos de renderizado» es gratis?
Sí — el texto completo de «Rutas del servidor y modos de renderizado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Rutas del servidor y modos de renderizado»?
Configurar prerender, SSR y CSR por ruta Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Rutas del servidor y modos de renderizado»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué usar renderizado del lado del servidor
- Configurar Angular SSR
- Rutas del servidor y modos de renderizado
- Transferir el estado al cliente