Setting custom time for cache-control for static assets

[drishit96]

I want to cache static assets like fonts for at least a year, but the default time set for static assets is 1 hour.
I checked a similar discussion, but the solution requires you to eject out of remix's customized express server.
Is this the only way to do this?

[kiliman]

Yes, Remix App Server doesn't expose its configuration. You're basically stuck with the defaults and need to eject to your own Express server if you want more flexibility. https://github.com/kiliman/rmx-cli#-eject-ras

Another option is to move your static assets to a folder in app/, like app/assets. Then you can import the asset in your route, and Remix will fingerprint/hash and copy them to public/build/_assets. The build folder sets the cache to immutable so it'll be cached forever. If the asset changes, it'll get a new fingerprint/hash.

https://remix.run/docs/en/v1/guides/migrating-react-router-app#asset-imports

[drishit96]

Moving static assets to public/build might not completely do it for me. What are the disadvantages of ejecting?

[sergiodxa]

You can't use remix dev to run your app in dev anymore, you have to run a process with remix watch and another with node server.js (server.js is your Express server code).

Aside of that all other features are the same because the ejected Express server is the same used by Remix App Server, being the next main difference that now you will own the server.js file so you can do anything with it, which can be good if you know what you're doing or bad if you don't.

[kiliman]

which can be good if you know what you're doing or bad if you don't.

😅 That's pretty true for all of life

[gssvv]

If someone is looking for a workaround, I created a file static.$.tsx that serves static files and allows overriding headers.

import { LoaderFunction } from "@remix-run/node";
import fs from "fs";
import mime from "mime-types";

const allowedPaths = [/^\/some-path\/index\.js$/];

/**
 * This method allows to serve static files from the server,
 * overriding the cache-control header.
 */
export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);

  const filePath = url.pathname.replace("/static", "");
  const ttl = String(url.searchParams.get("max-age") || 60 * 60 * 24 * 30);

  if (!allowedPaths.some((path) => path.test(filePath))) {
    return new Response("Not Found", { status: 404 });
  }

  try {
    const file = await fs.readFileSync(`./public${filePath}`);

    const fileType = mime.lookup(filePath);

    return new Response(file, {
      status: 200,
      headers: {
        "Content-Type": fileType || "text/plain",
        "Content-Length": String(file.length),
        "Cache-Control": `public, max-age=${ttl}`,
      },
    });
  } catch (error) {
    return new Response("Failed to download file", { status: 500 });
  }
};