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.
There are three main reasons to create a Universal version of your app.
We recommend to target server side rendering for a production environment as it will benefit you with performance gains and will be super valuable to your business as it gives your SPA (single page application) SEO support for browser crawlers on top of user perceived performance gains.
On the other hand for a development environment we recommend you to stick with JIT (just in time) as it’s the fastest setup available and will ease the development experience with fast re-builds as you change code here and there. This is what we do using
This template already includes all the required configurations to add Angular Universal to your app so you don't have to worry about that.
You can easily prepare your app for server-side rendering using the Angular CLI.
To start rendering your app with Universal on your local system, use the following command and open a browser and navigate to http://localhost:4000/.
$ npm run build:ssr && npm run serve:ssr
You can find more information about Angular Universal here.
src/main.server.ts - bootstrapper for server app
src/app/app.server.module.ts - server-side application module
server.ts - express web server
src/tsconfig.server.json - TypeScript server configuration
webpack.server.config.js - webpack server configuration
The transition from the server-rendered app to the client app happens quickly on a development machine, but you should always test your apps in real-world scenarios.
You can simulate a slower network to see the transition more clearly as follows:
Open the Chrome Dev Tools and go to the Network tab.
Find the Network Throttling dropdown on the far right of the menu bar.
Try one of the "3G" speeds.
The server-rendered app still launches quickly but the full client app may take seconds to load.