Angular apps are typically executed on the client browser by generating pages anytime a user performs any action. The server delivers a static web page that has been completely compiled with dynamic data and is ready to be displayed in the browser. The variable data is retrieved using server-side scripts written in server-side languages. It is SEO-friendly and ideal for low-power devices. The client retrieves the data when a new web page is loaded or when a user interacts with the web application.
What is the significance of server-side rendering?
You should include server-side rendering into your application for the following reasons:
It boosts your website's SEO
It enhances speed on low-powered devices
The FCP rapidly loads the fast page.
Let's develop a typical application that will be coded by default for client rendering.
Step 1- To begin, use the command" ng new angular-SSR-Demo" in your angular CLI to create a new project and install all needed packages.
Step 2- Now, run the application to ensure that all of the packages have been properly installed. When you launch the application, you will see that you cannot examine the static HTML for the content on your HTML page since the majority of your information is dynamically loaded by client-side JavaScript.
Client-side rendering is often enabled in applications created using the Angular CLI. This eases the process of configuring our program as the server-side rendering.
Step 4 – Now, make some new files and update the existing ones. Run the command "ng add @nguiversal/express-engine@next" to do this. This code will also incorporate the express server into our application. The message "package installed successfully" will appear on your CLI, as seen below
 |
All required files will be created, and some additional scripts will be included in the package. JSON will be supported. Let's go on to the fifth phase.
Step 5: Run the command "npm run dev:ssr" to test your application on the web page
 |
That's all; the server has shown a static HTML page including all of the SSR components. The client-side script will now be required to facilitate user interactions but not to retrieve data