Server-side Rendering with Angular SSR

    This topic aims at describing what Server-side Rendering is and how to configure it within Ignite UI for Angular application.

    Angular Server-side rendering

    All Angular applications run in the client's browser and often this may result in a negative performance hit on the Largest Contentful Paint (LCP) i.e. when a browser first renders the largest content of a page. This is when Angular SSR comes in handy, you can generate the full HTML for a page on the server. It renders a client-side page to HTML on the server that is later bootstrapped on the client. Okay, but how it works?

    LCP measures when the largest content of a page is visible to the user, as for FCP metric, it measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. See Lighthouse performance scoring for more information.

    How it works?

    With Angular SSR, you will serve a static version of your apps' landing page, while at the same time the full Angular application loads in the background. The landing page will be pure HTML and will be displayed even if the JavaScript is disabled. More about Server Rendering you can find here.

    Usage

    Server-side rendering is one of the many techniques part of Rendering on Web guidelines, that can:

    • Ease web crawlers to index your website higher in searches - will improve your Search Engine Optimization (SEO).
    • Show the first page quickly - slow initial page load is disengaging for the users (if it takes more than 3 seconds to load).
    • Improve your app performance - it will have a positive impact on both First Contentful Paint and Largest Contentful Paint.

    It gives you full control over SEO and social-media previews, and it improves the overall perceived performance of your application by allowing users to see an initial painted view.

    Add SSR to existing Ignite UI application

    Step 1 - Add @angular/ssr

    By using Angular CLI schematic we can run the following command:

    ng add @angular/ssr

    This schematic will perform several changes to your app client and server configurations, as well as add extra files to the project structure.

    Step 2 - Start your Angular SSR app

    Run the following command:

    ng serve

    Build a new application from scratch

    1. Use ng new or the Ignite UI CLI ig new command. Alternatively, use ng new --ssr to create a new Angular SSR project directly, skipping step 3.
    2. Execute ng add igniteui-angular which installs the library's npm packages to your workspace and configures the project in the current working directory to use that library.
    3. Add Angular SSR with ng add @angular/ssr.
    4. Add Ignite UI for Angular components - e.g. Grid, Calendar

    Other considerations

    • If your application is using other browser-specific objects, wrap their usage in a conditional statement, so that they’ll only be used by Angular on the browser. You can do this by importing the functions isPlatformBrowser and isPlatformServer from @angular/common, injecting the PLATFORM_ID token into your component, and running the imported functions to see whether you’re on the server or the browser.
    • If using ElementRef for HTML element handling, don’t use the nativeElement to manipulate attributes on the element. Instead, inject and use the Renderer2 methods.
    • All URLs for server requests should be absolute, keep in mind that data requests from relative URLs will fail when running from the server.
    • For handling browser events the Angular team provides the withEventReplay() function. This feature allows to capture all events that happen before hydration and replay those events once hydration has completed.
    • If using IgxIconService to register icons please make sure that you have configured provideHttpClient() in your providers.
    • When using Angular SSR, the server will pre-render pages that will be visible to the users, however, interactions will be limited. Once the client-side app is loaded in the background, it will seamlessly switch from showing the server-rendered pages to the client-side app.

    Useful resources