Remix : React Router v7 et Remix 3 expliqués

Qu'est-ce que Remix ?

Remix est un framework web créé par les auteurs de React Router. Le nom recouvre aujourd'hui deux choses : Remix v1 et v2, des frameworks React dont les idées (routes imbriquées, loaders, actions) se poursuivent dans le mode framework de React Router v7, et Remix 3, un nouveau framework fondé sur les API web qui ne dépend pas de React. Vérifiez de quoi parle un projet avant de lire la documentation.

De Remix v2 à React Router v7

En mai 2024, l'équipe Remix a annoncé que ce qu'elle avait prévu comme Remix v3 sortirait sous le nom React Router v7. React Router v7 a trois modes : déclaratif (routage simple), données (loaders et actions) et framework, qui ajoute un plugin Vite, des modules de route typés, le code splitting et le choix entre SPA, SSR ou rendu statique. La migration officielle consiste à activer les future flags, remplacer les paquets @remix-run/* par react-router et modifier les imports. Si votre application est sur Remix v2, c'est la voie pour rester sur React. Voir React pour la bibliothèque et le rendu côté serveur pour le rôle du serveur.

Remix 3

Remix 3 est une refonte complète annoncée en mai 2025. Son site décrit un framework centré sur le runtime, bâti sur les API web et sans étape de build de l'application : les assets se compilent à la demande et l'état est du JavaScript ordinaire. L'annonce indique qu'il n'aura aucune dépendance critique, pas même React, et part d'un fork de Preact. Le paquet npm remix est en 3.0.0 depuis le 1er octobre 2026, mais le projet est jeune : consultez remix.run avant d'y miser une application de production.

Comment fonctionnent loaders et actions

Un module de route exporte un loader, qui charge des données côté serveur, et une action qui traite les envois de formulaires. Le composant reçoit les données chargées en prop : la page est rendue avec ses données au lieu de les demander après le chargement.

// app/routes/product.tsx (React Router framework mode)
import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  const product = await getProduct(params.pid);
  return { product };
}

export default function Product({ loaderData }: Route.ComponentProps) {
  return <h1>{loaderData.product.name}</h1>;
}

Comme le loader s'exécute avant le rendu, le serveur peut envoyer du HTML complet, que le navigateur hydrate ensuite. Les routes imbriquées chargent leurs données en parallèle plutôt qu'en cascade. Si vous connaissez Next.js, l'idée est proche mais l'API diffère. Le mode framework compile avec Vite.

Erreurs fréquentes

• Mélanger les générations. Les tutoriels Remix v2, le mode framework de React Router v7 et Remix 3 utilisent des paquets et des API différents. Suivez la documentation de la version de votre package.json.
• Croire que Remix 3 est React. Ce n'est pas le cas : les bibliothèques React ne s'y branchent pas telles quelles.
• Des loaders lents. Chaque requête attend ses loaders. Une requête lente à la base devient une page lente.
• Ignorer les future flags. Activez-les d'abord en v2, sinon le passage à React Router v7 n'est plus un simple renommage.

Tester et surveiller une application Remix ou React Router

Les routes rendues côté serveur demandent des contrôles qu'un test unitaire ne fournit pas. Testez le HTML produit par un loader avec un test d'API et protégez les parcours clés par des tests de régression. Avant la mise en ligne, faites un test de charge des routes riches en loaders avec LoadFocus load testing. En production, LoadFocus API monitoring vérifie les endpoints selon un calendrier et, sur les offres payantes, exécute aussi des checks navigateur Playwright pour la connexion ou le paiement. Pour le contexte, lisez surveillance synthétique et surveillance des utilisateurs réels.

Questions fréquentes

Remix est-il mort ?

Non, mais le nom a changé de sens. Les idées de Remix v2 vivent dans le mode framework de React Router v7, et le projet Remix développe désormais Remix 3, un nouveau framework.

React Router v7 est-il identique à Remix ?

Le mode framework de React Router v7 est le successeur de Remix v2. L'équipe a indiqué que ce qui était prévu comme Remix v3 sortirait sous le nom React Router v7.

Remix 3 utilise-t-il React ?

Non. L'annonce dit qu'il n'aura aucune dépendance critique, pas même React, et part d'un fork de Preact.

Comment migrer depuis Remix v2 ?

Mettez à jour vers la dernière v2, activez toutes les future flags, remplacez les paquets @remix-run/* par react-router et modifiez les imports. L'équipe React Router décrit cela comme généralement sans rupture.

Comment faire un test de charge d'une application Remix ?

Testez les routes aux loaders lents avec un trafic et des données réalistes, et surveillez temps de réponse et erreurs pendant la montée en charge.