/web-meta-framework-remix

name: web-meta-framework-remix
description: File-based routing, loaders, actions, defer streaming, useFetcher, error boundaries, progressive enhancement

Remix / React Router v7 Framework Patterns

> **Quick Guide:** A route exports a `loader` for reads and an `action` for writes, both server-only, > so a component never fetches its own data. Forms submit without JavaScript and nested routes load > in parallel. The version fact that changes every example below: React Router v7 deprecates `json()` > and `defer()` — return raw objects and raw Promises, and use `data()` only when you need a custom > status or header.

**Detailed Resources:**

• [examples/core.md](examples/core.md) — the routes directory, file naming, a route end to end
• [examples/loaders.md](examples/loaders.md) — auth, pagination, search params, caching headers
• [examples/actions.md](examples/actions.md) — validation, accessible error display, delete with confirmation
• [examples/forms.md](examples/forms.md) — several forms in one route through the `intent` field
• [examples/nested-routes.md](examples/nested-routes.md) — layouts, index routes, pathless layouts
• [examples/error-handling.md](examples/error-handling.md) — error boundaries that branch on status
• [examples/optimistic.md](examples/optimistic.md) — optimistic UI and debounced search with `useFetcher`
• [examples/deferred.md](examples/deferred.md) — streaming with `Suspense` and `Await`
• [examples/resource-routes.md](examples/resource-routes.md) — JSON APIs, webhooks, file downloads
• [examples/meta.md](examples/meta.md) — titles, Open Graph, Twitter cards, canonical URLs
• [examples/react-router-v7.md](examples/react-router-v7.md) — `routes.ts`, generated types, `clientAction`, Single Fetch
• [reference.md](reference.md) — decision trees, route module exports, hooks, response utilities

---

Which path applies

• **On Remix v2** — the examples in this skill are written for it: `@remix-run/*` imports,

`json()`, `defer()` and `useLoaderData<typeof loader>()`.

• **On React Router v7 framework mode** — the concepts carry over unchanged and the API does not.

Read [examples/react-router-v7.md](examples/react-router-v7.md) first and translate as you go; the mapping table is below.

• **Building a page** — a `loader`, a default export, and an `ErrorBoundary`; follow

[examples/core.md](examples/core.md).

• **Building an endpoint** — omit the default export and the route becomes a resource route; follow

[examples/resource-routes.md](examples/resource-routes.md).

---

<migration_notice>

Remix v2 to React Router v7

Remix has merged into React Router v7. What was planned as Remix v3 is React Router v7's "framework mode".

| Remix v2 | React Router v7 | | --------------------------------- | ---------------------------------------------------- | | `json(data)` | Return the raw object | | `json(data, { status, headers })` | `data(data, { status, headers })` | | `defer({ key: promise })` | Return `{ key: promise }` — Single Fetch streams it | | `@remix-run/node` imports | `react-router` / `@react-router/node` | | `LoaderFunctionArgs` | `Route.LoaderArgs` (generated) | | `ActionFunctionArgs` | `Route.ActionArgs` (generated) | | `useLoaderData<typeof loader>()` | `loaderData` from `Route.ComponentProps` | | `RemixServer` | `ServerRouter` | | `RemixBrowser` | `HydratedRouter` (from `react-router/dom`) | | File-based routing by default | `routes.ts`, with `@react-router/fs-routes` optional |

Migration guide: [Upgrading from Remix](https://reactrouter.com/upgrading/remix)

</migration_notice>

---

<critical_requirements>

Before writing Remix code

**Export `loader` and `action` from route modules only.** The build wires them up by route, so the same export in a helper file is dead code that silently never runs.

**Throw a Response for an expected failure — 404, 403 — and let the `ErrorBoundary` render it.** Returning `null` instead pushes a null check onto every consumer and loses the status code.

**Await the data the page cannot render without, and return the rest as Promises.** Anything awaited delays the first byte; anything returned as a Promise streams in behind it.

**Name HTTP status codes as constants.** `HTTP_NOT_FOUND` says what the branch is for, where `404` has to be recognised.

</critical_requirements>

---

**Auto-detection:** loader, action, clientLoader, clientAction, useLoaderData, useActionData, useFetcher, useNavigation, useRouteError, isRouteErrorResponse, ErrorBoundary, HydrateFallback, shouldRevalidate, defer, Await, Outlet, NavLink, meta function, links function, @remix-run/node, @remix-run/react, react-router, ServerRouter, HydratedRouter, Route.LoaderArgs, Route.ComponentProps, routes.ts, Single Fetch, app/routes/

**Applies to:**

• File-based routing, including nested layouts, index routes and pathless layouts
• Server-side data loading in loaders, and mutations in actions
• Forms that work before hydration and better after it
• Streaming non-critical data behind `Suspense` and `Await`
• Non-navigating mutations, optimistic UI and debounced search with `useFetcher`
• Route-scoped error boundaries that branch on HTTP status
• SEO through `meta`, and stylesheets and preloads through `links`
• Resource routes: JSON APIs, webhooks, file downloads

**Handled elsewhere:**

• Persistence — a loader queries and an action writes; neither the client nor the query shape is

settled here

• Session and password handling — this skill's examples call an auth layer and read what it returns
• Schema validation — an action parses `FormData`; which library defines the schema is a separate

choice

• Sty