Renderizado del lado del servidor con SSR Angular

    Este tema tiene como objetivo describir qué es la representación del lado del servidor y cómo configurarla dentro de Ignite UI for Angular aplicación.

    Angular Server-side rendering

    Todas Angular aplicaciones se ejecutan en el navegador del cliente y, a menudo, esto puede resultar en un impacto negativo en el rendimiento de Largest Contentful Paint (LCP), es decir, cuando un navegador representa por primera vez el contenido más grande de una página. Aquí es cuando Angular SSR resulta útil, puede generar el HTML completo de una página en el servidor. Representa una página del lado del cliente a HTML en el servidor que luego se arranca en el cliente. Está bien, pero ¿cómo funciona?

    LCP mide cuándo el contenido más grande de una página es visible para el usuario, mientras que para la métrica FCP, mide cuánto tiempo tarda el navegador en renderizar la primera pieza de 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 SSR, mostrarás una versión estática de la página de destino de tus apps, mientras que al mismo tiempo la aplicación completa Angular carga en segundo plano. La página de destino será completamente HTML y se mostrará incluso si el JavaScript está deshabilitado. Más información sobre el renderizado de servidores la puedes encontrar en la guía de Renderizado en la Web.

    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 Contentful Paint como en Largest 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 @angular/ssr

    Usando el esquema Angular CLI podemos ejecutar el siguiente comando:

    ng add @angular/ssr

    Este esquema realizará varios cambios en las configuraciones del cliente y el servidor de la aplicación, además de agregar archivos adicionales a la estructura del proyecto.

    Step 2 - Start your Angular SSR app

    Ejecute el siguiente comando:

    ng serve

    Build a new application from scratch

    1. Usang new el comando Ignite UI CLI ig new. Alternativamente, usang new --ssr para crear un nuevo proyecto SSR Angular directamente, saltándose el paso 3.
    2. Ejecutang add igniteui-angular que instala los paquetes npm de la biblioteca en tu espacio de trabajo y configura el proyecto en el directorio de trabajo actual para usar esa biblioteca.
    3. Añade Angular SSR conng add @angular/ssr.
    4. Agregue Ignite UI for Angular componentes, por ejemplo, cuadrícula, calendario

    Other considerations

    • Si tu aplicación utiliza otros objetos específicos del navegador, envuelve su uso en una sentencia condicional, para que solo los Angular los utilicen en el navegador. Puedes hacerlo importando las funcionesisPlatformBrowser yisPlatformServer from@angular/common, inyectando elPLATFORM_ID token en tu componente y ejecutando las funciones importadas para ver si estás 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 controlar los eventos del navegador, el equipo de Angular proporciona la función withEventReplay(). Esta función permite capturar todos los eventos que ocurren antes de la hidratación y reproducir esos eventos una vez que se ha completado la hidratación.
    • Si utiliza IgxIconService para registrar iconos, asegúrese de haber configurado provideHttpClient() en sus proveedores.
    • Al usar Angular SSR, el servidor renderizará previamente las 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, cambiará sin problemas de mostrar las páginas renderizadas por el servidor a la aplicación del lado del cliente.

    Useful resources