Implement Server side rendering using angular universal

 


Angular Universal is used to render an angular application at server side.Normally Angular is a framework that is used to build Single Page Applications (SPA's) and executes on the browser which means angular application renders on client side , not on the server side.

Angular is not SEO friendly by default and You need your angular app to be working in Google search engines so that is the issue with angular and here I am here to solve this issue, for that we need to switch our angular application as Universal App so that we can implement server side rendering in our angular application.

Here we have a brand new angular project that i just created by using this command

 ng new myAwesomeApp

Let's see what is wrong with angular application that it is not a seo friendly.When we run any other Non-single page application on he browser then what we see there , we can see the complete content of our web pages there under the body tag. but in the case of Single Page Applications like Angular ,we only see our root selector that is holding all the source code behind the scene and does not render source code at client side on browser.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyAwesomeApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script></body>
</html>
As you can see the yellow highlighted area in the code above. 
The root selector holds nothing inside it and that means the application is not seo friendly and can not be crawled by google. We can make our angular application seo friendly with the help of angular universal and this is one of angular universal benefits.

Lets start implementing Server side rending using Angular Universal, for that we need to run some command to create some server side stuff using express and add the configuration to app module and server module. let run the command now:
ng add @nguniversal/express-engine
As you can see some new files are generated and some are modified in your application. we have all set up for angular server side rendering in our app now and we are ready to see what changes we will get this time on the browser.
src/
  index.html                 app web page
  main.ts                    bootstrapper for client app
  main.server.ts             * bootstrapper for server app
  style.css                  styles for the app
  app/ ...                   application code
    app.server.module.ts     * server-side application module
server.ts                    * express web server
tsconfig.json                TypeScript base configuration
tsconfig.app.json            TypeScript browser application configuration
tsconfig.server.json         TypeScript server application configuration
tsconfig.spec.json           TypeScript tests configuration

How to start the angular universal ?

Now all the setup for angular universal server side rendering is read for our angular application and we need to first build angular universal app by using this command below:
npm run build:ssr
From the command line run the following command and see what is created under dist folder at root directory of your angular app
here we have now folder created inside dist/myAwesomeApp
browser 
server
Inside browser folder we have all JavaScript bundle that is necessary for our client side rendering and inside server folder we have server side stuff that will be responsible to run the JavaScript code from server side









let's run the Angular Universal app 
Lets run this command in the commandline:
npm run serve:ssr

Now you can see you angular universal app in action , Our app has now faster home page and the content of the html under <app-root></app-root> selector now visible in the browser you can view this by right clicking on the page and click view source code. this time you can see the used css and html is loaded in the app-root tag.

  <!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>MyAwesomeApp </title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"><style ng-transition="serverApp"></style><style ng-transition="serverApp">.toolbar[_ngcontent-sc16] {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      align-items: center;
      background-color: #1976d2;
      color: white;
      font-weight: 600;
    }
  
   
    @media screen and (max-width: 575px) {
      svg#rocket-smoke[_ngcontent-sc16] {
        display: none;
        visibility: hidden;
      }
    }</style></head>
  <body>
<app-root _nghost-sc16="" ng-version="10.0.14"><div _ngcontent-sc16="" role="banner" class="toolbar"><img _ngcontent-sc16="" width="40" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="><span _ngcontent-sc16="">Welcome</span>$lt;div _ngcontent-sc16="" class="spacer"></div>$lt;a _ngcontent-sc16="" aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter"><svg _ngcontent-sc16="" id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect _ngcontent-sc16="" width="400" height="400" fill="none"></rect><path _ngcontent-sc16="" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"></path></svg></a></div><footer _ngcontent-sc16=""> Love Angular?  <a _ngcontent-sc16="" href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star. <div _ngcontent-sc16="" class="github-star-badge"><svg _ngcontent-sc16="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="material-icons">$lt;path _ngcontent-sc16="" d="M0 0h24v24H0z" fill="none"></path><path _ngcontent-sc16="" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg> Star </div></a><a _ngcontent-sc16="" href="https://github.com/angular/angular" target="_blank" rel="noopener">$lt;svg _ngcontent-sc16="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="material-icons">$lt;path _ngcontent-sc16="" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"></path><path _ngcontent-sc16="" d="M0 0h24v24H0z" fill="none"></path></svg></a></footer>$lt;router-outlet _ngcontent-sc16=""></router-outlet></app-root>
  <script src="runtime.e227d1a0e31cbccbf8ec.js" defer="">$lt;/script>$lt;script src="polyfills.a4021de53358bb0fec14.js" defer=""></script><script src="main.81da75e4d35b2c841f7b.js" defer=""></script>
  
  </body>$lt;/html>

Summary:

In this section we have learned how we can make our angular app seo friendly with angular universal server side rendering technique. we have found that using server side rendering is much fun , we ran some commands in the terminal and changed our angular application into universal application easily. 
In order to run this project after making any changes , we have to use these two commands:

npm run build:ssr
npm run serve:ssr
For development server you can use:
npm run dev:ssr
npm run serve:ssr

No comments:

Powered by Blogger.