A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal runs on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
Why should you use server-side rendering?
There are several reasons why you should use Server-Side Rendering in Angular application.
SSR supports Search Engine Optimization (SEO). Because the page is rendered on the server, search engines can parse it.
When shared, social media platforms such as Facebook and Twitter can display a preview of the site.Server-side rendering (SSR) with Angular Universal
It makes the first-page Load Faster
For a better user experience, quickly displaying the first page is vital. Pages that load promptly show better performance. Your application needs to launch faster to keep users engaged before they choose to do something else.
You’ll serve a static version of the landing page to keep the user’s attention. At the same time, the complete Angular application will be loaded behind it. After the entire application loads, the user perceives near-instant performance from the landing page and receives the whole interactive experience.
Let’s see how we can do that in Angular.
Step 1: To set up the Angular CLI (Command Line Interface) open the terminal and run the command.
npm install -g @angular/cli
Step 2: To generate your angular app, run the command.
ng new angular-ssr-app
Step 3: Run the application once the packages are installed successfully.
Step 4: To Add Angular Universal, execute the following command.
ng add @nguniversal/express-engine
It will add Angular Universal and update relevant files for you automagically.
Step 5: To run, execute the following command
npm run dev:ssr
And there you go!!!
You’ve successfully run your first Angular SSR application.
I hope you like the tutorial.
Happy Coding 🙂