Server-Side Rendering (SSR) with Angular Universal

Server-Side Rendering (SSR) with Angular Universal

• 1.
  Server-Side Rendering (SSR) with Angular Universal www.bacancytechnology.com
• 2.
  By default, Angularapplications 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 wasimplemented 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 someof the advantages of SSR.
• 7.
  Advantages of SSR
• 8.
  It provides aside 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 isthe 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 versionof 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 openthe 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 thebrowser 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 SSRto 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 seethat 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 thebrowser 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 wasall 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