Representación del lado del servidor con Angular Universal

    Este tema tiene como objetivo describir qué es el renderizado del lado del servidor y cómo configurarlo dentro de Ignite UI for Angular.

    Angular Universal

    Todas las aplicaciones Angular se ejecutan en el navegador del cliente y, a menudo, esto puede resultar en un impacto negativo en el rendimiento de First Meaningful Paint (FMP), es decir, cuando un navegador muestra por primera vez el contenido principal de una página. Aquí es cuando Angular Universal resulta útil: puede generar el HTML completo para una página en el servidor. Representa una página del lado del cliente en HTML en el servidor que luego se inicia en el cliente. Está bien, pero ¿cómo funciona?

    FMP mide cuándo el contenido principal de una página es visible para el usuario; en cuanto a la métrica FCP, mide cuánto tiempo le toma al navegador representar la primera parte del contenido DOM después de que un usuario navega a su página. Consulte Puntuación de rendimiento de Lighthouse para obtener más información.

    How it works?

    Con Angular Universal, ofrecerá una versión estática de la página de inicio de sus aplicaciones, mientras que al mismo tiempo la aplicación Angular completa se carga en segundo plano. La página de destino será HTML puro y se mostrará incluso si JavaScript está deshabilitado. Puede encontrar más información sobre el renderizado del servidor aquí.

    Usage

    La renderización del lado del servidor es una de las muchas técnicas que forman parte de las pautas de renderización en la web, que pueden:

    • Facilite a los rastreadores web la indexación de su sitio web en los puestos más altos de las búsquedas; mejorará su optimización de motores de búsqueda (SEO).
    • Muestre la primera página rápidamente: la carga lenta de la página inicial no resulta atractiva para los usuarios (si tarda más de 3 segundos en cargarse).
    • Mejore el rendimiento de su aplicación: tendrá un impacto positivo tanto en First Meaningful Paint como en First Contentful Paint.

    Le brinda control total sobre SEO y vistas previas de redes sociales, y mejora el rendimiento general percibido de su aplicación al permitir a los usuarios ver una vista pintada inicial.

    Add SSR to existing Ignite UI application

    Step 1 - Add @nguniversal

    Al utilizar el esquema Angular CLI, podemos ejecutar el siguiente comando:

    ng add @nguniversal/express-engine --clientProject ssr-example

    Este esquema realizará varios cambios en las configuraciones del servidor y cliente de su aplicación, así como comandos npm y actualizaciones de app.module.

    Step 2 - Define all browser-specific objects that are missing

    Dado que las aplicaciones universales se ejecutan en el servidor y no en el navegador, hay algunas cosas que debes tener en cuenta en tu código. Faltan objetos específicos del navegador, como window, document o location, por lo que recomendamos usar domino para la abstracción DOM del lado del servidor. Domino es una implementación DOM del lado del servidor basada en dom.js de Mozilla.

    • instalar domino npm install domino- para abstracción dom del lado del servidor
    • instale xmlhttprequest npm i xmlhttprequest: si usa IgxIconService para registrar íconos
    • Configurar el "servidor.ts"
    // server.ts
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs
  .readFileSync(path.join('dist/browser', 'index.html'))
  .toString();
const window = domino.createWindow(template);

// Ignite UI browser objects abstractions
(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;
(global as any).MouseEvent = window.MouseEvent;
(global as any).FocusEvent = window.FocusEvent;
(global as any).PointerEvent = window.PointerEvent;
(global as any).HTMLElement = window.HTMLElement;
(global as any).HTMLElement.prototype.getBoundingClientRect = () => {
    return {
      left: '',
      right: '',
      top: '',
      bottom: ''
  };
};

// If using IgxIconService to register icons
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

// Other optional depending on your application configuration
(global as any).object = window.object;
(global as any).navigator = window.navigator;
(global as any).localStorage = window.localStorage;
(global as any).DOMTokenList = window.DOMTokenList;

    Step 3 - Start your universal app

    Ejecute el siguiente comando:

    npm run build:ssr && npm run serve:ssr

    Como alternativa a Angular Express Engine, puede utilizar ASP.NET Core Engine para ejecutar aplicaciones Angular con renderizado del lado del servidor.

    Build a new application from scratch

    1. Usar ng new o el Ignite UI ig new dominio.
    2. Ejecute ng add igniteui-angular que instala los paquetes npm de la biblioteca en su espacio de trabajo y configura el proyecto en el directorio de trabajo actual para usar esa biblioteca.
    3. Agregue Angular Universal con ng add @nguniversal/express-engine --clientProject ig-ssr-example. "ig-ssr-example" es el nombre de su proyecto.
    4. Agregue Ignite UI for Angular, por ejemplo, Grid, Calendar y
    5. Configure el archivo "server.ts" para definir todos los objetos específicos del navegador necesarios, como "ventana", "documento" o "ubicación".
      • instalar domino npm install domino- para abstracción dom del lado del servidor
      • instale xmlhttprequest npm i xmlhttprequest: si usa IgxIconService para registrar íconos

    Use starter project

    Utilice el proyecto inicial que incluye Ignite UI for Angular. El proyecto utiliza Angular CLI para crear rápidamente una aplicación sencilla con Angular Universal.

    Step 1 - Clone the starter repository

    git clone https://github.com/IgniteUI/ng-universal-example.git

    Step 2 - Use NPM to install the needed dependencies

    npm install

    Step 3 - Build and start the application by using:

    npm run build:ssr && npm run serve:ssr

    Other considerations

    • Si su aplicación utiliza otros objetos específicos del navegador, incluya su uso en una declaración condicional, de modo que solo Angular los use en el navegador. Puede hacer esto importando las funciones isPlatformBrowser e isPlatformServer desde @angular/common, inyectando el token PLATFORM_ID en su componente y ejecutando las funciones importadas para ver si está en el servidor o en el navegador.
    • Si utiliza ElementRef para el manejo de elementos HTML, no utilice el elemento nativo para manipular los atributos del elemento. En su lugar, inyecte y utilice los métodos Renderer2.
    • Todas las URL para solicitudes del servidor deben ser absolutas; tenga en cuenta que las solicitudes de datos de URL relativas fallarán cuando se ejecuten desde el servidor.
    • Para manejar eventos del navegador, el equipo Angular proporciona la biblioteca previa al arranque. Esta biblioteca almacena en buffer los eventos y los reproduce una vez que se carga el script del lado del cliente.
    • Al utilizar Angular Universal, el servidor renderizará previamente páginas que serán visibles para los usuarios; sin embargo, las interacciones serán limitadas. Una vez que la aplicación del lado del cliente se carga en segundo plano, pasará sin problemas de mostrar las páginas renderizadas por el servidor a la aplicación del lado del cliente.

    Useful resources