Sitecore RenderingHost pointing to AzureFrontDoor is serving static files like CSS, JSS slowly and sometimes it gives ERR_HTTP2_PROTOCOL_ERROR

Question

We are using Sitecore version 10.3.0 with JSS and server-side rendering using a Node.js headless proxy. All of our resources are hosted in Azure.

Our Azure Front Door (aaaa.afd.net) is pointed to the rendering host (aaaa-renderinghost.azurewebsites.net).

We have a CDN (aaaa-cdn.azureedge.net) for media files, which is also pointed to the rendering host (aaaa-renderinghost.azurewebsites.net). In Sitecore's SitecoreCD, we have enabled CDN configuration, and this CDN URL is pointed there. There are no issues with media files; they load as expected.

The overall setup is almost a typical setup of a traditional (Non-Headless) managed cloud instance with Azure Front Door and CDN. The only difference from the traditional (Non-Headless) setup is that we have pointed the CDN to the Rendering Host instead of the SitecoreCD.

Please note, below the cache setup,

• In Azure Front Door, caching is enabled with "Cache every unique URL," default cache period, and compression enabled.
• In the CDN, compression is enabled for all formats.

Below overall error summary,

When we directly access app services, all the static files such as CSS, JSS, and favicon load. However, these files do not load from Azure Front Door, and we receive an error in the browser console with ERR_HTTP2_PROTOCOL_ERROR.

No logs from the rendering host and in Azure Front Door log all these files are getting 503 status!

When we disable the cache from FrontDoor, all static files are loaded as expected from Azure Front Door!

Answer 1

Microsoft AZURE Support team pointed out the problem is Azure Front Door is not able to cache these files because of the following reasons,

• From the origin(renderinghost appservice) is setting cache header as "public max-age=0" for all static files.
• Also, compression should happen at the Azure Front Door and not from the origin(renderinghost appservice). Currently, our rendering host doing compression.

Then we ended up fixing those headers from the origin(renderinghost appservice) application layer NODEJS headless proxy template. We did with the below option and options may vary

Disable compression from the rendering host NODEJS headless proxy. You can find this line responsible for compression "server.use(compression())", You can disable it as like below,

// enable gzip compression for appropriate file types
if (process.env.AAAA_DISABLE_COMPRESSION === "true") {
  server.use(compression({ filter: shouldCompress }));

  function shouldCompress() {
    return false;
  }
}else{
  server.use(compression());
}

Setting up the cache response header from the rendering host NODEJS headless proxy. You can find these middleware lines from the template "server.use('/dist'" change it to below like this,

server.use(
  '/dist',
  express.static(reqPath, {
    fallthrough: false, // force 404 for unknown assets under /dist
    // Added for handling cache header
    setHeaders: function(res) {
      if (process.env.AAAA_ENABLE_DIST_FOLDER_PUBLICHCACHE === "true") {
        res.setHeader('cache-control', 'public, max-age='+(process.env.AAAA_DIST_FOLDER_PUBLICHCACHE_MAXAGE||'31536000'));
        // Added for remove compression header
        res.removeHeader('Accept-Encoding');
      }
    }
  })
);

Now from the origin level cache max age is increased & compression disabled. Post Azure Front Door can cache these static resources!