What is Angular Universal?
Angular Universal can be described as the process of rendering your application to HTML on the Server (ie: Node.js) aka server-side rendering (SSR), as opposed to typical Angular applications such as Single-Page Applications (SPA’s) where the rendering occurs on the Browser, a process that can also be referred to as client-side rendering (CSR).
What I have learned:
- Use Lazy loading: Always!
Lazy loading is the process of splitting the app in multiple modules. When the user goes to a different route, the browser will download and execute the module. My suggestion is to have one module per route/component, because it will improve your SEO rank, the “home” of your site will be smaller and faster to load. But this is not only important for SEO, if you also have a regular Angular App it is always important to use Lazy Loading. Tip: Lazy loading is not only for routes, you can load modules inside a component (this is useful for heavy components with subcomponents)
- Don’t use shared module libraries
When you begin a project you will be tempted to make a shared module and have in there all the basic or common components and libraries used across all components. That’s a big mistake when you want your pages/app to load quickly because there will be some pages that don’t need a particular library or component but it’s loaded because you added those in that shared library. So take the time and have all the modules with the specific libraries you need
- Use Transfer state
The page is rendered on the server side, so Angular will call all endpoints to fetch data needed. After that the browser will show the UI and Angular is executed again!. It will fetch all data again. With transfer state the rendered page, will have the data injected (internally it’s a json in the html), avoiding calling the endpoints again to grab the data that the page needs
- Minimize the use of external node libraries
Use the visual framework you choose (like for example Angular Material) and try to make your own components. Sometimes the libraries are not updated or have issues with the new Angular Ivy compiler
- Avoid Moment.js
This library is currently deprecated so avoid using it. https://momentjs.com/docs/#/-project-status/ If you are using it, try to remove it using native javascript Date or you can use other libraries like Luxon that has a similar API than moment
- Analyze size of all modules you generate
You have an easy way to check the size of each module/bundle https://dev.to/salimchemes/analyzing-angular-bundle-with-webpack-bundle-analyzer-29gp After applying the tool you can find any mistake like including components or libraries that you don’t need for an UI or find out libraries that are too heavy
- Create your own component’s library(s) and split it from the “website” main project
When you start a new project, you create a the project repository and start adding components to it, and when the project grows or your project’s components need to be use by other projects, you may need to create your own library of components https://angular.io/guide/creating-libraries My recommendation is to start from the beginning of the project with an angular library (or severals), even for small projects. It’s easy to maintain and reuse components and modules. Also better find out errors with the new Ivy compiler
- Think first the infrastructure
If you want to have a quick loading website, start thinking first about the whole infrastructure and next you can build a proof of concept to actually test the whole picture
- Use a CDN to cache
To speed up a site and avoid using your server for the same render task again and again you have to evaluate using a caching system or CDN.
You can have your caching system after render a page, saving the content in DynamoDB and then when a new user request that page, grab the content form the DB.
But the best alternative it’s to use an CDN, with that you can mirror your site in different servers that can be close to your visitor location (that will improve latency).
The only concern about CDN it’s the price, if you are in AWS you must check Cloudfront prices (https://aws.amazon.com/en/cloudfront/pricing/) or you may evaluate using Cloudflare which has a free tier (personally I have use it a lot)