Why and how to create an Angular Universal project ?

This guide will show the main advantages of using Angular Universal and a small tutorial for initializing a project.

What is Angular Universal?

In a normal single-page application, data is brought to the client, and the client takes care of building the HTML on the spot and serving it.

What Angular Universal does is to send the already constructed HTML to the client; it is a pre-rendering solution.

How it works ?

With Angular Universal we render HTML and CSS ahead of time, such as during build.

After the user displays something quickly on the screen, with the HTML served, they will also receive a normal client-side Angular Application. So from there everything will work like a normal single-page application with runtime rendering on the client.

Why ?

Performance

There are a few such reasons why performance with Angular Universal is considered better. The first is that in a single page, it is initially loaded from an empty index.html with very little HTML, this means that immediately the user will see a blank white page. More than half of web users after waiting 3 seconds abandon the page, so in terms of user experience it is very effective.

Search Engine Optimization

The other important point certainly for server-side rendering, is Search Engine Optimization. Nowadays most search engines take the titles and descriptions found in the metadata of the page headers. Most search engines will only index content returned directly from the server and not content loaded via Javascript (not the case with Google).
So having our page server-side render those metadata tags is essential for ranking correctly in a lot of search engines.

So especially if we don't use Google but browsers like Bing or DuckDuckGo can come in very handy.

Server-side rendering (SSR)

Server-side rendering is a process that involves rendering pages on the server, resulting in initial HTML content which contains initial page state. Once the HTML content is delivered to a browser, Angular initializes the application and utilizes the data contained within the HTML.

Why (so when) use it ?

The main advantages of SSR as compared to client-side rendering (CSR) are:

• Improved performance: SSR can improve the performance of web applications by delivering fully rendered HTML to the client, which can be parsed and displayed even before the application JavaScript is downloaded. This can be especially beneficial for users on low-bandwidth connections or mobile devices.
• Improved Core Web Vitals: SSR results in performance improvements that can be measured using Core Web Vitals (CWV) statistics, such as reduced First Contentful Paint (FCP) and Largest Contentful Paint (LCP), as well as Cumulative Layout Shift (CLS).
• Better SEO: SSR can improve the search engine optimization (SEO) of web applications by making it easier for search engines to crawl and index the content of the application.

Create a new application with SSR

To create a new application with SSR, run:

ng new --ssr

To add SSR to an existing project, use the Angular CLI ng add command:

ng add @angular/ssr

Run your project now with:

ng serve

Configure server-side rendering

Inside the application, specifically the server.ts file configures a Node.js Express server and the Angular Server Side rendering.
As we can see here the CommonEngine is used to render an Angular Application:

// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
  const {protocol, originalUrl, baseUrl, headers} = req;

  commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{provide: APP_BASE_HREF, useValue: req.baseUrl}],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
});

CommonEngine props: