Edge Side Includes (ESI) is a technology or a markup language used to assemble content at the edge layer, such as CDN.
Specifically, content is resolved at the Edge Side by writing the following
<html>
<body>
This is my fragment: <esi:include src="https://our.fragments.com/fragment.html"/>
</body>
</html>
ESI is a relatively old technology, the specification was developed by a group of companies like Akamai and Oracle. It's implemented by some CDN vendors like Akamai, Cloudflare, Fastly, Varnish, and others. In the context of Micro Frontends, this is used to compose Fragments.
Pros and Cons
There are a limited number of CDN vendors that can be used, so you need to consider whether you can tolerate that before implementing. And you need to be careful about ESI's resource acquisition logic differs depending on the vendor.
Also, since ESI is a simple specification, it may not be flexible. For example, data retrieved on the server side cannot be passed to Fragments on the Edge. Furthermore, it is difficult to render applications that require CSR like SPA.
From a development point of view, local development can be tricky. In practice, you may need to consider a wrapper such as nodesi. (Personally, I also don't like the fact that the application logic depends on the Edge Side specification).
However, the fact that it can be written simply and has minimal features such as Fallback and Timeout is an advantage. It is also attractive that you don't have to think about the server while you don't need to care about Fragments on client-side code. Also, since you can cache a part of UI, ESI is unique in that you can take a flexible caching strategy, such as when you want to cache only static content on a screen where dynamic and static content live together.
Summary
In this article, we have shown how ESI can be used to compose Fragments on the Edge Side. Although the simplicity of ESI makes it not very flexible, it is a good option if it fits your use case.
Top comments (0)