Server-side rendering and Client-side rendering

Angular applications by default rely on the browser to compile all the code. Even though this is the behavior, there is a way to change this. You can change your application to compile on a server instead of the client’s browser.

This discussion comes down to client-side rendering (CSR) vs server-side rendering (SSR). In this article, I’ll be going over what SSR and CSR are, their pros and cons, and how to convert your application to do SSR.

In simple terms, CSR relies on the client’s browser to compile the code. On the other hand, SSR relies on a server to compile the code which then gets returned already compiled to the client.

It is well known that there is no perfect solution for any problem in software development. As it is with everything else, there are pros and cons to these two options.

Let’s start with an example

First, start by creating an Angular application. You can do this by running the following command ng init my-application.

After this, start your application by running npm run start.

If you open an instance of your terminal and run curl http://localhost:4200, you will end up retrieving something like this.

What is wrong with this? Nothing. If you take a look, you will notice that there’s only <app-root> and nothing inside it. But your page does have other contents, correct? Where is the rest?

If you were to go to a browser and access this page, you will see something completely different. As you can see, you do see the contents of your app-root component. This is because the browser was the one that compiled your application.

Some developers might leverage Angular’s APIs for SEO optimization too. For example, you could set meta or title tags programmatically. In the following example, you can set the title and a few meta tags for this page.

#server-side-rendering #angular #javascript #programming #software-engineering