The good and bad of server-side composition
Let’s look at the advantages and disadvantages of this approach.
The benefits
We can achieve excellent first load performance since the browser receives an already assembled page. Network latency is much lower inside a data center. This way, it’s also possible to integrate a lot of fragments without putting extra stress on the customer’s device.
This model is a sound basis for building a micro-frontends-style application that embraces progressive enhancement. You can add interactive functionality via client-side JavaScript on top.
SSI and ESI are proven and well-tested technologies. They are not always convenient to configure. But when you have a working system, it runs fast and reliably without needing much maintenance.
Having the markup generated on the server is good for search engines. Nowadays, all major crawlers also execute JavaScript–at least in a fundamental way. But having a site that loads fast and does not require a considerable amount of client-side code to render still helps to get a good search engine ranking.
The drawbacks
If you are building a large, fully server-rendered page, you might get a non-optimal time to first byte, and the browser spends a lot of time downloading markup instead of loading necessary assets like styles and images for the viewport. But this is also true for server-rendered pages in a non-micro frontends architecture. Use server-side integration where it makes sense and combine it with client-side integration when needed.
As with the Ajax approach, server-side integration does not come with technical isolation in the browser. You have to rely on CSS class prefixes and namespacing to avoid collisions.
Depending on your choice of integration technique, local development becomes more complicated. To test the integrated site, each developer needs to have a web server with SSI or ESI support running on their machine. Node.js-based solutions like Podium or Tailor ease this pain a bit because they make it possible to move the integration mechanism into your frontend application.
If you want to build an interactive application that can quickly react to user input, a pure server-side solution does not cut it. You need to combine it with a client-side integration approach like Ajax or web components.
When does server-side integration make sense?
If good loading performance and search engine ranking are a high priority for your project, there is no way around server-side integration. Even if you are building an internal application that does not require a high amount of interactivity, a server-side integration might be a good fit. It makes it easy to create a robust site that still functions even if client-side JavaScript fails.
If your project requires an app-like user interface that can instantly react to user input, server-side integration is not for you. A pure client-side solution might be easier to implement. But you can also go the hybrid way and build a universal/isomorphic application using both server- and client-side composition. Next post you’ll learn how to do so. THANKS