Edge Side Includes suports on Vue SSR?

Question

I have tried to include edge side tags <esi:include> in my nuxt project.

But it is not rendering the element when it is serving from varnish.

My vue file:

  <div>
    <Header/>
    <esi:include src="http://widget-webapp/header-bar" />
    <Footer/>
  </div>

I have included the ESI tag in the ignoreElement in the nuxt config to ignore the ESI element warning.

  vue: {
config: {
  productionTip: false,
  devtools: process.env.NODE_ENV === 'prod' || process.env.NODE_ENV === 'stage' ? false : true,
  ignoredElements: ['esi:include']
  }
},

I have seen that there is a library for React. Is there any type of library or way to include ESI tag in a vue SSR? Any sort of help will be appreciated. Thanks.

Vcl code for ESI:

if (bereq.http.host ~ "example\.com$") {
    set beresp.grace = 24h;

    # Enable ESI
    if (beresp.http.content-type ~ "html|xml") {
      set beresp.do_esi = true;}

Answer 1

Suggested approach

Keep in mind that Varnish doesn't parse ESI tags automatically. You need to instruct Varnish to do this for the right pages using VCL logic.

Have a look at https://www.varnish-software.com/developers/tutorials/example-vcl-template/#14-esi-support. It describes a common ESI configuration for Varnish that is part of our example VCL file.

This is the code:

sub vcl_recv {
    set req.http.Surrogate-Capability = "key=ESI/1.0";
}

sub vcl_backend_response {
    if (beresp.http.Surrogate-Control ~ "ESI/1.0") {
        unset beresp.http.Surrogate-Control;
        set beresp.do_esi = true;
    }
}

Meaning of the Surrogate headers

What this snippet does is check whether the backend sent a Surrogate-Control header containing an ESI/1.O key prior to storing the object in the cache.

It allows the application to send a header like Surrogate-Control: content="ESI/1.0", which Varnish processes and uses to activate ESI processing.

However, the web application has no guarantees that there will be a caching server that supports ESI in front of it. That's why Varnish exposes a Surrogate-Capability header that announces the capabilities it has on the edge.

The header that Varnish sends is Surrogate-Capability: "key=ESI/1.0".

Using the Surrogate headers in your application

In your application you should check whether or not a Surrogate-Capability request header is sent that contains the term ESI/1.0. If that is the case, you can espose <esi:include src="/xyz" /> tags.

Just make sure you set the Surrogate-Control: content="ESI/1.0" response header so that Varnish knows that it should process them.

If the Surrogate-Capability request header is not set or doesn't contain the right terms, you shouldn't expose ESI tags and instead render that content on the web server, rather than on the edge.

Update: handling ESI with the VCL code you provided

Based on the VCL code you provided, ESI processing will only take place if the request host matches example.com and any value prefixing it.

I'm not sure if this is a redacted host name, but please make sure the Host header matches the one you send the request with.

The ESI parsing also happens when the Content-Type response header contains html or xml. Please also ensure the content is either HTML or XML.

How to debug?

The assumptions I described in the paragraph above are pretty standard and might not be 100% helpful in your situation. That's why the proper debugging commands could make sense.

Assuming that the homepage of your service contains ESI tags, the following varnishlog command can be used to debug.

Please adjust the URL to the one you're using and attach the output of the command to your question. This output can be used to figure out what's really going on.

sudo varnishlog -g request -q "ReqUrl eq '/'"