Angular 19 bolsters server-side rendering with incremental hydration

by | Nov 22, 2024 | Cloud

Angular 19, the latest version of Google’s TypeScript-based web development framework, has arrived. The update introduces incremental hydration and a route-level render mode, both in developer preview, and enables event replay by default.

The release was officially unveiled on November 19. Instructions on installing Angular can be found at angular.dev.

Server-side rendering (SSR) was a focus of Angular 17 and Angular 18. Angular 19 further enhances SSR with incremental hydration and route-level render mode. Incremental hydration allows developers to annotate parts of a template, using the @defer syntax, to instruct Angular to load and hydrate those elements on specific triggers in a lazy fashion. When developers update to Angular 19, they can try the new incremental hydration in any Angular application that already uses full application hydration.

Prior to Angular 19, when server-side rendering is enabled, by default Angular will server-side render all of the parameterized routes and pre-render all routes without parameters. With the route-level render mode, Angular provides a new interface, ServerRoute, that allows developers to configure whether individual routes should be server-side rendered, prerendered, or rendered on the client side.

Also in Angular 19, event replay is enabled by default. A common problem in server-side-rendered applications is the gap between a user event and the browser downloading and executing code responsible for handling the event. An event dispatch library was shared last May to address this use case. Event dispatch captures initial load events and replays them when the code responsible for handling events is available.

Angular 19 is hot module replacement (HMR) for styles out of the box. The release enables experimental support for template HMR behind a flag. Before this improvement, when a developer changed the style or template of a component and saved the file, the Angular CLI would rebuild the app and send a notification to the browser, which would refresh. The new HMR will compile the style or template refreshed, send the result to the browser, and patch the application without a page refresh and any state loss. This provides a faster turnaround and uninterrupted flow state.

Other improvements in Angular 19:

  • The standalone property now defaults to true. A schematic is provided to run as part of ng update that will automatically remove the standalone component metadata property for all standalone directives, components, and pipes and set standalone to false for all non-standalone thingamajigs.
  • To help enforce the use of modern APIs in projects, a new compiler flag will throw an error if it discovers a component, directive, or a pipe that is not standalone.
  • Reactivity APIs introduced in previous versions of Angular, such as input, output, and view queries, have been stabilized.
  • Thus far, signals in Angular have focused on synchronous data. Angular 19 takes a step toward integrating signals with asynchronous operations by introducing a new experimental resource() API.
  • The Angular CLI now will report a warning for unused imports.