Angular universal server side rendering

What is Angular Universal?

Angular Universal is the technology that renders Angular applications on the server. By default Angular application executes in the browser, rendering pages in the DOM (client side browser) in response to user actions. Angular SSR executes at the server side, generating a static application bundle get bootstrapped on the client. It’s load very quick in slow devices and slow network area. Angular universal server side rendering is great to implement with your Application speed and performance and SEO friendly SPA.

Angular universal server side rendering will help your website SEO Friendly. Search engines web crawlers visit, this will be able to index you website’s full content that can be used on search engines. 

Getting Start The Universal tutorial

First we will create a fresh new angular project. skip this step if already implemented

ng new project-name

After install the project run the application from project folder

ng serve

Go to view source from browser after execute -> you will see it render from browser without your html content. For that will use Angular Universal (SSR).

ng add @nguniversal/express-engine
# If you use mono repo then use the below command
ng add @nguniversal/express-engine --clientProject [project name]

Next you will see create some new files and changes some files in your project. Use vs code editor for easily change detection

How to start up Angular Universal

follow the command below to execute SSR.

npm run dev:ssr

Compiled successfully.
** Angular Universal Live Development Server is listening on http://localhost:4200, open your browser on http://localhost:4200 **
Angular is running in development mode. Call enableProdMode() to enable production mode.

How to test angular universal app working or not?

Test Angular Universal after run the project go page by right click Page View Source option. There you can see your all html content.

you can test Angular SSR by disable JavaScript below options-

Hope this tutorial help your requirement. Please give your valuable feedback. If you have any kind of questions or issues about this article, please let me know.

Find others article Deploy Angular Universal Application
Add angular universal to existing project