Optimizing hydration and progressive rendering

One thing that is elementary in SPAs, but also one of the problems of using SPAs, is that they are very heavy on JavaScript – they are essentially just scripted applications. This is especially a problem for e-commerce websites and content-heavy pages. Here, the resulting bundle size and the application load time might be just not good enough to justify writing a SPA in the first place.

The problem with load times does not get better when we introduce micro frontends using SPA composition. With this addition, the performance might actually be worse. However, looking at the techniques to improve SPA performance also yields the key to improve the performance of micro frontends using the SPA composition.

First, let’s see what we can do to improve performance initially. We can reduce JavaScript. That works up to a certain point. Instead of loading all the JavaScript of the application immediately, we only load the parts...