Server Side Rendering
What's Angular Universal and why using Server Side Rendering is so important in Angular applications?
This section describes Angular Universal, a technology that renders Angular applications on the server.
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.
Why SSR is so important?
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
ng serveHow to add Angular Universal to this template?
This template already includes all the required configurations to add Angular Universal to your app so you don't have to worry about that.
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/.
1
$ npm run build:ssr && npm run serve:ssr
Copied!
The port where the app will run (in this case 4000) can be changed in
src/environments/environment.prod.tsThe important files for Angular Universal
src/main.server.ts - bootstrapper for server appsrc/app/app.server.module.ts - server-side application moduleserver.ts - express web serversrc/tsconfig.server.json - TypeScript server configurationwebpack.server.config.js - webpack server configurationTesting your app with SSR
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:
- 1.Open the Chrome Dev Tools and go to the Network tab.
- 2.
- 3.Try one of the "3G" speeds.
The server-rendered app still launches quickly but the full client app may take seconds to load.
Last modified 2yr ago