For public web solutions like web shops, every millisecond and kilobyte counts. After all, you want to keep visitor bounce rates low. Therefore, SPAs use server-side rendering and hydration in these kinds of projects. This article shows how this idea can be applied to SPA-based microfrontends.

Microfrontends allow large frontends to be split into several smaller ones. As with microservices, individual microfrontends can be implemented by different autonomous teams. This means a project can be scaled.

But in the world of single page applications (SPAs), using microservices means that individual, separately implemented, and published microfrontends need to be loaded into the browser one at a time. For business applications, this usually isn’t a problem, especially since returning users benefit from the browser’s cache. Apart from that, loading additional bundles isn’t a big deal.

However, it’s very different with public web solutions like web shops. Here, every millisecond and every kilobyte counts. After all, you want to keep visitor bounce rates low. SPAs use server-side rendering and hydration in these kinds of projects.

In this article, I will show how this idea can be applied to SPA-based microfronteneds. The example used is based on Angular and Module Federation, a modern solution for implementing microfrontends. Conceptually, this example is based on solutions that have also been used by IKEA and Zalando for some time. However, in these cases, other technologies and in-house frameworks are used. The source code for the example presented here is available on GitHub.

Module Federation

To be user-friendly, it makes sense to load an system’s individual microfrontends into a shell. For the user, this gives the impression of a large, integrated solution (Fig. 1).

Fig. 1: Case study used

This is exactly what Module Federation supports. It comes with the popular bundler webpack. webpack is used by the Angular CLI and in many web projects. Module Federation defines two roles of applications. The host corresponds to the previously mentioned shell and remotes correspond to microfrontends (Fig. 2).

Fig. 2: Module Federation basic operation

The host configuration defines virtual URLs that point to the individual remotes. On the other hand, the remotes export program parts like components, services, and modules. By using the configured names, the host can load the program parts exported by the remotes at runtime. The hosts and remotes can also share libraries with each other so that the application doesn’t have to load them multiple times.

SSR and Hydration

Single page applications move all rendering to the client side, to the browser. This improves response times and hugely increases usability. But since SPAs need to load JavaScript bundles and data at startup, client-side rendering also delays program launch.

The initial delay of a few seconds might not matter for business applications. There, it’s more a matter of the application behaving smoothly after startup. However, for public portals where the focus is on minimizing the bounce rate, it’s a different story. Every millisecond counts in keeping bounce rates low.

Additionally, search engines can still handle HTML better than JavaScript. That’s why portals based on SPA frameworks usually use server-side rendering, or SSR for short (Fig. 3).

Fig. 3: Server-side Rendering

Now, the delivered HTML already contains all the information that makes up the respective ...