There was already a bug of the same nature
#903

So, actually the problem is that here

app.use(
  build.publicPath,
  express.static(build.assetsBuildDirectory, {
    immutable: true,
    maxAge: "1y",
  })
);
app.use(express.static("public", { maxAge: "1h" }));

build.assetsBuildDirectory is just build/client, so it handles all the requests to the public folder.

The config should actually be something like this

app.use(
  build.publicPath,
  express.static(build.assetsBuildDirectory + "/assets", {
    immutable: true,
    maxAge: "1y",
  })
);
app.use(express.static(build.assetsBuildDirectory, { maxAge: "1h" }));

The main problem is that these headers are also sent on a 404 error.
A 404 on static files is not uncommon during deployment, for example on Vercel. And a cached 404 makes it impossible to fully use the site.

This issue seems to be fixed in the react-router codebase but not Remix
https://github.com/remix-run/react-router/blob/bc1c1c8ef87b7bf97f1f168604b89a5da61939da/packages/react-router-serve/cli.ts#L81

This is a pretty serious bug. It just resulted in a cached forever file on 10,000 visitors to my website that now I have to rename in order to update, but I can not easily rename it because of the nature of it.

I run https://web3dsurvey.com and I recently moved to Remix and the way you embed this tracker is now "public, max-age=31536000, immutable" on 10,000 visitors:

https://web3dsurvey.com/collector-iframe.html (more secure method)
https://web3dsurvey.com/collector.js (old method)

I tried replacing the files in /public with custom routes that force the headers, e.g.:

import { LoaderFunctionArgs } from '@remix-run/node';
import fs from 'fs';
import path from 'path';

const filePath = path.join(process.cwd(), 'content', 'collector.js');
const fileContent = fs.readFileSync(filePath, 'utf-8');
const fileLength = Buffer.byteLength(fileContent);

export async function loader({ request, params }: LoaderFunctionArgs) {
  return new Response(fileContent, {
    headers: {
      'Content-Type': 'application/javascript',
      'Cache-Control': 'max-age=300',
      'Content-Length': fileLength.toString()
    }
  });
}

Strangely it worked for collector-iframe.html, but not for collector.js.

That is pretty inconvenient for me. :/

I've moved away from remix:server and adopted the Fastify integration and now it works properly:

https://github.com/mcansh/remix-fastify

/assets is immutable, cached forever because it has unique URLs.

/public is no-cache, but it will serve up 304 unmodified to save bandwidth.

Those are good defaults.