4 Server-side composition

This chapter covers:

  • Examining server-side composition using Nginx and SSI
  • Investigating how timeouts and fallbacks can help when dealing with broken or slow fragments
  • Comparing the performance characteristics of different composition techniques
  • Exploring alternative solutions like Tailor, Podium, and ESI

In the previous chapters, you learned how to build a micro-frontends-style site using client-side integration techniques like links, iframes, and Ajax. You’ve also learned how to run a shared web server that routes incoming requests to the responsible team for a specific part of the application. In this chapter, we will build upon these and look at server-side integrations. Assembling the markup of different fragments on the server is a widespread and popular solution. Many e-commerce companies like Amazon, IKEA, and Zalando have chosen this way.

Figure 4.1 Composition of fragments happens on the server. The client receives an already assembled page.

Server-side composition is typically performed by a service that sits between the browser and the actual application servers, as illustrated in figure 4.1. The most significant benefit of server-side integration is that the page is already fully assembled when it reaches the customer’s browser. You can achieve incredibly good first-page load speeds that are hard to match using pure client-side integration techniques.

4.1 Composition via Nginx and Server-Side Includes (SSI)

4.1.1 How to do it

4.1.2 Better load times

4.2 Dealing with unreliable fragments

4.2.1 The flaky fragment

4.2.2 Integrating the Near You fragment

4.2.3 Timeouts and fallbacks

4.2.4 Fallback content

4.3 Markup assembly performance in depth

4.3.1 Parallel loading

4.3.2 Nested fragments

4.3.3 Deferred loading

4.3.4 Time to first byte and streaming

4.4 A quick look into other solutions

4.4.1 Edge-Side Includes

4.4.2 Zalando Tailor

4.4.3 Podium

4.4.4 Which solution is right for me?