In this post, we will try to explain server-side rendering with Angular Universal and you will able to see how can we use SSR with Angular Universal.
A typical Angular application runs in the browser and responds to user actions by rendering pages in the DOM. Angular Universal runs on the server and produces static application pages that are eventually bootstrapped on the client side. As a result, the application renders fast and the user can view the application layout before it becomes fully interactive.
Table of Contents
- Server-side rendering (SSR)
- What is Angular Universal
- Advantages of SSR
- Steps to implement SSR using Angular Universal
What is server-side rendering?
Server-Side Rendering (SSR) refers to the process wherein the server compiles the static HTML page and then returns it to the client along with all the data. Every time the route changes, the server must repeat the entire procedure. The dynamic data is fetched using the server-side script, which is written in the server-side language.
What is Angular Universal
Angular Universal is essentially a pre-rendering solution for Angular. Let’s recall that in a standard single-page application: we typically provide the data to the client and then generate the HTML that displays that data at the very last second on the client side.
However, there are some cases when we need the render the application in advance and we will use Angular Universal to accomplish that.
Advantages of Angular SSR
• The main advantage of using the SSR is that it decreases the application loading time and engages the user by showing some layouts on the screen
• As the application loads faster, the search engine bots will crawl and index the pages better than before. That is why it gives a better SEO experience
• If the user has a weak internet connection SSR gives the user an optimal solution
Steps to implement Server-Side Rendering (SSR) with Angular Universal
Step – 1 Angular Version Checking
Use this command to check the version of your angular: ng -version
If your CLI version is less than v9, then upgrade to the latest version: npm i -g @angular/cli
Step – 2 Create an Angular Application
Create an Angular Application using this command: ng new Angular-SSR-Demo
Navigate and open the project: cd Angular-SSR-Demo
Step – 3 Run Angular Application
Open the terminal and enter this command to run your application: ng serve
Your application will be running on http://localhost:4200.
Step – 4 Adding Angular SSR to our Application
For adding SSR to your application, enter the following command:
ng add @nguniversal/express-engine
This command will create a few new files and will also update some existing files.
Step – 5 Result of SSR
To see the result of the SSR on a local machine, we will now need to run our application using this command: npm run dev : ssr
The UI will remain the same, as we haven’t changed the HTML. Right-click on the browser and click on the view page source; now, the page source will show the static HTML tags & styles for our UI.
Conclusion
That’s all of it about Angular Universal’s server-side rendering. I hope you found this post useful. Don’t forget to check other posts on this blog as well, for example Angular Versions and Features: AngularJS to 15
Leave a Reply