fix: Static assets redirect to dashboard (#3612)

## Description

1. 404 error instead of redirect on assets.
2. Vercel sets Cache-Control: public, max-age=31536000, immutable for
all /assets/* paths,
even when a 404 error occurs during deployment.
This causes 404 errors on assets to be cached permanently, preventing
updates.
To prevent this, we set "Cache-Control": "public, max-age=0,
must-revalidate" when an asset is not found.


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

apps/builder/app/routes/$.tsx

@@ -1,5 +1,9 @@
 import { lazy } from "react";
-import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
+import {
+  type LoaderFunctionArgs,
+  redirect,
+  type HeadersFunction,
+} from "@remix-run/server-runtime";
 import {
   Links,
   Meta,
@@ -17,13 +21,20 @@ import { ClientOnly } from "~/shared/client-only";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
-  // See remix.config.ts for the publicPath value
-  const publicPath = "/build/";
+
+  // Redirecting asset files (e.g., .js, .css) to the dashboard should be avoided.
+  // This is because immutable caching rules apply to redirects, causing these files
+  // to become permanently inaccessible. Ensure asset files are served correctly
+  // without redirects to maintain availability and proper caching behavior.
+  const publicPath = "/assets/";
 
   // In case of 404 on static assets, this route will be executed
   if (url.pathname.startsWith(publicPath)) {
     throw new Response("Not found", {
       status: 404,
+      headers: {
+        "Cache-Control": "public, max-age=0, must-revalidate",
+      },
     });
   }
 
@@ -52,6 +63,22 @@ export const ErrorBoundary = () => {
   return <ErrorMessage message={message} />;
 };
 
+export const headers: HeadersFunction = ({ errorHeaders, loaderHeaders }) => {
+  // !!!! VERY IMPORTANT !!!
+  // Vercel sets Cache-Control: public, max-age=31536000, immutable for all /assets/* paths,
+  // even when a 404 error occurs during deployment.
+  // This causes 404 errors on assets to be cached permanently, preventing updates.
+  // To prevent this, we set "Cache-Control": "public, max-age=0, must-revalidate" when an asset is not found.
+  const cacheControl = errorHeaders?.get("Cache-Control");
+
+  if (cacheControl) {
+    return {
+      "Cache-Control": cacheControl,
+    };
+  }
+  return loaderHeaders;
+};
+
 const Canvas = lazy(async () => {
   const { Canvas } = await import("~/canvas/index.client");
   return { default: Canvas };