The Complete Production SOP: How to Deploy and Run Remix Run Loader & Action Fullstack Data Flow in Autonomous AI Agents

---
name: "remix-run-loader-action-routes"
description: "Eliminate client-side state fetching waterfalls with Remix loaders, actions, and optimistic forms."
metadata:
  author: "Remix"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write remix loader and action"
  - "optimistic mutation usefetcher remix"
  - "remix errorboundary"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import { useLoaderData, useFetcher, isRouteErrorResponse, useRouteError } from '@remix-run/react';
import { getProjects, deleteProject } from '~/models/projects.server';

export async function loader({ request }: LoaderFunctionArgs) {
  const projects = await getProjects();
  return json({ projects });
}

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const id = formData.get('id');
  if (typeof id !== 'string') {
    throw json({ message: 'Invalid Project ID' }, { status: 400 });
  }
  await deleteProject(id);
  return json({ success: true });
}

export default function ProjectsRoute() {
  const { projects } = useLoaderData<typeof loader>();
  const fetcher = useFetcher();

  return (
    <main>
      <h1>Projects</h1>
      <ul>
        {projects.map((project) => {
          const isDeleting = fetcher.formData?.get('id') === project.id;
          return (
            <li key={project.id} style={{ opacity: isDeleting ? 0.4 : 1 }}>
              <span>{project.name}</span>
              <fetcher.Form method="post">
                <input type="hidden" name="id" value={project.id} />
                <button type="submit" disabled={isDeleting}>
                  {isDeleting ? 'Deleting...' : 'Delete'}
                </button>
              </fetcher.Form>
            </li>
          );
        })}
      </ul>
    </main>
  );
}

export function ErrorBoundary() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return <div role="alert">Error {error.status}: {error.data?.message || error.statusText}</div>;
  }
  return <div role="alert">Unknown Application Error</div>;
}