El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Angular Universal

Siguiente ►
►

Introducción a Angular Universal

Angular Universal es una tecnología que permite la renderización del lado del servidor (SSR) para aplicaciones Angular. Esto significa que en lugar de que el navegador del cliente renderice la aplicación, el servidor lo hace y envía el HTML completamente renderizado al cliente. Esto puede mejorar significativamente el rendimiento de la aplicación y la optimización para motores de búsqueda (SEO).

Beneficios de Angular Universal

  1. Mejora del Rendimiento Inicial: La aplicación se carga más rápido porque el HTML ya está renderizado en el servidor.
  2. Mejor SEO: Los motores de búsqueda pueden indexar mejor el contenido de la aplicación.
  3. Compatibilidad con Dispositivos Antiguos: Los dispositivos con capacidades limitadas pueden beneficiarse de la renderización del lado del servidor.

Configuración de Angular Universal

Paso 1: Crear una Nueva Aplicación Angular

Si aún no tienes una aplicación Angular, puedes crear una nueva utilizando Angular CLI:

ng new my-universal-app
cd my-universal-app

Paso 2: Añadir Angular Universal a la Aplicación

Utiliza Angular CLI para añadir Angular Universal a tu proyecto:

ng add @nguniversal/express-engine

Este comando configura automáticamente tu aplicación para usar Angular Universal con Express.js.

Paso 3: Configurar el Servidor

El comando anterior crea un archivo server.ts en la raíz del proyecto. Este archivo configura un servidor Express para renderizar tu aplicación Angular del lado del servidor.

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/my-universal-app/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

Paso 4: Actualizar angular.json

Asegúrate de que angular.json esté configurado correctamente para la compilación del lado del servidor:

{
  "projects": {
    "my-universal-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-universal-app/browser"
          }
        },
        "server": {
          "options": {
            "outputPath": "dist/my-universal-app/server"
          }
        }
      }
    }
  }
}

Paso 5: Compilar y Ejecutar la Aplicación

Compila la aplicación para el navegador y el servidor:

ng build --prod
ng run my-universal-app:server

Inicia el servidor:

node dist/my-universal-app/server/main.js

Ahora, tu aplicación Angular está siendo renderizada del lado del servidor.

Ejemplo Práctico

Crear un Componente Simple

Vamos a crear un componente simple para ver cómo funciona la renderización del lado del servidor.

ng generate component hello-world

En hello-world.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, Angular Universal!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloWorldComponent {}

Añade el componente al app.component.html:

<app-hello-world></app-hello-world>

Verificar la Renderización del Lado del Servidor

Inicia el servidor y abre http://localhost:4000 en tu navegador. Inspecciona el código fuente de la página y verás que el HTML del componente HelloWorldComponent está presente, lo que indica que ha sido renderizado del lado del servidor.

Conclusión

En esta sección, hemos aprendido qué es Angular Universal y cómo puede beneficiar a nuestras aplicaciones Angular mediante la renderización del lado del servidor. Hemos configurado una aplicación Angular para usar Angular Universal y hemos visto un ejemplo práctico de cómo funciona. Con Angular Universal, podemos mejorar el rendimiento inicial de nuestras aplicaciones y hacerlas más amigables para los motores de búsqueda.

En el próximo tema, exploraremos técnicas avanzadas para optimizar el rendimiento de nuestras aplicaciones Angular.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados