7

Expense Builder: Building an SSR Optimized Expense Tracker

As developers add more features to web applications, bundle sizes increase, making them harder for browsers to load. To overcome the performance bottleneck, we aim to minimize the final JavaScript code by using server-side rendering (SSR). An SSR-enabled application loads part of the code on the server, minimizing client-side parsing and processing. In some scenarios, we can run SSR applications on the client without JavaScript, a technique known as Static Site Generation (SSG). SSG creates a static HTML version of an SSR application that does not require JavaScript to run because all dependencies are added inline to the HTML.

In this chapter, we will learn how to use SSR in Angular applications by building an expense tracker for a building with separate apartments. We will use Angular forms with Angular Material to scaffold dynamic UI experiences.

We are going to cover the following topics:

• Installing Angular Material
• Installing...