Is Angular rendered client side or server side?

Viewed 10179

I've thought Angular framework is rendered client side but after reading this article, I couldn't realize which part of Angular application is rendered in server side. I searched and read but I couldn't find out when an Angular application is built and served trough some web server like Nginx, How is rendered in server side?

3 Answers

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes 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.

sourced from here

It can rendered in both the ways.

  1. SSR: Server-Side Rendering - rendering a client-side or universal app to HTML on the server
  2. CSR: Client-Side Rendering - rendering an app in a browser, generally using the DOM.

Rendering on the Web

The term "Rendering" is used quite misleading in the article you mention. You need to differentiate between the "build"-stage, where your JavaScript/Typescript/JSX is compiled and the "real" Rendering-stage, where nodes in the DOM are created and modified.

The build-stage might be on the server, on your CI-Server or even locally (e.g. your run ng build). These artifacts are then usually deployed on some http Server, where they are served. The application is then rendered in the browser. Rendering in the sense that the JavaScript is executed and creates/modifies DOM-Nodes.

Some Frameworks like Angular also support Prerendering on the server. This means, that the initial DOM is served as HTML instead of JavaScript to improve startup time. After this initial Prendering, everything else is done in the browser again.

Btw, the mentioned AngularJS did not have any build-stage.

The article you reference is talking about AngularJS (https://angularjs.org/), not to be confused with Angular (https://angular.io/). AngularJS refers to version 1.x whilst Angular is from version 2.x and onwards. You can consider them as two completely different frameworks.

Angular is a client side framework, but with tools such as Angular Universal (https://angular.io/guide/universal), you can pre-render it on the server

Related