No longer require backend to be up in order to build frontend

.github/workflows/ci.yml

@@ -150,7 +150,7 @@ jobs:
 
       - name: Build and bring up up frontend container
         run: |
-          docker compose -f docker-compose.prod.yaml -f docker-compose.build.yaml build frontend
+          docker compose -f docker-compose.prod.yaml build frontend
           docker compose -f docker-compose.prod.yaml up -d frontend
           timeout 15s docker compose -f docker-compose.prod.yaml logs -f || true
 

frontend/Dockerfile

@@ -7,8 +7,6 @@ ENTRYPOINT ["/frontend/docker_entrypoint.sh"]
 
 FROM node:24-alpine AS builder
 
-RUN apk add curl
-
 COPY package.json /frontend/
 COPY yarn.lock /frontend/
 
@@ -27,7 +25,6 @@ COPY loaders /frontend/loaders
 COPY public /frontend/public
 COPY src /frontend/src
 
-# NOTE: 'backend' will point to bare-metal host via docker0 bridge adapter
 ARG INTERNAL_API_BASE=http://backend:8000/api
 ENV INTERNAL_API_BASE=${INTERNAL_API_BASE}
 
@@ -43,13 +40,8 @@ ENV GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
 ARG OBJDIFF_BASE=https://diff.decomp.me/
 ENV OBJDIFF_BASE=${OBJDIFF_BASE}
 
-# allows for cache busting even if only backend changed
 ARG GIT_HASH
 
-RUN until curl -s --head "${INTERNAL_API_BASE}" | grep "HTTP/" > /dev/null; do \
-    sleep 1; \
-    done
-
 RUN yarn build && rm -rf .next/cache
 
 

frontend/next.config.js

@@ -18,6 +18,8 @@ const getEnvBool = (key, fallback = false) => {
 
 const mediaUrl = new URL(process.env.MEDIA_URL ?? "http://localhost");
 const svgrLoader = path.join(__dirname, "loaders/svgr-webpack.js");
+const publicDynamicPageCache =
+    "public, s-maxage=300, stale-while-revalidate=3600";
 
 let app = {
     async redirects() {
@@ -71,6 +73,42 @@ let app = {
                     },
                 ],
             },
+            {
+                source: "/new",
+                headers: [
+                    {
+                        key: "Cache-Control",
+                        value: publicDynamicPageCache,
+                    },
+                ],
+            },
+            {
+                source: "/platform",
+                headers: [
+                    {
+                        key: "Cache-Control",
+                        value: publicDynamicPageCache,
+                    },
+                ],
+            },
+            {
+                source: "/preset",
+                headers: [
+                    {
+                        key: "Cache-Control",
+                        value: publicDynamicPageCache,
+                    },
+                ],
+            },
+            {
+                source: "/credits",
+                headers: [
+                    {
+                        key: "Cache-Control",
+                        value: "public, s-maxage=3600, stale-while-revalidate=86400",
+                    },
+                ],
+            },
         ];
     },
     turbopack: {

frontend/src/app/(navfooter)/credits/page.tsx

@@ -46,6 +46,8 @@ const ICON_SOURCES = {
     "PerSPire Font by Sean Liew": "https://www.fontspace.com/sean-liew",
 };
 
+export const dynamic = "force-dynamic";
+
 type Contributor =
     | {
           type: "decompme";

frontend/src/app/(navfooter)/new/page.tsx

@@ -7,7 +7,7 @@ export const metadata = {
     title: "New scratch",
 };
 
-export const revalidate = 300;
+export const dynamic = "force-dynamic";
 
 export default async function NewScratchPage() {
     const availablePlatforms = await getPublic("/platform");

frontend/src/app/(navfooter)/platform/page.tsx

@@ -1,7 +1,7 @@
 import { Platforms } from "@/app/(navfooter)/platform/platforms";
 import { getPublic } from "@/lib/api/request";
 
-export const revalidate = 300;
+export const dynamic = "force-dynamic";
 
 export default async function Page() {
     const availablePlatforms = await getPublic("/platform");

frontend/src/app/(navfooter)/preset/page.tsx

@@ -1,7 +1,7 @@
 import { Presets } from "@/app/(navfooter)/preset/presets";
 import { getPublic } from "@/lib/api/request";
 
-export const revalidate = 300;
+export const dynamic = "force-dynamic";
 
 export default async function Page() {
     const availablePlatforms = await getPublic("/platform");

frontend/src/app/opengraph-image.tsx

@@ -10,6 +10,7 @@ const IMAGE_WIDTH_PX = 1200;
 const IMAGE_HEIGHT_PX = 400;
 
 export const runtime = "edge";
+export const dynamic = "force-dynamic";
 
 export default async function HomeOG() {
     const OpenSansSemiBold = fetch(