Using esi includes in Nuxt 2

Question

My goal: Glue Nuxt 3 rendered code inside my old application that is written in Nuxt 2. The glue will be Varnish and using the <esi:includes

My problem: I have .vue file

<template>
  <div>
    <esi:include src="/from/nuxt-3-app" method="GET" />
  </div>
</template>

It does work for a few seconds and *poof, disappears!

The errors I got:

1. Mismatching childNodes vs. VNodes:  NodeList(15) [text, meta, text, meta, link, link, link, link, link, text, div#__nuxt, script, script, script, text] (3) [VNode, VNode, VNode...

2. [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

3. [Vue warn]: Unknown custom element: .... <- resolved by adding `v-pre` in <esi:include ... v-pre />

Note: They appear in order ^

What I've done:

Use v-pre
ignoredElements? -> I'm trying to declare it like these:

nuxt.config.js

...
Vue: {
  config: {
    ignoredElements: ["esi:include"]
  }
}

^ but doesn't seem to work

Wrapping <esi:include ... /> with <client-only> ... </client-only> ("nuxt": "^2.15.8")

^ Side effect, it doesn't display or render what's inside my <esi:include

What I'm about to try:

surrogate-control headers - Reference but seems not what I need since I already declared do_esi=true by default. Here's my VCL if you want to see it:

backend test {
  .host = "host.docker.internal";
  .port = "3101";
}

sub vcl_backend_response {
  set beresp.ttl = 1s;
  set beresp.do_esi = true;
}

sub vcl_recv {
  unset req.http.cookie;

  if (req.url ~ "^/from/nuxt-3-app") {
    set req.backend_hint = test;
    return (hash);
  }
}

What I just want: Render what's inside the <esi:includes ... /> without nuxt removing it

UPDATE:

By running $ docker exec -ti varnish-1 varnishlog -g request -q "ReqUrl eq '/from/nuxt-3-app'", it outputs:

*   << Request  >> 32802     
-   Begin          req 32801 rxreq
-   Timestamp      Start: 1675160337.497249 0.000000 0.000000
-   Timestamp      Req: 1675160337.497249 0.000000 0.000000
-   VCL_use        boot
-   ReqStart       172.19.0.1 51890 a0
-   ReqMethod      GET
-   ReqURL         /core/journals/animal-conservation-forum/article/abs/reproductive-seasonality-in-the-female-scimitarhorned-oryx-oryx-dammah/D040F6E602CB05C1AF5637F78D131964
-   ReqProtocol    HTTP/1.1
-   ReqHeader      Host: localhost
-   ReqHeader      Connection: keep-alive
-   ReqHeader      sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
-   ReqHeader      sec-ch-ua-mobile: ?0
-   ReqHeader      sec-ch-ua-platform: "Windows"
-   ReqHeader      Upgrade-Insecure-Requests: 1
-   ReqHeader      User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
-   ReqHeader      Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-   ReqHeader      Sec-Fetch-Site: same-origin
-   ReqHeader      Sec-Fetch-Mode: navigate
-   ReqHeader      Sec-Fetch-User: ?1
-   ReqHeader      Sec-Fetch-Dest: document
-   ReqHeader      Accept-Encoding: gzip, deflate, br
-   ReqHeader      Accept-Language: en,en-US;q=0.9
-   ReqHeader      Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
-   ReqHeader      X-Forwarded-For: 172.19.0.1
-   VCL_call       RECV
-   ReqUnset       Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
-   ReqUnset       Host: localhost
-   ReqHeader      host: localhost
-   VCL_return     hash
-   ReqUnset       Accept-Encoding: gzip, deflate, br
-   ReqHeader      Accept-Encoding: gzip
-   VCL_call       HASH
-   VCL_return     lookup
-   VCL_call       MISS
-   VCL_return     fetch
-   Link           bereq 32803 fetch
-   Timestamp      Fetch: 1675160342.181087 4.683837 4.683837
-   RespProtocol   HTTP/1.1
-   RespStatus     200
-   RespReason     OK
-   RespHeader     X-XSS-Protection: 1; mode=block
-   RespHeader     X-Frame-Options: SAMEORIGIN
-   RespHeader     Strict-Transport-Security: max-age=15552000; includeSubDomains
-   RespHeader     X-Download-Options: noopen
-   RespHeader     X-Content-Type-Options: nosniff
-   RespHeader     X-DNS-Prefetch-Control: off
-   RespHeader     Referrer-Policy: no-referrer-when-downgrade
-   RespHeader     Set-Cookie: aca-session=Fe26.2**d52e49ae7b3ccdc36556aa7b4c20048874f846e82468af606077f7c4b71be6eb*4tmkdQPlCdtF-2VkBbRhZA*rbBfz1w3lOXBVZzjzKAQNgWwFGtwaIidurV_nphqr7q_5OBFzOF1xNZxCF4jH100QXsGCOKP6zIoptRAR78rsfQQ8ZADhKmT5nV3Vof27Bc**6c81e4ccddf057d0ebda53bb4
-   RespHeader     Set-Cookie: session=s%3ANj4GDJ0TCKHeZ-xW6EMtPyQVkLS5NUNj.0k1Rej%2B8hMWdaaqM81CPLlt4gltmwKCJw8e%2BLKDuag0; Path=/; HttpOnly
-   RespHeader     Cache-Control: no-cache, no-store, must-revalidate
-   RespHeader     Expires: 0
-   RespHeader     Pragma: no-cache
-   RespHeader     Content-Type: text/html; charset=utf-8
-   RespHeader     Content-Length: 121908
-   RespHeader     ETag: W/"1dc34-cVsnSJj8RA0tTuog9jjKA9De5g8"
-   RespHeader     Date: Tue, 31 Jan 2023 10:19:02 GMT
-   RespHeader     X-Varnish: 32802
-   RespHeader     Age: 0
-   RespHeader     Via: 1.1 varnish (Varnish/6.3)
-   VCL_call       DELIVER
-   VCL_return     deliver
-   Timestamp      Process: 1675160342.181402 4.684152 0.000314
-   Filters        esi
-   RespHeader     Accept-Ranges: bytes
-   RespUnset      Content-Length: 121908
-   RespHeader     Connection: keep-alive
-   RespHeader     Transfer-Encoding: chunked
-   Link           req 32804 esi
-   Timestamp      Resp: 1675160350.339610 12.842360 8.158208
-   ReqAcct        1686 0 1686 1111 403318 404429
-   End
**  << BeReq    >> 32803
--  Begin          bereq 32802 fetch
--  VCL_use        boot
--  Timestamp      Start: 1675160337.499660 0.000000 0.000000
--  BereqMethod    GET
--  BereqURL       /core/journals/animal-conservation-forum/article/abs/reproductive-seasonality-in-the-female-scimitarhorned-oryx-oryx-dammah/D040F6E602CB05C1AF5637F78D131964
--  BereqProtocol  HTTP/1.1
--  BereqHeader    sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
--  BereqHeader    sec-ch-ua-mobile: ?0
--  BereqHeader    sec-ch-ua-platform: "Windows"
--  BereqHeader    Upgrade-Insecure-Requests: 1
--  BereqHeader    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
--  BereqHeader    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
--  BereqHeader    Sec-Fetch-Site: same-origin
--  BereqHeader    Sec-Fetch-Mode: navigate
--  BereqHeader    Sec-Fetch-User: ?1
--  BereqHeader    Sec-Fetch-Dest: document
--  BereqHeader    Accept-Language: en,en-US;q=0.9
--  BereqHeader    X-Forwarded-For: 172.19.0.1
--  BereqHeader    host: localhost
--  BereqHeader    Accept-Encoding: gzip
--  BereqHeader    X-Varnish: 32803
--  VCL_call       BACKEND_FETCH
--  VCL_return     fetch
--  BackendOpen    26 core 192.168.65.2 3000 172.19.0.2 52386
--  Timestamp      Bereq: 1675160337.513789 0.014128 0.014128
--  Timestamp      Beresp: 1675160342.138510 4.638849 4.624720
--  BerespProtocol HTTP/1.1
--  BerespStatus   200
--  BerespReason   OK
--  BerespHeader   X-XSS-Protection: 1; mode=block
--  BerespHeader   X-Frame-Options: SAMEORIGIN
--  BerespHeader   Strict-Transport-Security: max-age=15552000; includeSubDomains
--  BerespHeader   X-Download-Options: noopen
--  BerespHeader   X-Content-Type-Options: nosniff
--  BerespHeader   X-DNS-Prefetch-Control: off
--  BerespHeader   Referrer-Policy: no-referrer-when-downgrade
--  BerespHeader   Set-Cookie: aca-session=Fe26.2**d52e49ae7b3ccdc36556aa7b4c20048874f846e82468af606077f7c4b71be6eb*4tmkdQPlCdtF-2VkBbRhZA*rbBfz1w3lOXBVZzjzKAQNgWwFGtwaIidurV_nphqr7q_5OBFzOF1xNZxCF4jH100QXsGCOKP6zIoptRAR78rsfQQ8ZADhKmT5nV3Vof27Bc**6c81e4ccddf057d0ebda53bb4
--  BerespHeader   Set-Cookie: session=s%3ANj4GDJ0TCKHeZ-xW6EMtPyQVkLS5NUNj.0k1Rej%2B8hMWdaaqM81CPLlt4gltmwKCJw8e%2BLKDuag0; Path=/; HttpOnly
--  BerespHeader   Cache-Control: no-cache, no-store, must-revalidate
--  BerespHeader   Expires: 0
--  BerespHeader   Pragma: no-cache
--  BerespHeader   Content-Type: text/html; charset=utf-8
--  BerespHeader   Content-Length: 121908
--  BerespHeader   ETag: W/"1dc34-cVsnSJj8RA0tTuog9jjKA9De5g8"
--  BerespHeader   Date: Tue, 31 Jan 2023 10:19:02 GMT
--  BerespHeader   Connection: keep-alive
--  BerespHeader   Keep-Alive: timeout=5
--  TTL            RFC 120 10 0 1675160342 1675160342 1675160342 0 0 cacheable
--  VCL_call       BACKEND_RESPONSE
--  TTL            VCL 1 10 0 1675160342 cacheable
--  TTL            VCL 120 10 0 1675160342 cacheable
--  TTL            VCL 120 10 0 1675160342 uncacheable
--  VCL_return     deliver
--  Filters        esi
--  Storage        malloc Transient
--  Fetch_Body     3 length -
--  BackendReuse   26 core
--  Timestamp      BerespBody: 1675160342.181075 4.681414 0.042565
--  Length         121908
--  BereqAcct      865 0 865 1050 121908 122958
--  End
**  << Request  >> 32804
--  Begin          req 32802 esi
--  Timestamp      Start: 1675160342.182034 0.000000 0.000000
--  ReqURL         /page-component/core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
--  ReqUnset       Accept-Encoding: gzip, deflate, br
--  ReqStart       172.19.0.1 51890 a0
--  ReqMethod      GET
--  ReqURL         /page-component/core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
--  ReqProtocol    HTTP/1.1
--  ReqHeader      Host: localhost
--  ReqHeader      Connection: keep-alive
--  ReqHeader      sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
--  ReqHeader      sec-ch-ua-mobile: ?0
--  ReqHeader      sec-ch-ua-platform: "Windows"
--  ReqHeader      Upgrade-Insecure-Requests: 1
--  ReqHeader      User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
--  ReqHeader      Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
--  ReqHeader      Sec-Fetch-Site: same-origin
--  ReqHeader      Sec-Fetch-Mode: navigate
--  ReqHeader      Sec-Fetch-User: ?1
--  ReqHeader      Sec-Fetch-Dest: document
--  ReqHeader      Accept-Language: en,en-US;q=0.9
--  ReqHeader      Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
--  ReqHeader      X-Forwarded-For: 172.19.0.1
--  VCL_call       RECV
--  ReqUnset       Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
--  ReqURL         /core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
--  VCL_return     hash
--  VCL_call       HASH
--  VCL_return     lookup
--  VCL_call       MISS
--  VCL_return     fetch
--  Link           bereq 32805 fetch
--  Timestamp      Fetch: 1675160349.704156 7.522122 7.522122
--  RespProtocol   HTTP/1.1
--  RespStatus     200
--  RespReason     OK
--  RespHeader     X-Powered-By: Express
--  RespHeader     Cache-Control: max-age=1
--  RespHeader     Content-Type: text/html; charset=utf-8
--  RespHeader     Content-Length: 278058
--  RespHeader     Date: Tue, 31 Jan 2023 10:19:09 GMT
--  RespHeader     X-Varnish: 32804
--  RespHeader     Age: 0
--  RespHeader     Via: 1.1 varnish (Varnish/6.3)
--  VCL_call       DELIVER
--  VCL_return     deliver
--  Timestamp      Process: 1675160349.704181 7.522147 0.000025
--  Filters        esi
--  RespHeader     Accept-Ranges: bytes
--  RespUnset      Content-Length: 278058
--  Link           req 32806 esi
--  Timestamp      Resp: 1675160350.336350 8.154316 0.632169
--  ReqAcct        0 0 0 0 281569 281569
--  End
*** << BeReq    >> 32805
--- Begin          bereq 32804 fetch
--- VCL_use        boot
--- Timestamp      Start: 1675160342.182128 0.000000 0.000000
--- BereqMethod    GET
--- BereqURL       /core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z
--- BereqProtocol  HTTP/1.1
--- BereqHeader    Host: localhost
--- BereqHeader    sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
--- BereqHeader    sec-ch-ua-mobile: ?0
--- BereqHeader    sec-ch-ua-platform: "Windows"
--- BereqHeader    Upgrade-Insecure-Requests: 1
--- BereqHeader    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
--- BereqHeader    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
--- BereqHeader    Sec-Fetch-Site: same-origin
--- BereqHeader    Sec-Fetch-Mode: navigate
--- BereqHeader    Sec-Fetch-User: ?1
--- BereqHeader    Sec-Fetch-Dest: document
--- BereqHeader    Accept-Language: en,en-US;q=0.9
--- BereqHeader    X-Forwarded-For: 172.19.0.1
--- BereqHeader    Accept-Encoding: gzip
--- BereqHeader    X-Varnish: 32805
--- VCL_call       BACKEND_FETCH
--- VCL_return     fetch
--- BackendOpen    27 page-component 192.168.65.2 3200 172.19.0.2 41506
--- Timestamp      Bereq: 1675160342.185778 0.003650 0.003650
--- Timestamp      Beresp: 1675160349.659051 7.476923 7.473272
--- BerespProtocol HTTP/1.1
--- BerespStatus   200
--- BerespReason   OK
--- BerespHeader   X-Powered-By: Express
--- BerespHeader   Cache-Control: max-age=1
--- BerespHeader   Content-Type: text/html; charset=utf-8
--- BerespHeader   Accept-Ranges: none
--- BerespHeader   Content-Length: 278058
--- BerespHeader   Date: Tue, 31 Jan 2023 10:19:09 GMT
--- BerespHeader   Connection: keep-alive
--- BerespHeader   Keep-Alive: timeout=5
--- TTL            RFC 1 10 0 1675160350 1675160350 1675160349 0 1 cacheable
--- VCL_call       BACKEND_RESPONSE
--- TTL            VCL 1 10 0 1675160350 cacheable
--- VCL_return     deliver
--- Filters        esi
--- Storage        malloc s0
--- Fetch_Body     3 length -
--- ESI_xmlerror   ERR after 252412 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror   ERR after 252440 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror   WARN after 252479 ESI 1.0 <esi:include> lacks final '/'
--- ESI_xmlerror   ERR after 252552 ESI 1.0 </esi:include> illegal end-tag
--- ESI_xmlerror   ERR after 252566 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror   ERR after 252577 ESI 1.0 <esi:bogus> element
--- BackendReuse   27 page-component
--- Timestamp      BerespBody: 1675160349.704133 7.522005 0.045082
--- Length         278058
--- BereqAcct      855 0 855 237 278058 278295
--- End

*** << Request  >> 32806
--- Begin          req 32804 esi
--- Timestamp      Start: 1675160349.704397 0.000000 0.000000
--- ReqURL         /from/nuxt-3-app
--- ReqStart       172.19.0.1 51890 a0
--- ReqMethod      GET
--- ReqURL         /from/nuxt-3-app
--- ReqProtocol    HTTP/1.1
--- ReqHeader      Host: localhost
--- ReqHeader      Connection: keep-alive
--- ReqHeader      sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
--- ReqHeader      sec-ch-ua-mobile: ?0
--- ReqHeader      sec-ch-ua-platform: "Windows"
--- ReqHeader      Upgrade-Insecure-Requests: 1
--- ReqHeader      User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
--- ReqHeader      Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
--- ReqHeader      Sec-Fetch-Site: same-origin
--- ReqHeader      Sec-Fetch-Mode: navigate
--- ReqHeader      Sec-Fetch-User: ?1
--- ReqHeader      Sec-Fetch-Dest: document
--- ReqHeader      Accept-Language: en,en-US;q=0.9
--- ReqHeader      Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
--- ReqHeader      X-Forwarded-For: 172.19.0.1
--- VCL_call       RECV
--- ReqUnset       Cookie: _ga=GA1.1.139642328.1641268029; ki_r=; ki_t=1641268031778%3B1642563665396%3B1642573565476%3B8%3B218; _ce.s=v~2d93a7cfee1083f149b58dffa418e2cef523c4bf~vpv~1; CORE_CITATION_STYLE=%7B%22key%22%3A%22american-sociological-association%22%2C%22name%22%3
--- VCL_return     hash
--- VCL_call       HASH
--- VCL_return     lookup
--- VCL_call       MISS
--- VCL_return     fetch
--- Link           bereq 32807 fetch
--- Timestamp      Fetch: 1675160350.335800 0.631402 0.631402
--- RespProtocol   HTTP/1.1
--- RespStatus     200
--- RespReason     OK
--- RespHeader     Access-Control-Allow-Origin: *
--- RespHeader     content-type: text/html;charset=UTF-8
--- RespHeader     x-powered-by: Nuxt
--- RespHeader     server-timing: -;dur=0;desc="Generate"
--- RespHeader     date: Tue, 31 Jan 2023 10:19:10 GMT
--- RespHeader     content-length: 3689
--- RespHeader     X-Varnish: 32806
--- RespHeader     Age: 0
--- RespHeader     Via: 1.1 varnish (Varnish/6.3)
--- VCL_call       DELIVER
--- VCL_return     deliver
--- Timestamp      Process: 1675160350.335845 0.631448 0.000045
--- Filters
--- RespHeader     Accept-Ranges: bytes
--- Timestamp      Resp: 1675160350.336108 0.631710 0.000262
--- ReqAcct        0 0 0 0 3689 3689
--- End

*4* << BeReq    >> 32807
-4- Begin          bereq 32806 fetch
-4- VCL_use        boot
-4- Timestamp      Start: 1675160349.704484 0.000000 0.000000
-4- BereqMethod    GET
-4- BereqURL        
-4- BereqProtocol  HTTP/1.1
-4- BereqHeader    Host: localhost
-4- BereqHeader    sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
-4- BereqHeader    sec-ch-ua-mobile: ?0
-4- BereqHeader    sec-ch-ua-platform: "Windows"
-4- BereqHeader    Upgrade-Insecure-Requests: 1
-4- BereqHeader    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
-4- BereqHeader    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-4- BereqHeader    Sec-Fetch-Site: same-origin
-4- BereqHeader    Sec-Fetch-Mode: navigate
-4- BereqHeader    Sec-Fetch-User: ?1
-4- BereqHeader    Sec-Fetch-Dest: document
-4- BereqHeader    Accept-Language: en,en-US;q=0.9
-4- BereqHeader    X-Forwarded-For: 172.19.0.1
-4- BereqHeader    Accept-Encoding: gzip
-4- BereqHeader    X-Varnish: 32807
-4- VCL_call       BACKEND_FETCH
-4- VCL_return     fetch
-4- BackendOpen    26 test 192.168.65.2 3101 172.19.0.2 36466
-4- Timestamp      Bereq: 1675160349.706376 0.001892 0.001892
-4- Timestamp      Beresp: 1675160350.330727 0.626242 0.624350
-4- BerespProtocol HTTP/1.1
-4- BerespStatus   200
-4- BerespReason   OK
-4- BerespHeader   Access-Control-Allow-Origin: *
-4- BerespHeader   content-type: text/html;charset=UTF-8
-4- BerespHeader   x-powered-by: Nuxt
-4- BerespHeader   server-timing: -;dur=0;desc="Generate"
-4- BerespHeader   date: Tue, 31 Jan 2023 10:19:10 GMT
-4- BerespHeader   connection: close
-4- BerespHeader   content-length: 3689
-4- TTL            RFC 120 10 0 1675160350 1675160350 1675160350 0 0 cacheable
-4- VCL_call       BACKEND_RESPONSE
-4- TTL            VCL 1 10 0 1675160350 cacheable
-4- VCL_return     deliver
-4- Filters        esi
-4- Storage        malloc s0
-4- Fetch_Body     3 length -
-4- BackendClose   26 test
-4- Timestamp      BerespBody: 1675160350.335742 0.631257 0.005014
-4- Length         3689
-4- BereqAcct      733 0 733 228 3689 3917
-4- End

Thijs Feryn · Accepted Answer · 2023-01-31T17:09:21.540

While I'm not a fan of doing unconditional ESI parsing, and why I still stand by the ESI content negotiation I explained in the answer you're referring to, we must first figure out why ESI isn't getting parsed at all.

Please run the following command and attach the output to your original question:

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

My assumption is that / is the URL of the page that contains the ESI tag. If this is not the case, please adjust the URL in the -q filter.

Based on the varnishlog output you'll probably provide, I'll try to provide the proper solution.

Update

Based on the logs in transaction 32805, there's something wrong with the output:

--- ESI_xmlerror   ERR after 252412 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror   ERR after 252440 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror   WARN after 252479 ESI 1.0 <esi:include> lacks final '/'
--- ESI_xmlerror   ERR after 252552 ESI 1.0 </esi:include> illegal end-tag
--- ESI_xmlerror   ERR after 252566 ESI 1.0 <esi:bogus> element
--- ESI_xmlerror   ERR after 252577 ESI 1.0 <esi:bogus> element

There's some bogus ESI content in the response of /core/journals/journalName/article/articleName/D040F6E602CB05C1AF5637F78D131964?hasAccess=0&lang=en&contentLastUpdateDate=2018-06-09T21:06:21.084Z

However, I do find it strange that transaction 32805 is complaining about this, because this is a 3-level subrequest that is not even supposed to process ESI. It looks like you're doing nested ESI.

That might be the result of processing every response with an ESI filter. Not only does it consume more CPU, it may also encounter output that it doesn't understand. Hence the error.

The only page that is supposed to contain ESI tags is /core/journals/animal-conservation-forum/article/abs/reproductive-seasonality-in-the-female-scimitarhorned-oryx-oryx-dammah/D040F6E602CB05C1AF5637F78D131964

The easy way out

The easiest solution is to tell Varnish not to enforce strict XML/xHTML rules for parsing output.

You can do this by adding the following runtime parameter to varnishd:

-p feature=+esi_disable_xml_check

There's no guarantee that it will solve your problem, but it might help.

The better solution

A better solution is to avoid nested ESI parsing when it's not needed.

As explained in https://www.varnish-software.com/developers/tutorials/example-vcl-template/#14-esi-support, you can use Surrogate-Control and Surrogate-Capability headers to negotiate ESI parsing.

That way you have full control over what kind of content is parsed for ESI tags and what not.

Hello @Thijs, I don't know how since I'm running my Varnish server using Docker. Since this is another option I haven't done yet, I will have to do it. Just a side note though, it does show the parsed/rendered ESI tag but only for a few seconds and Nuxt seems to interfere since it removes the ESI parsed/rendered block entirely. But, still, regardless of that, I should still try your idea. Will come back to you. — Quer, Jan 31 '23 at 00:59
I found another thread actually, that's been answered by you, again! https://superuser.com/a/1717497 - Outputting, logging with varnish when using docker-compose, Docker-Desktop, I'll try this, thanks! — Quer, Jan 31 '23 at 01:01
@Quer You don't need STDOUT/STDERR output logging to solve your problem. As a matter of fact, `varnishlog` output doesn't get sent to STDOUT/STDERR. If you're running Docker, just run the following command (and adjust the URL and container name if necessary): `docker exec -ti varnish varnishlog -g request -q "ReqUrl eq '/'"` — Thijs Feryn, Jan 31 '23 at 09:07
@Quer FYI, the `docker exec -ti varnish varnishlog -g request -q "ReqUrl eq '/'"` command I shared has `varnish` in it. I'm assuming the name of your Docker container is Varnish. As mentioned, please adjust accordingly. The same applies for the URL in the query. When you get relevant output, attach it to your question for further examination. — Thijs Feryn, Jan 31 '23 at 09:08
Apologies for the delayed reply. You are correct I'm trying the nested `` tags. A follow-up question for the "better solution", when you said to avoid nested ESI parsing WHEN it is not needed, what is the expected output of this? So let's say I have 1 nested esi includes tags, when I implemented the surrogate-capability does it mean it wouldn't render the one inside the main esi includes tags? EDIT: I accidentally pressed the enter key* What if I really need to render the one inside the main esi includes tags? Would it be possible? — Quer, Mar 23 '23 at 04:25
@Quer It's definitely possible to process nested ESI tags. That's not an issue. I would advise to set the `feature +esi_disable_xml_check` though. — Thijs Feryn, Mar 23 '23 at 09:07

Using esi includes in Nuxt 2

1 Answers1

Update

The easy way out

The better solution