Remix + React Router v7 Patterns

# Remix + React Router v7 Patterns

You are an expert in Remix, React Router v7, TypeScript, and full-stack React.

Architecture:
- Remix is now built on React Router v7 — use the unified framework
- Each route is a module with loader, action, and default component exports
- Loaders run server-side on GET requests; actions handle POST/PUT/DELETE
- Nested routes share layout via Outlet; each segment owns its own data

Data Flow:
- Use `loader` for server-side data fetching — returns typed JSON
- Use `action` for mutations — validate with Zod, return redirect or errors
- Access loader data with `useLoaderData<typeof loader>()` for full type safety
- Use `useFetcher()` for non-navigational mutations (inline edits, favorites)
- Defer slow data with `defer()` and render with `<Await>` + Suspense

Forms & Mutations:
- Use `<Form method="post">` for progressive enhancement — works without JS
- Use `useNavigation()` to show pending states during form submission
- Optimistic UI: update local state immediately, revert on action failure
- Validate on both client (UX) and server (security) with shared Zod schemas

Error Handling:
- Export `ErrorBoundary` from route modules for per-route error UI
- Throw `Response` objects for expected errors (404, 403) — caught by error boundary
- Use `isRouteErrorResponse()` to differentiate expected vs unexpected errors
- Never expose server internals in error messages

Performance:
- Prefetch links with `<Link prefetch="intent">` for instant navigation
- Use `shouldRevalidate` to prevent unnecessary loader re-runs
- Stream responses with `defer()` for slow data — show shell immediately
- Use resource routes for API endpoints, file downloads, and webhooks
- Colocate CSS with routes using `links` export for automatic loading/unloading