What is Edge Side Includes?

/ Development, HTML, Interview Questions, Scripting

Edge Side Includes (ESI) is a small markup language for edge level dynamic web content assembly.

The purpose of ESI is to tackle the problem of web infrastructure scaling. It is an application of edge computing.

More details can be found on wikipedia

ESI element tags are inserted into HTML or other text based content during creation.

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

Main features of ESI

  • Include page fragments as shown above
  • Variables can be tested from HTTP headers/cookies and can be used in other ES statements
  • Conditions can be used to test for example if a cookie is set or not
  • If an origin server is unavailable then failover can be used for error handling

ESI language specifications

Few examples can be found on Github


<html>
<esi:include="/header" />
<body>

   <esi:choose>
      <esi:when test="$(QUERY_STRING{foo}) == 'bar'">
         Hi
      </esi:when>
      <esi:otherwise>
         <esi:choose>
            <esi:when test="$(HTTP_COOKIE{mycookie}) == 'yep'">
               <esi:include src="http://example.com/_fragments/fragment1" />
            </esi:when>
         </esi:choose>
      </esi:otherwise>
   </esi:choose>

</body>
</html>