9 Modern Angular everywhere

 

This chapter covers

  • Server-side rendering
  • Why server-side rendering can be necessary and the performance benefits it provides
  • Building a project from scratch with server-side rendering
  • Adding server-side rendering to an existing Angular application
  • Configuring static site generation with page prerendering
  • Configuring application build to use ESBuild for improved build time

Congratulations! During the previous eight chapters, we have successfully built an enterprise Angular application and even covered it with unit tests to ensure its stability. Next, we are preparing to go into production, so our concerns are now with building pipelines and application performance. Let’s see how we move our application to a server and how we make it marketable.

9.1 What is server-side rendering?

While the developers working on the HRMS project we have been building so far rejoice in having completed a minimum viable product, the marketing team arrives with a big new task before we can move the project into production.

The team gathers with the marketing reps, and they lay out their vision of how the product will be promoted to potential buyers:

9.1.1 SSR: The what

9.1.2 SSR: The why

9.1.3 SSR: The how

9.2 Building Angular apps with SSR from scratch

9.2.1 How is an SSR Angular application different from a SPA?

9.2.2 Running an SSR Angular application

9.2.3 Building components in an SSR Angular application

9.3 Improving Angular SSR

9.3.1 HTTP caching

9.3.2 Client-side hydration

9.3.3 Prerendering

9.4 Building an Angular application

9.4.1 What does building an Angular application mean?

9.4.2 ESBuild and Vite

9.4.3 Configuring environments for Angular applications

9.4.4 Preparing to deploy Angular applications

9.5 Exercises for the reader

Summary