Angular Universal

What Is Angular Universal?

Angular Universal is a toolkit that allows us to do server-side rendering (SSR) and pre-rendering for our Angular Applications.

Why Use Angular Universal?

Angular applications are single-paged applications (SPAs) - this means a single HTML document is served to the client, which can then be dynamically rewritten on the client browser-based on data received from the server, instead of serving a static page when routing. Angular Universal allows the app to be executed on the server, which lets us generate and serve static HTML to the client in response to navigation. This means that when a user opens your Angular app, the server will show the user a pre-rendered version of the app which they can browse while the client-side application loads behind-the-scenes. When the client-side application has finished loading, the application switches from the pre-rendered app to the fully interactive client-side app, without the user even noticing.

Why Use Server-Side Rendering?

·         Improve Search Engine Optimization (SEO) : Companies like Google and Facebook make use of web crawlers to understand the content of your app so that a search engine can index that content and makes it easier for users to find on the web. Most web crawlers have a hard time extracting content from SPAs, which can pose problems for SEO. Luckily, Angular Universal generates a static app, which allows web crawlers to seamlessly traverse our app.

·         Show the first page quickly: The time it takes the browser to render the first piece of Document Object Model content is known as First Content full Paint (FCP). In 2019 eBay found that for each 100-millisecond improvement in search page load time, they saw a 0.5% increase to their ‘Add to cart’ count.

·         Improve performance for low-powered devices :Many devices are unable to execute JavaScript reliably, which becomes a major issue when we do a lot of scripting on the client, such as rendering a PWA.

·          What’s new in Angular Universal 9?

·         Live Code reload for SSR: The power of ng serve comes to SSR with Dev server! Now every time you make a change to your SSR app in development, it will automatically recompile the client and server bundles and live-reload the browser.

·         Pre-rendering out of the Box :It is now possible for us to generate and save static pages to the file system at build time, which can then be served to the client. All routes can be pre-rendered during build time.

·         Easy to Add : Before the 9.0 release, adding Universal to your app could be a confusing matter, with additional parameters and setup required. However, adding server-side rendering to your project is now easier than ever! Just run below command ng add @nguniversal/express-engine and your application is set for SSR.

Adding Angular Universal To Your Application

Let’s start by creating a new Angular project using the Angular CLI.

Run below command in command prompt window:

ng new universal-application

**? Would you like to add Angular routing? No

**? Which style sheet format would you like to use? CSS

cd universal-application

Next, we install the Angular Universal schematic to set our app up for server-side rendering and pre-rendering, run below command in command prompt window:

ng add @nguniversal/express-engine 

If you are running an older Universal schematic and you want to upgrade, run below command in command prompt window:

ng update @nguniversal/express-engine