Shopware’s implementation
A key frontend change in 6.7 is that the storefront header and footer are rendered via ESI. Two new routes were added (<kbd>/_esi/global/header</kbd> and <kbd>/_esi/global/footer</kbd>), typically handled by a NavigationController. The base Twig template now includes the header and footer with the Twig <kbd>render_esi()</kbd>function, which inserts special ESI tags.
In other words, the header and footer HTML are generated by separate requests (frontend.header and frontend.footer) and merged by the HTTP cache (Symfony or Varnish) when serving pages. Similarly to an AJAX call but on the server side before serving the full response to the client. As the release notes describe: “The header and footer are now loaded via ESI. This allows caching the header and footer separately from the rest of the page”. Two new entry-point templates were added (<kbd>views/storefront/layout/header.html.twig</kbd> and <kbd>.../footer.html.twig</kbd>), which extensions should extend (the internal block names remain the same).
Because header/footer are now independent cache fragments, changes to navigation (like adding a category) only invalidate the header cache, not every page in the store.
