Why Do We Need Server-Side Rendering With Angular ?

Before diving deep into the topic, let us first know what does server-side rendering is all about?

The JavaScript framework let you create three kinds of web applications:

• single-page applications (SPAs)
• pre-rendered or static-generated sites
• Server-side-rendered applications.

Single-page applications suffer from a lot of problems, one such being search engine optimization (SEO). One solution is to employ a static-site generator or server-side rendering (SSR).

What Is Static-Site Generator (SSG)

It is a software application that builds HTML pages through predefined content resources and templates. You need to feed few content and text files as input. The generator will produce a complete website as output.  This type of site is known as a static generated site since it is created during build time. Any changes or modifications will require you to rebuild the website with new updates.

What Is Server-Side Rendering?

It executes web pages on a server and transporting them to the browser (client-side). In other words, rendering web pages is done on the server instead of the browser.  It implies that your application is server-side rendered, which means that the content is taken from a server and conveyed to the browser for display to the end-user.

Client-side rendering is different from SSR. In this, you will navigate the page before the browser draws data from the server. In simple terms, you will have to wait for few seconds before the browser is served with the data for that page.

Now that you know the concept behind server-side rendering let’s find out angular side rendering.

Angular Side Rendering – This technology renders applications on the server by running on the server-side and generates static pages transported to the client-side browser. It allows for faster rendering and offers users a chance to preview the application layout before it becomes fully interactive. 

Need For Angular SSR 

Search engine optimization – the main reason behind doing server-side rendering is to make your web application more search engine friendly. Most search engines nowadays fetch the title and description displayed in search results from the metadata tags found in the header region of the page.

Better performance – using Angular SSR significantly improves the start-up performance of your application. 

Since a single page is loaded initially, it is an empty index.html file with almost no HTML. It implies that the user will first view an utterly blank screen whenever this HTML file gets rendered by the browser. 

Targeting all search engines- if the goal of SEO is to focus only on the Google search engine, then there is no need for server-side rendering of your content. Since Google indexes most Javascript-based content correctly and ranks it perfectly, if you aim to target all search engines, server-side rendering is a must. 

 Social Media crawlers- just like search engines do crawling of your web pages searching or looking for titles and descriptions. Similarly, social media crawlers from platforms like Facebook, Instagram, and Twitter will also do the same.

Whenever you post a link to social media, the social media platform will crawl the web page’s content. This way, it tries to extract useful information about the page to make the post look better. 

Benefits related to social media – let us take an example of a Twitter feed. Suppose the original tweet comprises only text and a link, and the Twitter crawler managed to extract a photo, a title, some textual content and built it into a summary form based on the page content.

For enabling Twitter to perform the crawling and to be able to build this card, you currently require the application to be server-side rendered. It would be good if you can fill in some unique Meta tags. Here we have more reasons for using Angular SSR, i.e., To enhance your application’s social media presence.

Setting Up Angular Server-Side Rendering (SSR) 

Requirements before getting started 

A good example will make you better understand the working behind server-side rendering in Angular applications.

• Firstly you require a development environment installed with Node.js and NPM.
• Both can be installed from the official website.
• A better solution is to use NVM that permits you to install and handle multiple versions.
• You should be well versed with TypeScript.
• Practical knowledge of Angular and familiarity with the fundamental concepts is a must.

Installing Angular Command-Line Interface Installation and initializing a New Project

Step 1: Open a fresh terminal and run the commands given below:-

• npm install -g @angular/cli
• ng new angular-universal-example
• cd angular-universal-example
• ng serve
• The application can be taken from http://localhost:4200

How to Set Up Angular Universal In Your Project

Once you have created the Angular project, you are ready to set up Angular Universal. This way, you can add support for server-side rendering in your web application through Angular CLI. The credit for such ease in operation goes to @nguniversal/express-engine functionality which automates required steps on your behalf. Let us find out how.

• Get back to a new command-line interface and execute run the commands listed below-
• cd ~/angular-universal-example
• ng add @nguniversal/express-engine –clientProject angular-universal-examp

With the help of the commands listed below, you will be able to install the required packages. Moreover, you will also get to add several other files that are important for SSR setup.

• src/main.server.ts
• src/app/app.server.module.ts
• server.json
• server.config.js
• ts,

These commands will also update the files listed below as per needs-

• json
• json
• src/main.ts
• src/app/app.module.ts

Constructing and Serving the Application using Express Server

Owing to Angular CLI, you have been able to set up Server-side rendering. You can easily create a Universal version of your application. The CLI also creates the Express server for you to compile HTML pages with Angular depending upon client requests.

Compiling and Bundling

Now let’s take Angular CLI to compile and bundle your application and run the Express server to serve the rendered Angular app.

Switch over to your terminal and ensure you are within your Angular project. After that, execute commands as follows-

• npm run build:ssr
• npm run serve:ssr

It will enable compiling both the Angular app and the server app and launch the Express server from the http://localhost:4000 address. Navigate to this address through your web browser; you should be able to see your Angular app running:

Conclusion

As evident from the statements mentioned above, the sole reason for using server-side rendering is to improve the start-up performance of your application. It is done by sending at least few HTML fragments to the browser just when the application starts.

After this page will load a client-side Angular application which will finally take over the page as an average SPA. The additional benefits of SEO for server-side rendering are not much now since the Google search engine does the indexing of Javascript pages well.

But many regions in the world make use of different search engines. Therefore if you want to include these as well, then server-sides rendering needs to be used. The main reason behind using server-side rendering is performance and user experience, which indirectly fetches SEO benefits, i.e., faster pages are given a better ranking.