The Hidden Cost of cross-platform Remix 3 for Astro 4: A Practical Guide

import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { useLoaderData, useActionData, Form } from "@remix-run/react";
import { z } from "zod";
import { getProductById, updateProductStock } from "~/models/product.server";
import { requireUserId } from "~/session.server";
import { validateCSRF } from "~/csrf.server";

// Validation schema for product updates
const ProductUpdateSchema = z.object({
  stock: z.number().min(0, "Stock cannot be negative"),
  price: z.number().min(0.01, "Price must be at least $0.01"),
});

// Cross-platform loader: works on Node, Cloudflare Workers, Deno
export async function loader({ params, request }: LoaderFunctionArgs) {
  const { productId } = params;
  if (!productId) {
    throw json({ error: "Product ID is required" }, { status: 400 });
  }

  try {
    const product = await getProductById(productId);
    if (!product) {
      throw json({ error: "Product not found" }, { status: 404 });
    }

    // Cross-platform cache headers: works across all Remix runtimes
    const headers = new Headers();
    headers.set("Cache-Control", "public, max-age=60, s-maxage=3600");
    headers.set("Vary", "Accept-Encoding");

    return json({ product }, { headers });
  } catch (error) {
    // Log error with runtime-agnostic logger
    console.error(`[Remix 3 Loader] Failed to load product ${productId}:`, error);
    throw json(
      { error: "Failed to load product. Please try again later." },
      { status: 500 }
    );
  }
}

// Cross-platform action for stock updates
export async function action({ params, request }: ActionFunctionArgs) {
  const { productId } = params;
  if (!productId) {
    throw json({ error: "Product ID is required" }, { status: 400 });
  }

  // Validate CSRF token for cross-platform form submissions
  await validateCSRF(request);

  const userId = await requireUserId(request);
  const formData = await request.formData();
  const rawStock = formData.get("stock");
  const rawPrice = formData.get("price");

  // Validate input with Zod
  const validationResult = ProductUpdateSchema.safeParse({
    stock: Number(rawStock),
    price: Number(rawPrice),
  });

  if (!validationResult.success) {
    return json(
      { errors: validationResult.error.flatten().fieldErrors },
      { status: 400 }
    );
  }

  try {
    const updatedProduct = await updateProductStock(
      productId,
      validationResult.data.stock,
      validationResult.data.price,
      userId
    );
    return redirect(`/products/${productId}`);
  } catch (error) {
    console.error(`[Remix 3 Action] Failed to update product ${productId}:`, error);
    return json(
      { error: "Failed to update product. Please try again later." },
      { status: 500 }
    );
  }
}

export default function ProductRoute() {
  const { product } = useLoaderData();
  const actionData = useActionData();

  return (

      {product.name}
      Price: ${product.price.toFixed(2)}
      Stock: {product.stock}

      {actionData?.error && (

          {actionData.error}

      )}




            Stock





            Price




          Update Product



  );
}

// src/pages/products/[productId].astro
import type { GetServerSideProps, InferGetServerSidePropsType } from "astro";
import { z } from "zod";
import { getProductById, updateProductStock } from "~/models/product.server";
import { requireUserId } from "~/session.server";
import { validateCSRF } from "~/csrf.server";
import Layout from "~/layouts/Layout.astro";

// Reuse validation schema from Remix 3 app
const ProductUpdateSchema = z.object({
  stock: z.number().min(0, "Stock cannot be negative"),
  price: z.number().min(0.01, "Price must be at least $0.01"),
});

// Astro 4 server-side props: equivalent to Remix loader
export const getServerSideProps: GetServerSideProps = async (context) => {
  const { productId } = context.params;
  if (!productId || typeof productId !== "string") {
    return {
      props: { error: "Product ID is required" },
      status: 400,
    };
  }

  try {
    const product = await getProductById(productId);
    if (!product) {
      return {
        props: { error: "Product not found" },
        status: 404,
      };
    }

    // Astro 4 cache headers: note s-maxage is not supported in all adapters
    const headers = new Headers();
    headers.set("Cache-Control", "public, max-age=60");
    // HIDDEN COST: Astro 4's @astrojs/remix adapter drops s-maxage by default
    // You must manually configure the adapter to preserve edge cache headers
    headers.set("Vary", "Accept-Encoding");

    return {
      props: { product },
      headers,
    };
  } catch (error) {
    console.error(`[Astro 4 SSR] Failed to load product ${productId}:`, error);
    return {
      props: { error: "Failed to load product. Please try again later." },
      status: 500,
    };
  }
};

// Handle form actions: Astro 4 uses separate POST handler
export const post: GetServerSideProps = async (context) => {
  const { productId } = context.params;
  if (!productId || typeof productId !== "string") {
    return {
      props: { error: "Product ID is required" },
      status: 400,
    };
  }

  // Validate CSRF token
  await validateCSRF(context.request);

  const userId = await requireUserId(context.request);
  const formData = await context.request.formData();
  const rawStock = formData.get("stock");
  const rawPrice = formData.get("price");

  const validationResult = ProductUpdateSchema.safeParse({
    stock: Number(rawStock),
    price: Number(rawPrice),
  });

  if (!validationResult.success) {
    return {
      props: { errors: validationResult.error.flatten().fieldErrors },
      status: 400,
    };
  }

  try {
    await updateProductStock(
      productId,
      validationResult.data.stock,
      validationResult.data.price,
      userId
    );
    // Astro 4 redirect: must use context.redirect instead of Remix's redirect
    return context.redirect(`/products/${productId}`);
  } catch (error) {
    console.error(`[Astro 4 POST] Failed to update product ${productId}:`, error);
    return {
      props: { error: "Failed to update product. Please try again later." },
      status: 500,
    };
  }
};

type Props = InferGetServerSidePropsType;

const ProductPage = ({ product, error }: Props) => {
  return (


        {error ? (

            {error}

        ) : (
          <>
            {product.name}
            Price: ${product.price.toFixed(2)}
            Stock: {product.stock}




                  Stock





                  Price




                Update Product



        )}


  );
};

export default ProductPage;

// benchmark/compare-remix-astro.ts
import autocannon from "autocannon";
import { spawn, type ChildProcess } from "child_process";
import { writeFileSync, mkdirSync, existsSync } from "fs";
import { join } from "path";

// Configuration
const BENCHMARK_DURATION = 30; // seconds
const RAMP_UP = 5; // seconds
const REQUEST_RATE = 100; // requests per second
const ROUTES_TO_TEST = ["/products/123", "/api/products/123"];
const RESULTS_DIR = join(process.cwd(), "benchmark-results");

// Remix 3 and Astro 4 start commands (adjust for your setup)
const REMIX_START_CMD = "npm run dev:remix";
const ASTRO_START_CMD = "npm run dev:astro";
const REMIX_PORT = 3000;
const ASTRO_PORT = 4321;

// Type for benchmark results
interface BenchmarkResult {
  runtime: "remix" | "astro";
  route: string;
  p50: number;
  p90: number;
  p99: number;
  requestsPerSecond: number;
  errors: number;
  timeouts: number;
  memoryMB: number;
}

// Helper to start a dev server and return the process
function startServer(command: string, port: number): Promise {
  return new Promise((resolve, reject) => {
    const [cmd, ...args] = command.split(" ");
    const proc = spawn(cmd, args, {
      env: { ...process.env, PORT: port.toString() },
      stdio: "pipe",
    });

    let isReady = false;
    proc.stdout?.on("data", (data: Buffer) => {
      const output = data.toString();
      // Detect server ready message (adjust for your framework)
      if (output.includes("ready") || output.includes("Local:")) {
        if (!isReady) {
          isReady = true;
          resolve(proc);
        }
      }
    });

    proc.stderr?.on("data", (data: Buffer) => {
      console.error(`Server error: ${data.toString()}`);
    });

    proc.on("error", reject);

    // Timeout if server doesn't start in 30 seconds
    setTimeout(() => {
      if (!isReady) {
        proc.kill();
        reject(new Error(`Server failed to start within 30 seconds: ${command}`));
      }
    }, 30000);
  });
}

// Helper to run autocannon benchmark
async function runBenchmark(url: string, route: string): Promise {
  console.log(`Running benchmark for ${url}${route}...`);
  return new Promise((resolve, reject) => {
    const instance = autocannon(
      {
        url: `${url}${route}`,
        duration: BENCHMARK_DURATION,
        rampUp: RAMP_UP,
        requestsPerSecond: REQUEST_RATE,
        connectionRate: 10,
        timeout: 10,
      },
      (err, result) => {
        if (err) reject(err);
        else resolve(result);
      }
    );

    autocannon.track(instance, { renderProgressBar: true });
  });
}

// Helper to get memory usage of a process
function getMemoryUsage(pid: number): number {
  try {
    const usage = process.memoryUsage();
    return usage.heapUsed / 1024 / 1024; // MB
  } catch {
    return 0;
  }
}

// Main benchmark function
async function main() {
  if (!existsSync(RESULTS_DIR)) {
    mkdirSync(RESULTS_DIR, { recursive: true });
  }

  const results: BenchmarkResult[] = [];

  // Test Remix 3 first
  console.log("Starting Remix 3 server...");
  let remixProc: ChildProcess | undefined;
  try {
    remixProc = await startServer(REMIX_START_CMD, REMIX_PORT);
    const remixUrl = `http://localhost:${REMIX_PORT}`;

    for (const route of ROUTES_TO_TEST) {
      const result = await runBenchmark(remixUrl, route);
      const memory = getMemoryUsage(remixProc.pid!);

      results.push({
        runtime: "remix",
        route,
        p50: result.latency.p50,
        p90: result.latency.p90,
        p99: result.latency.p99,
        requestsPerSecond: result.requests.average,
        errors: result.errors,
        timeouts: result.timeouts,
        memoryMB: memory,
      });
    }
  } catch (error) {
    console.error("Remix 3 benchmark failed:", error);
  } finally {
    remixProc?.kill();
  }

  // Test Astro 4 next
  console.log("Starting Astro 4 server...");
  let astroProc: ChildProcess | undefined;
  try {
    astroProc = await startServer(ASTRO_START_CMD, ASTRO_PORT);
    const astroUrl = `http://localhost:${ASTRO_PORT}`;

    for (const route of ROUTES_TO_TEST) {
      const result = await runBenchmark(astroUrl, route);
      const memory = getMemoryUsage(astroProc.pid!);

      results.push({
        runtime: "astro",
        route,
        p50: result.latency.p50,
        p90: result.latency.p90,
        p99: result.latency.p99,
        requestsPerSecond: result.requests.average,
        errors: result.errors,
        timeouts: result.timeouts,
        memoryMB: memory,
      });
    }
  } catch (error) {
    console.error("Astro 4 benchmark failed:", error);
  } finally {
    astroProc?.kill();
  }

  // Save results
  const resultsPath = join(RESULTS_DIR, `benchmark-${Date.now()}.json`);
  writeFileSync(resultsPath, JSON.stringify(results, null, 2));
  console.log(`Results saved to ${resultsPath}`);

  // Print summary
  console.log("\n=== Benchmark Summary ===");
  console.table(
    results.map((r) => ({
      Runtime: r.runtime,
      Route: r.route,
      "p99 Latency (ms)": r.p99.toFixed(2),
      "Req/Sec": r.requestsPerSecond.toFixed(2),
      "Memory (MB)": r.memoryMB.toFixed(2),
      Errors: r.errors,
    }))
  );
}

// Run main function with error handling
main().catch((error) => {
  console.error("Benchmark failed:", error);
  process.exit(1);
});

# .github/workflows/audit-cache-headers.yml
name: Audit Cache Headers
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build:astro
      - run: npx cache-header-check --url http://localhost:4321/products/123 --expect "s-maxage=3600"

// src/utils/astro-loader.ts
import type { GetServerSideProps, InferGetServerSidePropsType } from "astro";
import { z, type ZodSchema } from "zod";

export function createAstroLoader, Props>(
  schema: ZodSchema,
  loader: (args: { params: Params; request: Request }) => Promise
): GetServerSideProps {
  return async (context) => {
    const paramsResult = schema.safeParse(context.params);
    if (!paramsResult.success) {
      return { props: {} as Props, status: 400 };
    }
    try {
      const props = await loader({ params: paramsResult.data, request: context.request });
      return { props };
    } catch (error) {
      console.error("Astro loader error:", error);
      return { props: {} as Props, status: 500 };
    }
  };
}

// src/utils/metrics.ts
import { register, Gauge } from "prom-client";

export const memoryGauge = new Gauge({
  name: "astro_memory_heap_used_mb",
  help: "Heap memory used in MB",
  collect() {
    const usage = process.memoryUsage();
    this.set(usage.heapUsed / 1024 / 1024);
  },
});

register.registerMetric(memoryGauge);

remix-to-astro-migration/
├── benchmark/
│   └── compare-remix-astro.ts  # Benchmark script from section 3
├── src/
│   ├── pages/
│   │   └── products/
│   │       └── [productId].astro  # Migrated Astro 4 route
│   ├── routes/
│   │   └── products/
│   │       └── $productId.tsx  # Original Remix 3 route
│   ├── models/
│   │   └── product.server.ts
│   ├── session.server.ts
│   ├── csrf.server.ts
│   └── utils/
│       └── astro-loader.ts  # Type-safe wrapper from tip 2
├── .github/
│   └── workflows/
│       └── audit-cache-headers.yml  # CI check from tip 1
├── package.json
├── remix.config.js
├── astro.config.mjs
└── tsconfig.json