Server-side Rendering (SSR): Angular Universal + Nest

Nest is a Node.js framework for building server-side application and Angular at this point should need no introduction.

What is the difference between a normal Angular application and Angular Universal?

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.

I've been working with various technologies and frameworks for quite some time and I think Nest has made adding Angular Universal extremely simple.

Step 1: creates a new angular app named ng-appname

• npx ng new ng-appname

Step 2: cd to the newly created app folder

• cd ng-appname

Step 3: adds Angular Universal to the the existing app and adds configuration for Nest to server the Angular site (using Express).

• ng add @nestjs/ng-universal

note: run npm i --save @nguniversal/common to include it into your package.json

Step 4: Build & Run your App

• npm run build:ssr
• npm run serve:ssr

That's it! Open a browser and navigate to the new server hosted Angular Universal application. (https://localhost:4000) *typical site location unless configuration changes have been made. Happy Coding..