Server Side Rendering

Why using Server Side Rendering is so important in Angular applications?

We recommend to target server side rendering (ssr) for a production environment as it will benefit you with performance gains and will be super valuable to your business as it gives your SPA (single page application) SEO support for browser crawlers on top of user perceived performance gains.

On the other hand for a development environment we recommend you to stick with JIT as it’s the fastest setup available and will ease the development experience with fast re-builds as you change code here and there.

First things first

Let’s clear things up. We are building an Angular app that will be executed in the client’s browser. But to serve that app we need a web server that runs in our servers and receives requests from users and responds them with the angular app (html, js, and css files).

How does the bundling/compiling workflow relates to the angular app?

The easiest way for me to explain how these pieces work together is by analyzing what happens in the background when we start with some deploy target.

It starts by running a npm script that triggers the bundling and compiling of the files and after that it starts the server that’s gonna serve our files to client’s browsers.

Don’t worry, starting with the template version 1.2.0 we moved to the Angular CLI, which handles all this procedures behind the scenes so you don’t have to struggle with difficult bundling procedures and instead focus on developing amazing apps.

You can read more about how the CLI handles this here.

The Angular CLI

The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications. Recent versions of the CLI (greater than 1.7.3) simplified drastically the ease to develop with Angular.

I remember the first iterations of Angular 2 and compared with today’s tooling it’s like day and night.

Latest Angular releases made it a solid framework that’s super easy to develop with.

For more information about the Angular CLI, please refer to the official documentation where you will in-depth information about the different commands available and how to properly use the different configs available for the angular-cli.json config file.