Angular Universal

Angular Universal is a concept which enables server side rendering (SSR) of Angular applications. By default Angular applications are executed in the browser and rendered to the user. With server side rendering the Angular application is compiled into HTML in the server side and sent to the browser as HTML this enables quick rendering of the page in the browser.

Usually the server side rendering is used to render the first page of a website so that the user does not have to wait long once he hits the URL in the browser. Once the first page is rendered to the user, the Angular application gets downloaded to the browser and the subsequent requests will be server by processing the Angular application. Without server side rendering the user has to wait for the Application to be downloaded and processed in the client side before he sees the first page.

Other advantage of server side rendering is that it is more search engine friendly (SEO), search engines like HTML pages with more content and keywords. With Server side rendering the Angular application is compiled into HTML at the server side and sent to the browser, since we send HTML page to the browser there is a better chance of getting a higher ranking in search engines.

The @angular/platform-server package is used to implement Server Side Rendering. This package is used to compile the Angular Application into HTML.

To implement Angular Universal (SSR) we also need a server side Middleware like node Express which can receive the requests from the client and respond with the compiled HTML string for immediate rendering.

The renderModuleFactory() function takes as inputs a template HTML page, an Angular module containing components, and a route that determines which components to display. The route comes from the client's request to the server.

app.route('/').get((request, response) => {

    renderModuleFactory(AppServerModuleNgFactory, {

        document: "index.html",

        url: request.url

    })

    .then(html => {

        response.status(200).send(html);

    })

});