Using fragment cache with ESI

First of all, what’s ESI? If you are familiar with cache approaches, you may have heard about it. The ESI or Edge Side Includes is a small markup language for edge level dynamic web content assembly with the purpose to solve the following problem, e.g.:

A web page has some dynamic components that always change, on the other hand, others static parts of the same page barely are modified like the footer or header, what kind of cache strategy we can use? When you are using reverse cache also known as gateway cache in your application or web servers like Apache or Nginx at this context, this sort of cache will be useless, because in every request will be necessary to refresh the cache system to show the dynamic content because the cache works for the whole page. On this sample, the cache layer will be only an extra step to increase the latency. So, how to solve that problem?