Cloudflare CDN not returning 304 Remix App

I have a staging website on Fly.Io along with my production site.

I am able to return a 304 when reloading a page on my staging website. It isn’t proxied with Cloudflare.

But, when running my main site with Cloudflare I am unable to return a 304. I assume it had to do something with my e-tags used. I disabled Automatic HTTPS rewrites along with Email Obfuscation as outlined here https://support.cloudflare.com/hc/en-us/articles/218505467-Using-ETag-Headers-with-Cloudflare

But, still the issue persists. Any help would be appreciated.

Little update. Now getting cf-cache-status: MISS in the response header. I notice turning on the Cache Level: Cache Everything page rule for my domain changed the cf-cache-status. It used to be Dynamic which meant the page wasn’t available for caching. I think I am getting closer to the answer.

Also, adding in the following actually let me use my cache. I was hitting the cache, but not utilizing it in my app.

export let headers: HeadersFunction = ({ loaderHeaders }) => {
  return { 'Cache-Control': loaderHeaders.get('Cache-Control') };
};

Still not getting 304… also noticing my e-tags are not showing on my main site although they do on my staging one.

Ok. So I found out that certain parts of my site do actually get 304 response.

Those would be any where I have:

  return new Response(content, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml',
      'xml-version': '1.0',
      'x-content-type-options': 'nosniff',
      encoding: 'UTF-8',
    },
  });

The stuff inside the new Response is not important, but I guess when I only have data come in through the loader directly there is no issue.

The pages where I have the usual export default function Index() to display my components and need to load in my data through const data = useLoaderData<typeof loader>(); is where the issue is happening.

Gonna keep trying…

https://blog.cloudflare.com/introducing-smart-edge-revalidation/ so it looks like Cloudflare does it automatically on edge. With my own headers still not working but noticed pages without had it working. Think I’m just gonna keep it simple on myself and let Cloudflare do the work with Etag stuff. Also, if anyone’s wondering the Edge Cache ttl does not show in response headers although you will see 304 responses if it’s working