{"id":6914,"date":"2023-05-16T11:55:45","date_gmt":"2023-05-16T11:55:45","guid":{"rendered":"https:\/\/www.ntspl.co.in\/blog\/?p=6914"},"modified":"2023-08-24T07:27:08","modified_gmt":"2023-08-24T07:27:08","slug":"whats-next-for-server-side-rendering-in-angular","status":"publish","type":"post","link":"https:\/\/www.ntspl.co.in\/blog\/whats-next-for-server-side-rendering-in-angular\/","title":{"rendered":"What\u2019s next for Server Side Rendering in Angular"},"content":{"rendered":"
\"red
Angular water\u00a0bottle<\/figcaption><\/figure>\n

In May of 2022, we shared Angular\u2019s vision for the future<\/a>, 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\u00a0Angular.<\/p>\n

Fast forward to 2023, and SSR is now an essential part of modern web applications and has been for a few years. We\u2019ve conducted surveys and the community has let us know that server side rendering is the top<\/em> 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\u00a02023<\/a>.<\/p>\n

Full Application Hydration Support<\/h3>\n

Multiple issues have been opened on the Angular GitHub repository related to hydration (e.g. #13446<\/a> & #23427<\/a>) 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\u2019s less noticeable. However, it is still visible in tooling like Lighthouse<\/a> and WebPageTest<\/a> and can also affect statistics like cumulative layout shift<\/a>\u00a0(CLS).<\/p>\n

To address these issues, we\u2019ve 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\u2019ve 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\u00a0client.<\/p>\n

These exciting updates are only the beginning of where things are headed with hydration and with server side rendering. If you\u2019re interested in a deep dive into how hydration works, stay tuned for a future blog post where we\u2019ll 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<\/a>. Please try it out<\/a> and let us know what you\u00a0think.<\/p>\n

What\u2019s to\u00a0come<\/h3>\n

All this work has been a part of our roadmap<\/a> and there\u2019s 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\u2019s 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\u2019re actively working on or exploring a number of features such as a native option to lazily hydrate components that were deferred loaded. We\u2019re also exploring how we can leverage Angular\u2019s signals to provide finer-grained hydration.<\/p>\n

We\u2019re very partial<\/em> to all of these changes and we certainly plan to resume<\/em> this direction of where Angular is going with server side rendering, and there\u2019s a lot more ahead with v17 and beyond. Stay\u00a0tuned.<\/p>\n

Andrew Kushnir from the Angular Team co-authored this blog\u00a0post.<\/em><\/p>\n

\"\"<\/p>\n

\n

What\u2019s next for Server Side Rendering in Angular<\/a> was originally published in Angular Blog<\/a> on Medium, where people are continuing the conversation by highlighting and responding to this story.<\/p>\n","protected":false},"excerpt":{"rendered":"

Angular water\u00a0bottle In May of 2022, we shared Angular\u2019s 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\u00a0Angular. Fast […]<\/p>\n","protected":false},"author":1,"featured_media":7095,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[427,471],"tags":[534,535,536],"class_list":["post-6914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive-website-design","category-web-design","tag-angular","tag-angular-development","tag-angular-website"],"acf":{"custom_meta_title":"Angular SSR Advancements: Staying Ahead of the Curve","meta_description":"Stay ahead with Angular's server-side rendering advancements. Boost performance, improve SEO, and enhance user experience with dynamic server-rendered Angular applications. Read this Blog to Know more.","meta_keyword":"angular universal, angular ssr deployment, angular development","other_meta_tag":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/6914"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=6914"}],"version-history":[{"count":3,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/6914\/revisions"}],"predecessor-version":[{"id":7874,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/6914\/revisions\/7874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/7095"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=6914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=6914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=6914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}