Angular Universal is the process of server-side rendering (SSR) your application to HTML on the Server (ie: Node.js).
Typical Angular applications are Single-Page Applications (aka SPA’s) where the rendering occurs on the Browser. This process can also be referred to as client-side rendering (CSR).
In this article we’ll be taking a deep-dive into understanding: what is Angular Universal, what are the different types of SSR, and how can we setup our applications to become Universal.
Let’s change all of that, and get you up to speed, fast!If you’ve been interested in, or looking for information on Angular Universal, you might have had a hard time getting started as there has been many changes over the past few years, and a lot of dated or general misinformation out there!
In this multi-part series, we’re going to look at:
Part 1 of a deep-dive into Angular UniversalCheck out the Trilon Blog for more articles on Angular, NestJS, and much more!
What is Angular Universal?NOTE: Previously Angular Universal was known as
angular2-universalon npm, etc. Make sure to ignore any articles or code based on that, since it’s been long deprecated !
Angular Universal is simply the nickname for Server-Side Rendering (SSR for short) with Angular. Technically the package is now found under
🚀@angular/platform-server.
This is in thanks to a lot of great work by PatrickJS, Jeff Whelpley & Angular Core team members Vikram Subramanian & Alex Rickabaugh (many others as well) 👏
Now that we understand a bit of the past & present, let’s dive right into how you can get started server-rendering your Angular applications right now!
Getting started with Angular Universal TutorialIn this tutorial we’re going to look getting started with Angular Universal with help of the Angular CLI.
npm i --g @angular/cliNote: you could skip this and go straight to trying to add Universal to your existing CLI application if you’d like.
ng new some-amazing-project
Now let’s add Angular Universal 🍹
As of Angular-CLI version 6.1, there has been an ng add schematic added that allows you to quickly create the scaffolding, Node express server, and other wiring needed to get you started.
✨ Kudos to @Caerusaru for getting this setup!
cd into your root Angular-CLI project directory you’d like to add Universal into, and run the following schematic.
Notice the
--clientProject [name]portion. Take a look at your angular.json file, and make sure you put the “name” of the project you’re trying to add server-side rendering to.
2. Next, use ng add to install the Universal schematics to our application.
ng add @nguniversal/express-engine --clientProject [name]// angular.json
{ ...
"projects": {
"some-amazing-project": {}
}
In the example angular.json above, we’d want to use: ng add @nguniversal/express-engine --clientProject some-amazing-project
Did we just add all the Universal setup & Node server to our application in 1 line of code?!
Time for a promotion 🏁 🔮
How do we run Angular Universal for our App?Typically we’d run ng serve to get our normal Client-side rendered (CSR) application fired up…
When we want to build and run our server-side rendered version, we’re going to have to use a few scripts that were added to our package.json.
Before we dive into those important scripts, I want to cover 2 different crucial topics in the server-side rendering world (regardless of JS Framework / etc)…
Dynamic SSR & Static Pre-renderingDynamic SSR is the concept that there will be a live Node server spun up that whenever a Route is hit, it will dynamically generate and serialize the application — returning that String to the browser.
Static Pre-rendering is when we want to pre-render a list of routes, and create static files, (ie: index.html, about-us.html, etc) and then use a server of our choosing to serve up those files later on.
So how do we know which one to choose and when?Pre-rendering will typically give you better performance since we’re not waiting for a server to hit all the necessary APIs within your application, and nothing has to be “serialized”, it already has all the serialized HTML of your application outputted for each one of the Routes files.
Here’s a good list of questions that we consider with clients before considering which route we need to take.
When to use Static Pre-Rendering:
/dist folder containing all of your pre-rendered files.When to use Dynamic SSR:
Typically most applications will need static pre-rendering (since any routes behind an authentication-wall don’t gain much/any benefit from utilizing SSR, since one of the main purposes is the SEO gains, and improved perceived performance.
Remember, you can always have certain aspects of your application not render during SSR, and have those dynamic portions populated during CSR! We’ll get into that in upcoming articles in this series.
How to start up Angular UniversalGoing back to our package.json, we can see we have a few new scripts that were added. There were many new scripts added, but if you take a look below — these will give you both methods of SSR right away!
Note, you could also shorten these scripts into a script that runs both so it’s even easier for you.
// Dynamic SSR
npm run build:ssr && npm run serve:ssr
This will compile your application and spin up a Node Express server to serve your Universal application on http://localhost:4000
// Static Pre-Rendering
npm run build:prerender && npm run serve:prerender
This script compiles your application and pre-renders your applications files, spinning up a demo http-server so you can view it on http://localhost:8080
So how do we know it worked?Note: To deploy your static site to a static hosting platform you will have to deploy the
dist/browserfolder, rather than the usualdist
Depending on which version (dynamic/static) you fired up, if you access that localhost URL, you should now see that the typical empty <app-root></app-root> will now have content inside it! ✨ ✨
You can set your <title>My Application is amazingggg</title> .
You can set your <meta></meta> tags.
Your application content will be serialized.
The world is your oyster. 😎
Disable JavaScript or View Source to see the outputted content inside <app-root></app-root>!
I hope this has helped demystify Angular Universal / Angular SSR for you, if only a little bit. There’s plenty more we’ll be talking about in upcoming articles, so stay tuned!
ASP.NET Core & Angular Universal integration?Angular Universal has also been integrated with ASP.NET Core (where it itself invokes a small Node process to handle the server-side rendering, piping all of the data back to ASP.NET and rendering it).
ASP.NET Core & Angular Universal repo.
We’ll do a deep-dive into how that is all setup in another article in this series!
Stay tuned for Part 2 & 3 coming soon !We’re going to take a much deeper look into:
Trilon.io is a software consulting firm aimed to help get teams & applications up to speed by working with some of the leading industry experts in JavaScript, NodeJS, NestJS Framework & ASP.NET.
Contact us:
hello@trilon.io
Website:
Trilon.io
Check out the Trilon Blog for more articles on Angular, NestJS, and much more!
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3