Remix Route Generator - Online Loader & Action Template

A loader is an async function exported from a Remix route module that runs exclusively on the server. It fetches data needed by the route component before rendering. The data is returned via json() and accessed in the component using useLoaderData(). Loaders receive params, request, and context as arguments, enabling server-side data fetching with full access to databases, APIs, cookies, and sessions.

An action is a server-only function that handles data mutations (form submissions, POST/PUT/DELETE requests). Like loaders, actions run on the server and can access databases, process file uploads, validate input, and return responses. After an action completes, Remix automatically revalidates all loaders on the page, keeping the UI in sync without manual state management. Actions typically return redirect() on success or json() with errors on failure.

Loaders handle GET requests and fetch read-only data. Actions handle POST, PUT, PATCH, and DELETE requests for mutations. Loaders are called on every navigation; actions are triggered by form submissions or programmatic calls. A critical difference: after an action completes, Remix automatically revalidates all loaders on the current page, ensuring fresh data without extra code. Both run only on the server and are never bundled into the client.

Remix provides excellent TypeScript support. Import LoaderFunctionArgs and ActionFunctionArgs from @remix-run/node to type your function parameters. Export a type alias using typeof loader so components can use useLoaderData<typeof loader>() for full type inference. For actions, use ActionFunctionArgs and type the return as TypedResponse<YourType> or use ReturnType<typeof action>.

Defer (Remix v1) and automatic streaming (Remix v2+) allow you to send critical data immediately while streaming slower data later. In v2, simply return an object with some promises un-awaited — Remix automatically streams them. Use <Await> and <Suspense> in your component to handle the streaming UI. This improves perceived performance by showing the page skeleton while slower data loads in the background.

Remix offers multiple error handling strategies: (1) throw new Response("Not Found", { status: 404 }) — triggers the nearest ErrorBoundary for expected errors. (2) return json({ error: "..." }, { status: 400 }) — returns an error to the component without triggering ErrorBoundary, useful for validation errors. (3) try-catch with logging for unexpected errors. Choose based on whether the error should show a full error page or inline feedback.

Remix pairs excellently with Zod for schema validation. Parse Object.fromEntries(formData) with a Zod schema and use safeParse() to avoid throwing. Return json({ errors: result.error.flatten().fieldErrors }) on failure so the component can display inline field errors. For simpler cases, manual checks like if (!name) return json({ error: "Name required" }, 400) work too. Libraries like Conform and Remix Validated Form streamline this further.

Remix loaders can fetch from any server-side source: REST APIs via fetch(), databases through ORMs like Prisma or Drizzle, headless CMS platforms (Contentful, Strapi), file systems, Redis caches, or even other Remix resource routes. Since loaders run on the server, you have access to environment variables, authentication tokens, and any Node.js API — making them extremely flexible data-fetching entry points.

Dynamic route segments like $userId in your file name map to params.userId in both loaders and actions. For example, a file at routes/users.$userId.tsx receives { userId: string } in params. Use these to fetch user-specific data, apply access control checks, or scope database queries. Params are always strings — convert to numbers with parseInt() or validate with Zod's z.coerce.number() when needed.

Resource routes (routes without a default component export) are perfect for API endpoints, webhooks, and JSON-only responses. Keep them focused — one route, one responsibility. Use proper HTTP status codes, add CORS headers if needed, and secure them with authentication checks. For CRUD operations, consider a single resource route handling multiple methods via request.method rather than creating separate files for each operation.

Remix uses progressive enhancement for forms. A standard <Form> component submits to the route's action even before JavaScript loads. When JS is available, Remix intercepts the submission, serializes the form data via request.formData(), and sends it via fetch — avoiding a full page reload. After the action completes, all loaders revalidate automatically. This means your forms work without JavaScript and get enhanced interactivity with it.

Absolutely! Zod is the most popular validation library in the Remix ecosystem. Use z.object() to define schemas for form data, then call schema.safeParse() inside your action. On failure, return json({ errors: result.error.flatten().fieldErrors }, 400). On success, proceed with the mutation. For even tighter integration, libraries like Conform bridge Zod schemas directly to form components, providing type-safe validation with minimal boilerplate.

Remix v2 brought automatic streaming — return un-awaited promises in your loader and Remix streams them without needing defer(). Typed responses improved with better json() and redirect() type inference. The headers() function for per-route caching became more powerful. Vite became the official build tool, offering faster HMR. Also, SerializeFrom was introduced for cleaner loader type extraction in components.