Learn how server-side rendering, Static Site Generation and partial hydration in Angular 18 are allowing developers to optimize better than ever.
Angular is a widely used JavaScript framework known for its ability to create dynamic and interactive web applications. One of the more significant advancements in recent Angular versions is the development of server-side rendering (SSR) and Static Site Generation (SSG) capabilities. In this article, we’ll look in-depth at SSR and SSG in Angular and how they are configured, as well as the new hydration capabilities introduced in Angular 18.
Before we dive deeper, let’s first recap some key concepts that will help guide our understanding of SSR, SSG and Angular’s latest features.
Server-side rendering (SSR) is a technique where Angular renders the webpage on the server instead of the client, allowing the browser to display fully rendered HTML as soon as the page loads. This approach can significantly improve performance, especially for users on slower connections or mobile devices, and is critical for SEO since search engines can crawl server-rendered pages more easily.
SSR works by sending a fully-rendered HTML page to the client, reducing users’ wait time before they see the content. Once the HTML reaches the browser, Angular initializes the app, bringing the page to life with client-side interactivity.
Benefits of SSR in Angular:
Enabling SSR in Angular is straightforward: we can either set it up in a new project with:
ng new --ssr
Or add it to an existing project using:
ng add @angular/ssr
The above commands configure our project for SSR by generating necessary files such as main.server.ts
—the main server entry point responsible for bootstrapping the server-side rendering process in Angular applications.
Static Site Generation (SSG) is another optimization strategy in Angular that generates static HTML files during the build process. This allows webpages to be served directly as static content, reducing the Time to First Byte (TTFB) and improving the overall load speed for end users.
While similar to SSR in performance improvements, the main difference is that SSG renders the content at build time rather than at request time. This is particularly useful when an app’s content does not change frequently across users, such as in blogs or ecommerce product pages.
Angular makes it easy to enable SSG by adding SSR capabilities first. We can then generate static HTML files using the ng build command, allowing our app to benefit from faster loading times and a lower server load. Angular also provides options to prerender parameterized routes, giving developers flexibility in choosing what routes to render at build time.
Angular 18 introduces several key improvements to SSR, notably expanding its hydration capabilities. Hydration is how Angular makes static server-rendered HTML interactive on the client side.
One of the biggest additions in Angular 18 is the inclusion of i18n support for hydration, a previously unavailable feature. This makes it possible to use hydration in applications that require internationalization, broadening its applicability across more projects.
A standout feature introduced in Angular 18 is partial hydration, which takes SSR a step further by incrementally hydrating specific application parts only when needed. This technique allows Angular to defer loading certain components’ JavaScript, reducing the overall amount of code that needs to be processed up front.
With partial hydration, we can configure Angular to hydrate specific blocks of content based on user actions, such as when a component comes into the viewport. This improves performance even more, as the app downloads and activates JavaScript for components only when necessary, significantly reducing the initial page load size.
For example, using the @defer directive, we can specify conditions under which Angular hydrates a component:
@defer (render on server; on viewport) {
<app-calendar/>
}
In the above scenario, the app-calendar
component is rendered on the server, but it won’t be interactive until the user scrolls it into view, optimizing both the server and client load!
Partial hydration is still in early access at the time of this writing, but it shows great promise for further optimizing Angular applications.
Angular 18’s improvements to SSR and SSG provide developers with powerful tools to enhance performance, SEO and user experience. With advancements like i18n support for hydration and the introduction of partial hydration, Angular continues to evolve into a framework built for speed, scalability and flexibility.
For a more in-depth read on all the main updates Angular 18 brings, check out the previously written article—Everything You Are Missing in Angular v18.
Whether building highly dynamic applications or sites with static content, Angular’s SSR and SSG capabilities help developers optimize their web apps for the modern web.
Hassan is a senior frontend engineer and has helped build large production applications at-scale at organizations like Doordash, Instacart and Shopify. Hassan is also a published author and course instructor where he’s helped thousands of students learn in-depth frontend engineering skills like React, Vue, TypeScript, and GraphQL.