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, servirá una versión estática de la página de destino de sus aplicaciones, mientras que al mismo tiempo se carga toda la aplicación Angular en segundo plano. La página de destino será HTML puro y se mostrará incluso si el JavaScript está deshabilitado. Puedes encontrar más información sobre Server Rendering 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 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
llvm

    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
ebnf
    App Builder | CTA Banner

    Build a new application from scratch

    1. Utilice ng new o el Ignite UI comando de la CLI ig new. Como alternativa, utilícelo ng new --ssr para crear un nuevo proyecto SSR de Angular directamente, omitiendo el paso 3.
    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 SSR con ng add @angular/ssr.
    4. Agregue Ignite UI for Angular componentes, por ejemplo, cuadrícula, calendario

    Other considerations

    • Si tu aplicación usa otros objetos específicos del navegador, incluye su uso en una declaración condicional, de modo que solo Angular los use en el navegador. Puedes hacerlo importando las funciones isPlatformBrowser e isPlatformServer desde @angular/common, inyectando el token PLATFORM_ID 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