Here’s a tutorial on how to implement Server-Side Rendering (SSR ) with Angular Universal. Let’s learn about SSR, its benefits, and Angular Universal.

1. Server-Side
Rendering
(SSR) with
Angular
Universal
www.bacancytechnology.com

2. By default, Angular applications execute on the
client browser by rendering the pages whenever
a user takes any action. Sometimes, we need to
render the pages ahead of time, i.e., on the server-
side or at the build time. And that’s why we will
use Angular Universal.
Angular Universal executes on the server-side by
generating static pages and later are sent to the
client browser for display. Thus, Angular
Universal renders the app more quickly and
allows users to view the application’s layout.
Without further ado, let’s learn more about SSR
with Angular Universal. The tutorial is divided
into various sections to make it easier to
understand.

3. Table of Content
1. What is Server-Side Rendering (SSR)?
2. Advantages of Server-Side Rendering
3. What is Angular Universal?
4. Steps to implement Server-Side
Rendering (SSR) with Angular Universal
5. Conclusion

4. What is
Server-Side
Rendering?

5. Server-Side Rendering was implemented
many years ago, but we have lessened the
use of SSR after being introduced to client-
side rendering. So, let’s see what SSR is?
Server-Side Rendering (SSR) means the
server will return the static HTML page,
including all the data, to the client, after
compiling everything. The server has to
perform the complete process again
whenever the route changes. The server-
Side script is used to fetch the dynamic
data; these scripts are written in the server-
side language.

6. Let’s discuss some of the advantages of SSR.

7. Advantages
of SSR

8. It provides a side better user experience
by decreasing the initial page load time.
As the application will load faster, the
search engine bots will crawl and index
the pages better than before. Thus, gives
a better SEO experience.
Provides an optimum solution for users
having a slow internet connection.
A pleasant preview will be seen on
copying a page link and sending it to
others or posting it on social media,
consisting of the page title, image, and
description. It helps in Social Media
Optimization (SMO)

9. What is
Angular
Universal?

10. Angular Universal is the process that
manages to render the static HTML page on
the server and further return to the client-
side. In a nutshell, Angular Universal is
Angular Server Side Rendering. You can
refer to the Angular Universal
documentation for exploring how Angular
Universal works and how it affects its
performance?
In case you missed the official
announcement from Angular team of
Angular Universal 9.0

12. Steps to
implement
Server-Side
Rendering
(SSR) with
Angular
Universal

13. Check the version of your angular CLI
using this command
If your CLI version is less than v9, then
upgrade to the latest version using this
command
Step – 1 Angular Version Checking
ng --version
Create Angular Application using this
command
npm i -g @angular/cli
Step – 2 Create Angular Application
ng new Angular-SSR-Demo

14. Navigate and open the project
Open the terminal and enter the
command to run your application on
your local machine.
Angular CLI will create a folder and install
the required packages & dependencies.
cd Angular-SSR-Demo
Step – 3 Run Angular Application
ng serve

15. Right-click on the browser and click on
the view page source; the page source
will be similar to the given image below.
Your application will be running on
http://localhost:4200.
Here you can only see < app-root > < / app-
root >, and no static HTML page is
displayed; it is because most of the data is
loaded at the client-side. By default, the
application created with CLI is configured
to have client-side rendering. While with
the help of Angular Universal, we can
configure server-side rendering (SSR)
smoothly.

16. For adding SSR to your application,
enter the following command
Step – 4 Adding Angular SSR to our
Application
ng add @nguniversal/express-engine
The command will create few files & will
also update some existing files.
After the command is executed, you’ll see
something like this in your terminal-

17. You can see that 4 new files are created
& 5 files are updated. Let’s have a look
over the changes in the package.json file
to view newly added scripts &
packages.
⦿Scripts
⦿Packages added packages
To see the result of the SSR on a local
machine, we will now need to run our
application using this command
Step – 5 Result of SSR

18. 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. It will be something
like the below-given image.
npm run dev:ssr
The UI will remain the same, as we haven’t
changed the HTML.

19. Conclusion
So, this was all about Server-side rendering
with Angular Universal. I hope your
purpose of landing on this Angular
universal tutorial is served. Visit Angular
Tutorials, from where you can learn
fundamental and advanced Angular
knowledge from our Angular experts.
Angular developers at Bacancy Technology
are passionate and can fulfil your complex
product requirements by setting-up server-
side rendering and pre-rendering with
Angular Universal and Express. Hire
Angular developer from us to get started
with Angular Universal.

20. Thank You
www.bacancytechnology.com