This article provides configuration solutions to the Varnish Edge Side Includes (ESI) issues, where certain pages’ content, usually the top navigation panel, is not displayed on the storefront if Varnish is used for caching.
Install and configure Varnish for your Adobe Commerce store.
Steps to reproduce:
All content and all page blocks load successfully.
Observe that some content blocks, like the top navigation panel with categories, are not loading. Blank space is displayed instead.
The possible reasons for the issue are the following:
To resolve the issues, you need to perform an additional Varnish configuration and restart Varnish.
As a user with
root privileges, open your Vanish configuration file in a text editor. See the Modify the Varnish system configuration in our developer documentation for info on where this file might be located for different operating systems.
DAEMON_OPTS variable, add
-p feature=+esi_disable_xml_check. This would look like:
DAEMON_OPTS="-a :6081 \ -p feature=+esi_ignore_other_elements \ -p feature=+esi_disable_xml_check \ -p feature=+esi_ignore_https \ -T localhost:6082 \ -f /etc/varnish/default.vcl \ -S /etc/varnish/secret \ -s malloc,256m"
Save your changes and exit the text editor.
In the VCL configuration file, increase the response headers by increasing the values of these parameters:
workspace_backend. Make sure that the last two of them have similar values.
When you change this, you need to run
service varnish restart for the changes to take effect.