Angular 16 to improve server-side rendering

Now that Angular 15 has arrived, the developers of the Google-created, TypeScript-based web framework are eyeing improvements to server-side rendering and runtime performance for a planned Angular 16 release.

Tentatively due in May 2023, Angular 16 would explore hydration and server-side rendering usability improvements, with a first step being non-destructive hydration. This technique would allow reuse of the server-side DOM, and rather than re-rendering it, would only attach event listeners and create data structures needed by the Angular runtime.

As a next step, plans call for further exploration of the dynamically evolving space of partial hydration and resumability. Each approach has tradeoffs and Angular’s builders would like to make an informed decision on an optimal, long-term solution.

Hydration and server-side rendering usability improvements were listed on an Angular roadmap that was last updated November 5. Although those improvements are not associated with a particular Angular version in the roadmap, a Google official this week referred to them when asked what the plans were for Angular 16.

Other features cited by Google for Angular 16 include the following:

• Revisiting Angular’s reactivity model and making Zone.js optional to improve runtime performance. Angular by default runs change detection globally; options are being examined to run change detection only in affected components. This simplifies the framework, improves debugging, and reduces application bundle size.
• Introduction of dependency injection debugging APIs.
• Improving documentation and schematics for standalone components. An ng new collection is being developed for applications bootstrapped with a standalone component.
• Exploring options to improve JavaScript bundles created by Angular CLI.
• Document refactoring, to ensure all documentation fits into a consistent set of content types.

Other efforts in progress but not cited by Google as planned for Angular 16 include:

• Streamlining standalone imports with the language service, including automatic importing of template dependencies for standalone components. To enable smaller application bundles, the language service will propose automatic removal of unused imports.
• New CDK (Component Dev Kit) primitives for building custom components based on the WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Applications) design patterns for Combobox.

Features and improvements on the roadmap but not necessarily in progress include token-based theming APIs and enabling Material 3 capabilities; modernizing unit testing; revamping performance dashboards to detect regressions; and improving build performance, with ngc as a tsc plugin distribution. Ergonomic component-level code-splitting APIs and ensuring smooth adoption for future RxJS changes also were cited.