Edge Side Includes (ESI)

Edge Side Includes (ESI) is a technology that allows the dynamic assembly of web pages at the edge servers (e.g., CDN nodes) instead of on the origin server. This technique improves website performance by enabling partial page caching, allowing some parts of a webpage to be cached while other parts are fetched dynamically from the server.

How ESI Works

Web pages often consist of static and dynamic elements:

• Static content: Content that doesn’t change often (e.g., headers, footers, images).
• Dynamic content: Content that changes frequently based on user interaction or other factors (e.g., personalized user information, shopping cart items, or login status).

With traditional caching, a whole page (including both static and dynamic content) might be served from the cache or generated dynamically, making it difficult to cache dynamic portions efficiently.

Edge Side Includes (ESI) addresses this by allowing developers to “mark” specific parts of a webpage that should be dynamically loaded (often from the origin server) while caching the rest of the page at the edge. This way, edge servers can serve the static parts from their cache while retrieving only the dynamic parts from the origin, reducing the load on the server and speeding up delivery times.

Key Features of ESI

1. Tags for Dynamic Fragments: ESI works through special ESI tags embedded in the HTML of a web page. These tags act as placeholders for dynamic content. When the CDN or edge server sees these tags, it knows to fetch that specific content dynamically.
   • Example of an ESI tag:
      

     <esi:include src="http://example.com/dynamic-content" />

2. Partial Page Assembly: Edge servers can assemble the final web page by stitching together the static content from their cache and the dynamic parts requested from the origin server. This avoids the need to regenerate the entire page for every user request, which is especially beneficial for high-traffic websites.
3. Fragment Caching: Each dynamic part can have its own caching rules. For instance, the static header and footer can be cached for hours or days, while the personalized shopping cart or user login info is updated in real-time or with shorter cache durations.
4. Performance Optimization: By using ESI, websites can reduce load times and server load, as most of the content is served from the edge cache, and only small, dynamic pieces need to be fetched from the origin.

Advantages of ESI

• Improves Caching Efficiency: ESI allows more precise caching of web pages by separating static and dynamic elements, reducing the need to generate full pages on the origin server for every request.
• Reduces Server Load: By caching static parts of the page and only retrieving dynamic parts, ESI reduces the number of requests that hit the origin server, offloading much of the work to edge servers.
• Faster Content Delivery: With most of the page cached at edge locations close to the user, websites can serve pages faster, improving user experience.
• Scalability: It helps websites scale better, as edge servers handle most of the static content and only a small portion of requests go back to the origin server for dynamic parts.

Use Cases of ESI

1. E-commerce Websites: Pages like product listings or category pages may contain a lot of static information (product descriptions, images) that don’t change frequently, while elements like shopping cart totals or personalized offers may change frequently. ESI allows caching the static parts and loading the dynamic parts (like cart contents) in real time.
2. Personalized Content: For websites that show personalized greetings or recommendations based on user data, ESI can cache the general layout while fetching only the specific user data dynamically.
3. News Websites: News portals with static sections (like headers, footers, or menus) can use ESI to cache these parts, while loading dynamic sections like breaking news or user-specific content in real-time.
4. Session Management: Websites that use session data (like user login information) can cache the public parts of the page, but use ESI to fetch session-specific information dynamically for each user.

ESI and Content Delivery Networks (CDNs)

Many CDNs (Content Delivery Networks) such as Akamai, and QUIC.cloud support ESI, enabling them to assemble pages at the edge by combining cached content with dynamic fragments fetched from the origin server. This allows websites to leverage the CDN’s global network for faster content delivery while still providing personalized or dynamic content.

ESI Example Scenario

Consider a website with the following structure:

• Header: Static, doesn’t change often.
• Main content: Mostly static, but has some dynamic user-specific elements (like recent orders or cart items).
• Footer: Static, doesn’t change often.

Instead of sending each page request to the origin server, the CDN or edge server can cache the header and footer, while using ESI tags to fetch the user-specific main content dynamically. The final page is assembled by the edge server and served to the user, combining static and dynamic elements.

Conclusion

Edge Side Includes (ESI) is a powerful tool for websites that need to efficiently cache and deliver both static and dynamic content. It enables more granular caching, reducing the need for full-page regeneration while still providing dynamic content when necessary. This technology is especially beneficial for high-traffic websites and applications that require scalability, personalization, and fast load times.