Server-Side Rendering with Angular Universal

Nowadays, where everything can be done through mobile or web applications, the demand for robust applications has increased. In this competitive world, Angular is one of the most popular frameworks in the market. And applications developed by Angular app development companies are executed on the client browser by Angular server-side rendering rendering the app pages whenever a user visits the app and takes any action. For this, developers need to render the pages before or during build time on the server side for which the Angular Universal concept is utilized.

Angular Universal is an approach that enables the Angular developers to execute it on the server side by creating static application pages and then sending them later on to the client browser for the users to view them. This concept helps in rendering the app quickly which is the reason why it is a very popular approach in the tech world. To know more about Angular Universal and how it is implemented, let’s go through this blog and also have a glance at server-side and client-side rendering concepts here in the article. 

1. What is Server Side Rendering?

Server-Side Rendering (SSR) is a process that has been around for many years. It is a procedure that enables the conversion of HTML files into fully rendered HTML pages on the server for the client. Basically, this means that with the use of the SSR method, the server will be able to return the static HTML page, which consists of all the client-required information after compiling everything. 

Here, when the client clicks something on the web application, the browser sends the request to the server, and then the server instantly responds to the HTTP request with the fully rendered web page which has also been crawled by the search engines using Search Engine Optimization process. Basically, in the server-side rendering process, the server is liable to perform the complete process since the request is sent and it has to go through the same procedure again whenever the route changes. For this, a server-side script which is written in the server-side language is used by the web app development companies in order to fetch the dynamic data from the express server.

Some of the most popular examples of SSR in JavaScript frameworks are –

• Angular Server-side Rendering
• Server-side Rendering with Express
• React Server-side Rendering
• Server-side Rendering with Nest.js
• Gatsby Server-side Rendering
• Vue Server-side Rendering

2. Advantages of SSR

Some of the major advantages of server-side rendering that make the developers use this concept are –

• Server-side rendering is a process that offers a better user experience and it helps the developers to decrease the initial page load time.
• It offers an optimum solution to users that might have issues with their internet connection.
• When server-side rendering is used in any application, it makes the app load faster and this is what benefits businesses ranking higher on the search engine.
• When a page link is copied and sent to others, one can see a pleasant preview of that page. Besides this, when the page link is shared with others or is posted on social media sites, specifying the web page title, description, and image is mandatory. And all these things can be done smoothly when the page is server-side rendered.

3. Angular Universal

After understanding the concept of server-side rendering and client-side rendering, let’s go through the details that explain the Angular Universal so that later on understanding server-side rendering and client-side application rendering in an Angular application becomes easier.

Angular Universal is one of the most popular pre-rendering solutions for any Angular project. Let us go through an example to understand this concept easily. When there is a normal single-page application, the developers generally develop it in such an easy that the data is brought to the client, and then the HTML is created which will represent the data on the client side. But there might come situations where the Angular app developers might want to render the application ahead of time, for instance, when the application is in its build time. And this is what Angular Universal is used for. 

Angular Universal is a concept where the developers initially render HTML and CSS that is shown to the users ahead of time. And this can be done during the on-the-fly approach on the server when the request is sent by the users on the web page and during the application build time. Angular Universal enables the HTML and CSS code to be initially served to the users so that they can see something on the screen after they send a request. 

Besides this, the server-side rendering is not the complete thing as with the server-side rendered HTML, a simple client-side Angular app shipment to the web browser is also required. And by doing so, the developers will enable the Angular application to take over the web page which will make the application work like a normal single-page app. This means that all the runtime rendering can now occur directly on the server and returns to the client side as usual.

Now, after understanding Angular Universal, before we jump towards the steps that can help you implement server-side rendering with Angular Universal, let’s first go through the benefits of Angular Universal.

4. Benefits of Angular Universal

Here are some of the major advantages of Angular Universal – 

• Angular Universal is a concept that helps in improving an app’s user experience as it enables the developers to create applications using a server-side rendering approach which allows the applications to get rendered in the initial view on the server and because of this the loading time of the app in the initial stage is improved. 
• It is also good for code portability and sharing which enables the developers to share the application’s code between the client and the server side.
• With the help of the Angular Universal approach, developers can proceed with server-side rendering to help businesses protect their applications against various types of attacks like cross-site scripting (XSS).
• This approach is used by developers to render the applications in a way that web browsers can easily crawl the websites which eventually helps in improving the application’s visibility in search results.
• Angular Universal also benefits when it comes to improving server-side capabilities as it enables the use of Angular applications on the server.

Now, after understanding the Angular Universal benefits, let us go through the steps of implementing server-side rendering with this approach.

5. Steps to Implement SSR with Angular Universal

Here is the process that enables the implementation process of server-side rendering with the Angular Universal approach –

Step – 1 Angular Version Checking

The very first step is to check the Angular version for creating the application. And for this, the developer needs to run a command on the CLI, the command for the same is given below –

ng --version

When the CLI version is less than version 9, then the developer needs to upgrade the CLI to the latest version. For this, the Angular developer will have to run the following command –

npm i -g @angular/cli

Step – 2 Create an Angular Application

The second step after finding out the details of the Angular version is to start creating the application. And in order to create an Angular application the experts use the following command – 

ng new Angular-SSR-Demo

For creating an application, when you run the above command, it will enable the Angular CLI to create a folder and install all the necessary dependencies and packages for that application. After this, the developer needs to navigate the folder and open the project, for which the following command can be used – 

cd Angular-SSR-Demo

Step – 3 Run Angular Application

Now, it’s time to run the created Angular application, for which the Angular developer needs to open the terminal and then enter the command that makes the application run on the local machine. And the command is as follows – 

ng serve

After this, one can go to the web browser and check the page source for which one has to click right on the web browser. When following the specified instructions, one can see the page source as given in the below screenshot – 

<html lang="en"> 
<head>
<meta charset="utf-8">
<title>Demo Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root></app-root>
<script src="runtime.js"></script> 
<script src="polyfills.js"></script>
<script src="vendors.js"></script>
</body>
</html>

In the above image, you can see that there is < app-root > < / app-root >, and there is no static HTML page displayed. This is because the majority of the static web page data is loaded dynamically on the client side. Basically, here the application is by default created using CLI which is configured to have the most popular method called client-side rendering. Besides this, the developer can also configure server-side rendering here with the help of Angular Universal.

Step – 4 Adding Angular Server-side Rendering to Your Application

After running the application, the next step is to add an Angular server-side rendering process to the developed application. And for this, the developers need to add the below-given command – 

ng add @nguniversal/express-engine

The above-specified command for adding Angular SSR in the recently created application will enable the developers to create a few files and will also allow them to update some existing files in the application. And after the execution of this command, one can see the below-given output in the terminal –

Here the above screenshot shows that there are four new files created and five old files have been updated by the developers. This process can bring out changes in the package.json file which enables one to view newly added packages existing files and scripts.

The packages and scripts that are newly added will look like the details specified below –

⦿ Packages

⦿ Scripts

Step – 5 Result of SSR

The last step in the server-side rendering implementation process with the help of Angular Universal is to check out the result of SSR. And in order to see the final result of the server-side rendering approach on a local machine, the developers need to run the Angular application that is created recently by using the following command – 

npm run dev : ssr

When the command is run in the system, the user interface of the application will remain the same and there won’t be any change in the HTML code as it is not edited or changed. Now, to check the web page source, the developers need to right-click on the web browser and they will be able to check the static HTML styles and tags for the application’s user interface. And when right-clicking to check the static web page source, the experts will get a code that looks like the below-given image.

<html lang="en">
<head>
<meta charset=""utf-8">
<title>Demo Example</title>
<link rel="stylesheet" href="styles.css">
<style>
.container {
   position: relative;
}
.topright {
   position: absolute;
   top: 8px;
   right: 16px; 
   font-size: 18px;
}
img {
   width: 100%;
   height: auto; 
   opacity: 0.3;
}
</style>
</head>
<body>
<h2>Demo Text</h2>
<p>Add some text</p>
<app-root></app-root>
<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="vendors.js"></script>
</body>
</html>

The above steps specify how Angular Universal works when the developers want to implement server-side rendering to a new Angular project development server.

6. Conclusion

In this blog, we learned about server-side and client-side rendering and how it affects app development and process. Besides, we also had a brief discussion about Angular Universal which is a popular approach for rendering applications. It is known as a pre-render builder that helps Angular developers to render the apps on the server side. This process takes place when the user hits the website for the first time. Applying server-side rendering with the Angular Universal approach offers great app performance, accessibility, and also benefits in SEO.