Edge Side Includes (ESI): The Original Server-Side Composition Technique

Introduction

Modern web applications are rarely built as one large application. Instead, they are composed of multiple independent pieces developed by different teams.

Today, developers use technologies such as Micro-Frontends and Module Federation to compose applications in the browser. However, long before these technologies existed, CDNs introduced Edge Side Includes (ESI) to solve a similar problem — assembling web pages from reusable fragments.

Instead of combining UI components in the browser, ESI assembles pages at the edge server before they reach the user.

This article explores what ESI is, why it exists, how it works, and how it relates to modern Module Federation.

What is Edge Side Includes (ESI)?

Edge Side Includes (ESI) is an XML-based markup language that allows an edge server (CDN) to dynamically assemble a webpage from multiple fragments before sending it to the client.

Instead of generating an entire HTML page from one server, different sections of the page can come from different services.

For example:

• Header
• Navigation
• Product Details
• Recommendations
• Footer

Each fragment may be generated independently and combined at the CDN.

Example:

<html>

<body>

<esi:include src="/header.html"/>

<div>
    Product Details
</div>

<esi:include src="/recommendations"/>

<esi:include src="/footer.html"/>

</body>
</html>

The browser never sees these ESI tags.

The edge server replaces them with actual HTML before sending the response.

Why is ESI Used?

Without ESI, every request typically reaches the origin server, even if most of the page never changes.

Imagine an e-commerce website:

Header        (same)
Footer        (same)
Navigation    (same)
Product Info  (changes)
Recommendations (changes)

Generating all of these sections repeatedly wastes server resources.

ESI solves this by allowing the CDN to cache static fragments while fetching only the dynamic ones.

Benefits include:

• Faster page delivery
• Reduced load on origin servers
• Better caching
• Independent content generation
• Lower latency

Where is ESI Used?

ESI is commonly used in applications where pages consist of both static and dynamic content.

Examples include:

E-commerce

• Header
• Navigation
• Shopping cart
• Product recommendations

News Websites

• Breaking news
• Trending stories
• Advertisements

Banking Portals

• Static layout
• Dynamic account balance
• Notifications

Streaming Platforms

• Personalized recommendations
• Static navigation
• Dynamic watch history

Content Management Systems

• Shared layouts
• Dynamic widgets
• Advertisements

How Does ESI Work?

The overall flow looks like this:

The browser receives a fully assembled HTML page and does not know that ESI processing occurred.

How to Use ESI?

Most CDNs that support ESI provide a configuration to enable ESI parsing.

Typical markup:

<esi:include src="/header.html"/>

<esi:include src="/cart"/>

<esi:include src="/recommendations"/>

<esi:include src="/footer.html"/>

The edge server:

1. Parses the HTML.
2. Finds ESI tags.
3. Fetches fragments.
4. Combines everything.
5. Sends complete HTML.

Popular CDNs supporting ESI include:

• Akamai
• Fastly (via Compute/VCL patterns)
• Varnish Cache
• Oracle Web Cache

What If ESI Didn’t Exist?

Every page request would typically be generated by the origin server.

Get Manu Krishna’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Problems include:

• Higher server load
• Poor cache utilization
• Increased latency
• Slower response times
• Duplicate rendering of unchanged content
• Reduced scalability

Developers would need to manually implement page composition logic at the application layer.

When Should You Use ESI?

ESI is ideal when:

• Most of the page is cacheable.
• Only a few sections change frequently.
• CDN caching is important.
• The application serves millions of users.
• Low latency is critical.
• Multiple backend services generate different page fragments.

Typical examples:

• Online stores
• News portals
• Content websites
• Travel booking platforms

When Should You NOT Use ESI?

Avoid ESI when:

• The application is a Single Page Application (SPA).
• Content is highly interactive and rendered entirely in the browser.
• Every part of the page changes frequently.
• Real-time updates are required.
• Client-side rendering already handles composition effectively.
• Your CDN does not support ESI.

Modern React applications generally prefer client-side composition over ESI.

Advantages

Faster Response

Reduced Origin Load

Better Caching

Improved Scalability

Independent Fragment Development

Lower Network Latency

Disadvantages

CDN Dependency

Increased Complexity

Limited Dynamic Logic

Debugging Challenges

Vendor Lock-In

Not Suitable for SPAs

How is ESI Used with Module Federation?

Although ESI and Module Federation are often presented as alternatives, they can complement each other in hybrid architectures.

A common enterprise setup is:

• ESI assembles large, cacheable page sections (such as the header, footer, or marketing content) at the CDN.
• Module Federation loads interactive micro-frontends (such as product details, shopping cart, or recommendations) dynamically in the browser after the page is delivered.

For example, an e-commerce application might work like this:

The browser requests the homepage.

The CDN uses ESI to assemble the page shell, including the header, footer, and promotional banners.

The assembled HTML is sent to the browser.

Once loaded, the shell application uses Module Federation to fetch remote micro-frontends such as:

• Product Catalog
• Shopping Cart
• User Profile
• Search

Each remote application is loaded independently at runtime without requiring a full page reload.

This hybrid approach combines the strengths of both technologies:

• Fast initial page delivery through CDN-based HTML composition.
• Independent deployment of frontend features through Module Federation.
• Efficient caching for static content and dynamic runtime loading for interactive components.

Conclusion

Edge Side Includes (ESI) was one of the earliest techniques for composing web pages from independent fragments. By shifting page assembly to the CDN, it improved caching, reduced origin server load, and delivered content closer to users.

While modern SPAs often rely on technologies like Module Federation for client-side composition, ESI remains valuable for multi-page applications, content-heavy websites, and scenarios where edge caching is critical. In many enterprise systems, ESI and Module Federation are not competitors but complementary tools, each addressing a different stage of application composition.