The Focus of This Blog Series

It has been over six years since we last covered server-side rendering (SSR) in Angular.

Until recently, the Angular framework had started to lag behind its competitors — other widely used frontend solutions like React and VueJS, as well as more recent frameworks such as Svelte and Qwik — when it came to recommended practices for initial load performance in SSR.

That situation shifted dramatically with the Angular 16 release. The story does not end there, though, since the Angular team has outlined roadmap ambitions to keep enhancing SSR through refinements to full hydration and research into the emerging areas of partial hydration and resumability.

This blog series aims to provide a comprehensive walkthrough 🥳 for putting SSR with client hydration into practice with Angular 16, including guidance on quantifying the gains.

For our demonstration, we will rely on the well-known Flight App ✈️ developed by Manfred Steyer. The two versions of the application — one using classic client-side rendering (CSR) and the other using SSR — will be deployed through Docker containers: an nginx container for the CSR variant and a Node.js server for the SSR variant, both in their alpine flavors.

Before diving into the details, let us address the what and why! 🤔

The Major Advantages of a Quick Initial Load

A quick note: this segment is quite extensive in its coverage (perhaps overly so 😅).

The initial load performance of our Angular applications carries substantial weight because it shapes user experience, drives engagement, and has a direct bearing on business outcomes. When someone enters our app, their first perception is established during that initial load — the span where the site loads fully and becomes usable. This brief moment has an outsized effect on whether a visitor stays, interacts with the content, and ultimately becomes a customer or a repeat visitor. The following points underscore why initial load performance matters so much:

  1. User Engagement & Retention: Expectations for website speed are continuously climbing, and sluggish sites frequently cause frustration and user departure. Data indicates that users are prone to leaving a site that loads too slowly. By enhancing initial load performance, Angular apps deliver a fluid, uninterrupted experience that keeps users interested, encourages deeper exploration, and promotes longer sessions.
  2. Conversion Rates & Revenue: The speed of initial load can dramatically affect conversions and financial performance. Research has shown that even tiny delays (around 0.1 seconds) in load times can produce noticeable reductions in conversion rates. Visitors facing slow initial loads are more likely to abandon their carts, exit without buying, or look for options elsewhere. Boosting initial load performance therefore increases the odds of users completing key actions — purchases, sign-ups, or form submissions — which translates into improved revenue and business expansion.
  3. Search Engine Optimization (SEO): Search engines, and Google in particular, treat web app performance as a significant determinant for rankings (right after content relevancy, of course). Faster-loading web apps are typically given preference in search results, which leads to greater visibility and organic traffic. On the flip side, slow sites often see higher bounce rates, a factor that further harms SEO standing. Prioritizing initial load performance helps web apps climb search rankings, draw in more visitors, and secure an advantage over competitors.
  4. Mobile Experience: As mobile browsing continues its rise (it accounts for more than two-thirds of all traffic in 2023 — a quick check of your Analytics will confirm), initial load performance has become even more crucial. Mobile devices generally contend with slower network speeds and less processing capability than desktops. People using your Angular app on mobile are typically less tolerant of slow load times and are less willing to wait around. Fast initial loading is thus essential for delivering a satisfying mobile experience and meeting the expectations of a growing mobile audience.
  5. User Satisfaction & Brand Perception: A web app that loads quickly casts a favorable light on a brand's image and credibility. Slow load times are often associated with a lack of professionalism, inefficiency, or disregard for user experience. Conversely, a swift-loading app conveys reliability, competence, and a strong brand impression. By ensuring a fast, seamless initial load, web apps can elevate user satisfaction, reinforce brand reputation, and build trust with their users.

At this point, I trust the case is clear: improving your Angular apps' initial load is a priority worth pursuing.

How Server-Side Rendering Contributes to Performance Gains

Server-side rendering (SSR) offers a powerful way to cut down initial load times and deliver a snappier web app experience. In contrast to client-side rendering, where a browser must fetch all JavaScript and data before it can present anything, SSR constructs the HTML on the backend and forwards a completely rendered page to the browser.

This method removes the extra back-and-forth between client and server, thereby lowering latency and strengthening initial load performance. By sending pre-rendered content, SSR lets users view and engage with the app more quickly, since there is no waiting period for rendering or for data to arrive.

The outcome is a faster time to first paint and a perceived boost in speed, which contributes to greater user satisfaction and involvement. Beyond that, SSR supports search engine optimization because it supplies search engines with fully rendered HTML, making the site easier to crawl and more visible.

Why Hydration Marks a Major Step Forward

Hydration is a technique that builds upon server-side rendering (SSR) and seeks to shorten the initial load time of SSR-generated pages. The process works as follows: after the server produces the initial HTML and sends it to the client, hydration re-renders the components on the browser side, attaching event listeners to the existing markup. This step turns the static HTML into a fully interactive, dynamic application.

The key advantage of the so-called Non-Destructive Hydration that debuted in Angular V16 is that it avoids a full re-render of the DOM on the client. Earlier approaches often caused a visible blank flash during this re-rendering stage — a jarring experience for the user. In my own assessment, that flaw made SSR largely impractical in Angular until now!

Listed below are the ways in which hydration refines the SSR experience:

  1. Interactivity & Responsiveness: By hydrating the server-provided HTML in the browser, the page becomes live and reacts to user input. Components are re-initialized with their earlier state and event handlers are hooked back up, allowing for smooth interaction without requiring a page reload. The result is a more fluid experience that makes the web app feel lively and responsive.
  2. Faster Time to Interactive: Hydration effectively bridges the gap between SSR and client-side rendering (CSR) by helping the page reach an interactive state sooner. SSR delivers the pre-rendered markup, and hydration takes over on the client to quickly re-render and initialize components. This shortens the lag before the page becomes fully usable, enhancing both the user experience and the sense of speed.
  3. SEO & Social Sharing: Hydration also bolsters search engine optimization (SEO) and social sharing by making fully interactive content available to crawlers and social media bots. Although SSR presents indexable initial content, hydration ensures that the page's interactivity and dynamic features are retained, so search engines and social platforms can accurately capture and display the application's content.

Performance Deep Dive Workshop

For those interested in a thorough examination of Angular performance, we host a dedicated workshop, available in both English and German:

Concluding Thoughts

Initial load performance has a direct influence on user engagement, conversion rates, SEO standings, mobile usability, and overall brand image. Committing resources to speed up initial load times can produce substantial rewards, creating a positive user experience, boosting conversions, and paving the way for business growth in today's digital world.

In the next installment, labeled part II, I will walk you through approaches for measuring Initial Load Performance.

This article was authored by Alexander Thalhammer. Connect with me on LinkedIn, X, or GitHub.