0Pricing
Angular Academy · Lección

Configurar Angular SSR

Añadir SSR con Angular CLI

Configurar Angular SSR es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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.

Añadir SSR

La forma más rápida de habilitar SSR es usar el schematic ng add @angular/ssr. Este configura el build del servidor, un servidor basado en Express y la hidratación automáticamente.

// terminal
// ng add @angular/ssr

Proyectos nuevos

Al crear una aplicación nueva, puede habilitarlo directamente con la opción de SSR para que el proyecto esté preparado desde el principio.

// ng new my-app --ssr

Qué añade el schematic

Añade un server.ts (servidor Express), un bootstrap main.server.ts, un app.config.server.ts, actualiza angular.json con las opciones del servidor y habilita la hidratación en la configuración de la aplicación.

provideServerRendering

La configuración de la aplicación del servidor proporciona el motor SSR mediante provideServerRendering(), combinado con la configuración del navegador.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

Hidratación en el cliente

La configuración del navegador habilita la hidratación para que el cliente reutilice el HTML del servidor en lugar de volver a renderizarlo. El schematic lo añade automáticamente.

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

El servidor Express

server.ts crea una aplicación Express que sirve recursos estáticos y delega el renderizado del HTML al motor SSR de Angular para el resto de las rutas.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Servidor de desarrollo

Durante el desarrollo, ng serve ejecuta SSR automáticamente con el application builder, por lo que puede ver el resultado renderizado en el servidor y la hidratación sin pasos adicionales.

// ng serve

Compilar para producción

Una compilación de producción genera un bundle browser y otro server. Para servir SSR en producción, debe ejecutar la entrada del servidor de Node.

// ng build
// node dist/my-app/server/server.mjs

API exclusivas del navegador

El código también se ejecuta en el servidor, donde no existen window, document ni localStorage. Proteja el acceso a estos elementos o se producirá un error durante SSR.

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

URL absolutas para HTTP

En el servidor, las URL relativas de las API no tienen un origen. Use URL absolutas o configure una base para que las llamadas de HttpClient del servidor se resuelvan correctamente.

Verificar que SSR funciona

Para confirmar que SSR funciona, solicite una página e inspeccione la respuesta sin procesar (por ejemplo, con curl). Debería ver el contenido renderizado en el HTML, no solo una raíz de aplicación vacía.

// curl http://localhost:4000/ | grep "<h1>"

Comprobación rápida

Compruebe sus conocimientos sobre la configuración de SSR.

Resumen

Configuró SSR con ng add @angular/ssr: este añade un servidor Express, provideServerRendering() y la hidratación del cliente. Recuerde proteger las API exclusivas del navegador, usar URL absolutas en el servidor y verificar el HTML renderizado en la respuesta sin procesar.

Preguntas frecuentes

¿La lección «Configurar Angular SSR» es gratis?

Sí — el texto completo de «Configurar Angular SSR» 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 «Configurar Angular SSR»?

Añadir SSR con Angular CLI 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 2 de 4.

¿Cuánto tiempo toma la lección «Configurar Angular SSR»?

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

  1. Por qué usar renderizado del lado del servidor
  2. Configurar Angular SSR
  3. Rutas del servidor y modos de renderizado
  4. Transferir el estado al cliente
← Volver a Angular Academy