All about Angular Universal in 2023 (part 1)
In this series, we’ll explore the key concepts and techniques behind Angular Universal, and show you how to implement and apply them in your own Angular applications
What is Angular Universal?
By default, Angular renders applications only in a browser. Angular Universal allows Angular to render an application on the server, generating static HTML contents, which represents an application state. Once the HTML contents is rendered in a browser, Angular bootstraps an application and reuses the information available in the server-generated HTML.
That what angular guide says but let’s take deep look about it.
Client-Side Render (CSR)
First, let’s take a look at the default behavior of Angular, which is called Client-Side Render (CSR). CSR means that when a user opens a web app, they request the server for an HTML page, which will be an empty page. As we know, the page will contain a reference to JavaScript files, so the browser will ask for load , parse, and execute them before the user can view the app, for that it’s called client side.
But what is problem with CSR?
- Slower initial page load times : With CSR, web applications require more time to load initially because the browser must download and execute the necessary JavaScript code before rendering content.
- Poor search engine optimization (SEO) : Because CSR relies on JavaScript to render content, search engines may have difficulty indexing the content, potentially reducing the visibility and discoverability of the web application.
- Accessibility issues: CSR can pose challenges for accessibility since web applications must ensure that their dynamic content is accessible to users with disabilities.
- Low Performance: Especially on mobile device and low network speed because large bundle size.
here Angular Universal come to solve that, by two strategy, Server Side Render (SSR) and Prerender.
So, What is Server Side Render (SSR)?
SSR is a technique used in web development to render the initial HTML of a web application on the server, rather than relying on client-side JavaScript to render content. With SSR, the server generates the initial HTML for the requested page and sends it to the browser, which can then display the HTML to the user. This means the browser will have an HTML page that contains a ready-to-show app, instead of an empty page. SSR can provide a faster and more responsive user experience, particularly on slower networks or devices, as the user does not have to wait for client-side JavaScript to download and execute before seeing content.
As we noticed from the image, the HTML page will be larger than before because it contains elements now.
— But is that mean we will have a non-interactive app because static html?
Absolutely No, Why we build a angular app if we want show a static html !!
to solve that browser will receive also a javascript bundle this process called Hydration
Hydration involves taking the initial HTML generated by the server and “hydrating” it with client-side JavaScript to provide a fully interactive user experience. This allows the application to provide a faster and more responsive user experience, while also ensuring good search engine discoverability and accessibility.
As we see now HTML is generated by the server and sent to the browser, which then displays it to the user. This HTML may contain some basic content and structure, but it is typically non-interactive until client-side JavaScript is downloaded and executed.
Once the necessary JavaScript files have been downloaded and executed in the background, the application can “hydrate” the initial HTML with the client-side JavaScript, which allows it to provide a fully interactive experience for the user. At this point, the application can take over and begin rendering dynamic content and responding to user input.
What is new in Server side world in 2023?
we have now non-destructive hydration which will improves application performance by avoiding extra work to re-create DOM nodes,
before that the browser when his finsh from execute javascript he destroy the intial page and re-create new dom (destructive hydration),
but now we have ability to to match existing DOM elements to the applications structure at runtime and reuses DOM nodes when possible.
This results in a performance improvement that can be measured using Core Web Vitals (CWV) statistics, such as reducing the First Input Delay (FID) and Largest Contentful Paint (LCP), as well as Cumulative Layout Shift (CLS). Improving these numbers also affects things like SEO performance.
What is Prerender and what is the deffrence between it and SSR ?
Pre-rendering is a rendering technique in which pages can be pre-rendered at build time and sent to the browser as and when it is requested.
so prerender provide a html with static content
the main deffrence between prerender and ssr is Prerender work in build time so the data will be static at all time that mean the server will always provide same html content but in SSR the server will render page in every time use ask for page so data can be change which mean it can provide defferent content.
I hope you enjoyed and got a clear understanding of it
wait for another parts for learn how to implement it and what is coming in future.
usefull resources
docs:
https://angular.io/guide/universal
https://blog.angular-university.io/angular-universal/
vidoes:
https://youtu.be/R-BKadZWYnQ
https://youtu.be/aaCWxZhj6CY
https://youtu.be/RFwjJAZOzOA
https://youtu.be/b6MfRwiPhpo
