How can I use Varnish Edge Side includes for a sidebar?

Question

You can do something like the following:

If you have a sidebar called “Sidebar”

<?php
if ( !dynamic_sidebar("Sidebar") ) :
endif;
?>

You wrap it in ESI tags, one for if ESI is not enabled and one if it is:

<esi:remove>
  <?php
  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) :
  endif;
  ?>
</esi:remove>
<!--esi
<esi:include src="https://wordpress.stackexchange.com/wp-content/plugins/myplugin/esihandler.php"/>
-->

Then, create the endpoint that ESI will pull from, call it esihandler.php:

<?php
$cwd = getcwd();
$path = substr($cwd, 0, strpos($cwd, 'wp-content/'));
require $path . 'wp-blog-header.php';

if ( !dynamic_sidebar("Sidebar") ) :
endif;

Finally, update your varnish config for the appropriate cache times in the sub vlc_fetch call:

if (req.url ~ "esihandler.php") {
  set beresp.ttl = 10m;
}
else {
  set beresp.do_esi = true;
  set beresp.ttl = 1440m;
}