React Router/Remix patch with Azure FrontDoor caching for dynamic pages

Have you ever deployed your shiny new React Router or Remix application to Azure, only to watch your page load times plummet from milliseconds to several grueling seconds? If you are routing traffic through Azure Front Door, you might be shocked to find your beautifully optimized pages are saddled with a no-store cache control header. This caching issue effectively disables azure front door caching for your SSR assets, causing response times to balloon from a crisp 49ms to a sluggish 3 or 4 seconds.

Left unresolved, this issue results in a truckload of unwanted traffic flooding your origin server on every single page request. To make matters worse, this behavior completely bypasses your performance expectations, forcing your app to rebuild pages dynamically when they should be served instantly from the edge.

The Hidden Conflict: Azure Front Door and HTTP Range Requests

To understand why this happens, we have to look at how Azure Front Door handles content delivery. When a client requests an asset, Azure Front Door attempts to optimize the delivery using HTTP range requests. This allows the CDN to request specific byte ranges of a file, which is incredibly useful for large files or multi-part downloads.

However, a severe bottleneck occurs when your application server compresses these assets on the fly while simultaneously advertising that it supports range requests. When Azure Front Door tries to request a specific byte range of a compressed asset, the combination fails. Instead of a fast delivery, the request stalls—frequently taking upwards of a minute to resolve, or falling back to a non-cached state to survive.

Why This Issue Happens

I found this exact issue while deploying a React Router/Remix application to Azure Front Door. When you rely on the default React Router server (@react-router/serve), you fall straight into this trap. The underlying server infrastructure relies on two specific configurations that trigger the conflict:

1. Express.js with compression enabled.
2. express.static, which by default returns Accept-Ranges headers in its responses.

This default combination forces Front Door to attempt range requests that inevitably fail due to the compression pipeline. Understanding how these systems interact is critical when configuring remix dynamic caching over a global CDN.

The Fix: Patching the Asset Server

The solution is to explicitly tell Azure Front Door that our origin server does not support range requests for these static files. We can achieve this by setting acceptRanges: false on all express.static calls within the server configuration. This simple modification bypasses the conflict, establishing a stable remix caching pattern at the CDN layer.

Patch Details

• Package: @react-router/serve
• File: node_modules/@react-router/serve/dist/cli.js

Changes Made

The patch modifies three express.static calls to explicitly include the acceptRanges: false configuration:

Assets (immutable)

Before: { immutable: true, maxAge: "1y" } After: { immutable: true, maxAge: "1y", acceptRanges: false }

Build directory

Before: express.static( build.assetsBuildDirectory) After: express.static( build.assetsBuildDirectory, { acceptRanges: false })

Public folder

Before: { maxAge: "1h" } After: { maxAge: "1h", acceptRanges: false }

How to Apply the Patch

We use patch-package to manage this patch and persist the modification across installations.

Creating the Patch

1. Make the changes manually to node_modules/@react-router/serve/dist/cli.js as described in the configuration updates above.
2. Run npx patch-package @react-router/serve in your terminal to generate the patch file.
3. Commit the generated patch file located at patches/@react-router+serve+X.X.X.patch to your repository (where X.X.X is your currently installed version).

Applying the Patch

Once the patch file exists in your repository, it is applied automatically during npm install or yarn install, provided you have configured patch-package in your postinstall script. Keep in mind that if you upgrade the @react-router/serve package to a new version, you will need to recreate the patch to align with the updated version.

Alternative Solutions: Custom Servers and Frameworks

If patching files inside node_modules makes your DevOps team uneasy, there are cleaner architectural paths to resolve the conflict. For teams looking for long-term stability without maintaining dependency overrides, consider these alternatives:

1. Use a custom server: Create your own custom Express server entry point. This allows you to define your asset serving routes manually and pass acceptRanges: false directly into your own static file middleware.
2. Migrate to Fastify: Fastify is highly recommended by modern web engineers. It serves as an incredibly fast Node.js alternative that does not suffer from these default header issues, streamlining your remix cdn integration.

Verifying the Fix on Azure Front Door

Once you deploy the patch or alternative server configuration, you must verify that Azure Front Door is successfully caching your assets rather than falling back to slow origin fetches. Open your browser's Developer Tools, navigate to the Network tab, and inspect the response headers of your static assets:

// Before the fix (Slow or Uncached response): Cache-Control: no-store Accept-Ranges: bytes X-Cache: TCP_MISS // After the fix (Optimized CDN response): Cache-Control: public, max-age=31536000, immutable X-Cache: TCP_HIT

A status of TCP_HIT or TCP_REMOTE_HIT indicates that the edge network is serving your assets directly, resulting in the coveted sub-50ms load times your application deserves.

Streamlining Your Azure Delivery

Deploying modern SSR frameworks on enterprise-grade CDNs does not have to be a headache. Resolving range request issues is the secret to unlocking true how to cache dynamic pages with azure front door capabilities. By taking control of your server headers, you ensure your users enjoy instantaneous transitions while keeping your origin servers cool, calm, and protected under heavy loads.

Happy serving!