<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1050989841627822&amp;ev=PageView&amp;noscript=1">

Edge Side Includes (ESI) - A Complete Overview

esi-gd
Web 2.0 Digitage 2012 (Photo credit: ocean.flynn)

Edge Side Includes or ESI is a markup language for edge level dynamic web content assembly. The goal of ESI is to solve the problem of web infrastructure scaling and content publishing.

Co-authored by Akamai, ATG, BEA Systems, Circadence, Digital Island, IBM, Interwoven, Oracle, and Vignette ESI Language Specification was submitted to the World Wide Web Consortium (W3C) for approval in August 2001 but was never accepted. The proposal editor was Mark Nottingham.

ESI is currently supported by Content Delivery Networks: Akamai, Fastly, CloudFlare and caching proxy servers - Varnish, Squid and Mongrel ESI, although many do not implement the complete specification. Akamai also adds additional features to the version they support.

How does it work? By assembling dynamic pages from individual page fragments only non- cacheable or expired fragments need to be fetched from the origin location, thereby lowering the need to retrieve complete pages. This decreases the load on the Web sites' content generation infrastructure as shown on image below.

Screen Shot 2014-02-19 at 11.34.46 PM

Image source

How to implement ESI

ESI element tags are inserted into HTML or other text based (source) content management system during creation. ESI tags are not  displayed to viewers, but are directives that instruct an ESI processor to take some action. The XML based ESI tags indicate to the edge-side processing agent the action that needs to be taken to complete the page's assembly.

Example of an ESI element is the include tag which is used to include content external to the page. An ESI include tag placed in-line within an HTML document would look like this:

<esi:include src="http://example.com/1.html" alt="http://bak.example.com/2.html" onerror="continue"/>

In this case the ESI processor would retrieve the src URL, or failing that the alt URL, or if that failed do nothing. The ESI system is usually a caching proxy server so it may have a local copy of these files which it can insert without going back to the server. Alternatively the whole page with the ESI tags may be cached, and only the ESI requests may be made to the origin server. This allows different caching times for different parts of the page, or different degrees of personalization.

ESI Features & Alternatives

There are four main features in ESI, as described at Wikipedia:

  • inclusion of page fragments
  • variables which can be set from cookies or HTTP headers and then used in other ESI statements or written into markup;
  • conditions so that different markup can be used based on variables, for example if a cookie is set or not;
  • error handling, so that a failover can be used if an origin server is unavailable.

The main alternatives to ESI are:

  • to do assembly on the origin server using Server Side Includes and many types of server-side scripting,
  • or on the browser-side using client-side scripting and techniques known as AJAX (see tutorial).

Further reading and reference

Request a Free Consultation with our Specialists

Request a Free Consultation with our Specialists

Contact Now