Remix

Overview

Remix is a full-stack React framework built on web standards that uses nested routing, loader/action data patterns, and progressive enhancement to build fast, resilient applications. Forms work without JavaScript, nested routes load data in parallel, and error boundaries isolate failures to individual route segments.

Instructions

• When building routes, use file-based nested routing where each route module contains both the UI and data layer, with <Outlet /> for child routes and pathless layouts for shared UI without URL segments.
• When loading data, use loader functions that run server-side and return data with json(), defer(), or redirect(). Nested route loaders run in parallel to avoid client-server waterfalls.
• When handling mutations, use action functions triggered by <Form method="post">, return validation errors with appropriate HTTP status codes, and rely on automatic revalidation of all page loaders after actions.
• When enhancing UX, use useFetcher() for non-navigation mutations (like buttons, inline edits), useNavigation() for form submission state, and fetcher.formData for optimistic UI.
• When handling errors, add ErrorBoundary at every route level to prevent child errors from crashing the whole page, and use isRouteErrorResponse() to distinguish 404s from server errors.
• When managing auth, use createCookieSessionStorage() for encrypted sessions, redirect in loaders when unauthenticated, and leverage built-in CSRF protection.
• When deploying, choose the appropriate adapter (@remix-run/node, @remix-run/cloudflare, @remix-run/deno) and use Vite as the compiler.

Examples

Example 1: Build a CRUD app with progressive enhancement