remixjs-best-practices_skill

Overview

This skill describes modern Remix best practices for 2025–2026, with a focus on the React Router v7 migration, server-first data patterns, and robust error handling. It explains how to structure loaders, actions, forms, and error boundaries to build fast, resilient applications that progressively enhance. The guidance is practical and forward-looking to make apps ready for Remix v3 and React Router v7.

How this skill works

The guidance inspects common application areas: data loading (loaders/defer), mutations (actions/HTML forms), error handling (granular boundaries and expected vs. unexpected errors), and performance headers (Cache-Control). It recommends adopting server-first patterns where loaders and actions run only on the server, enabling predictable typed data flows and minimal client-side fetching. Migration tips include enabling future flags and running the official codemod to move from Remix v2 to React Router v7.

When to use it

• Starting a new Remix project in 2025+ — start with React Router v7.
• Migrating an existing Remix v2 app to future-proof for Remix v3.
• Building features that must work without JavaScript (progressive enhancement).
• Handling form submissions, validation, and preserving user input on errors.
• Serving public, cacheable resources or streaming slow backend data.

Best practices

• Prefer server-side loaders and actions; avoid useEffect data fetching unless necessary.
• Use HTML <form> (or Remix <Form>) for all mutations to handle race conditions and work without JS.
• Enable v7 future flags in remix.config.js or vite.config.ts early to smooth migration.
• Add nested ErrorBoundaries to contain failures instead of a single root boundary.
• Return action validation errors (json with status) instead of throwing to preserve form state.
• Use Cache-Control and defer for streaming slow data to optimize TTFB and interactivity.

Example use cases

• Dashboard with typed loader data and server-side auth checks, rendering user info from useLoaderData.
• Profile update via a <Form> that returns validation errors from the action and re-displays inputs.
• Migrating a v2 app: run the codemod and flip future flags, then update route boundaries for v7.
• Rendering critical content immediately and deferring slow third-party requests with defer and Suspense.
• Serving public product lists with Cache-Control headers from loaders for CDN caching.