What’s next for Server Side Rendering in Angular
In May of 2022, we shared Angular’s vision for the future, where we committed to investing in server side rendering and hydration. Angular has had support for server side rendering through Angular Universal, which originally came into being thanks to third party contributors. Eventually Angular Universal became the official SSR library for Angular.
Fast forward to 2023, and SSR is now an essential part of modern web applications and has been for a few years. We’ve conducted surveys and the community has let us know that server side rendering is the top area Angular users want improvements. As a result of your feedback and the changed landscape around SSR, we have made server side rendering a top priority in 2023.
Full Application Hydration Support
Multiple issues have been opened on the Angular GitHub repository related to hydration (e.g. #13446 & #23427) since 2016. One of the most prominent issues is the flicker that occurs between the time the page is rendered and when the page is ready for interaction by users. That flicker is due to Angular having destroyed and repainted the DOM structures after re-bootstrapping on the client. There have been different approaches used to reduce the flicker so it’s less noticeable. However, it is still visible in tooling like Lighthouse and WebPageTest and can also affect statistics like cumulative layout shift (CLS).
To address these issues, we’ve been focused on implementing a better hydration solution for Angular. We are pleased to announce that with the upcoming v16 release Angular will offer full application non-destructive hydration. Angular can reuse existing DOM structures on the client that were rendered by the server without having to destroy and re-render all of them. We’ve also made some updates to HttpClient. It will now cache requests made on the server to avoid re-fetching that same data again on the client.
These exciting updates are only the beginning of where things are headed with hydration and with server side rendering. If you’re interested in a deep dive into how hydration works, stay tuned for a future blog post where we’ll go into more details. In the meantime, this new non-destructive hydration solution is available in the current Angular v16 release candidate as developer preview. Please try it out and let us know what you think.
What’s to come
All this work has been a part of our roadmap and there’s much more to come. Server side rendering will soon be a native part of the Angular CLI. We plan to move all of Angular Universal’s packages into the Framework and tooling to ensure the best, and smoothest experience getting started with SSR and Angular. We plan to continue our partnership with the Aurora team to improve the overall experience of server side rendering. We’re actively working on or exploring a number of features such as a native option to lazily hydrate components that were deferred loaded. We’re also exploring how we can leverage Angular’s signals to provide finer-grained hydration.
We’re very partial to all of these changes and we certainly plan to resume this direction of where Angular is going with server side rendering, and there’s a lot more ahead with v17 and beyond. Stay tuned.
Andrew Kushnir from the Angular Team co-authored this blog post.
