Remix: React Router v7 y Remix 3 explicados

¿Qué es Remix?

Remix es un framework web de los creadores de React Router. Hoy el nombre cubre dos cosas: Remix v1 y v2, frameworks de React cuyas ideas (rutas anidadas, loaders, actions) continúan en el modo framework de React Router v7, y Remix 3, un framework nuevo basado en APIs web que no depende de React. Comprueba a cuál se refiere un proyecto antes de leer la documentación.

De Remix v2 a React Router v7

En mayo de 2024 el equipo de Remix anunció que lo que habían planeado como Remix v3 saldría como React Router v7. React Router v7 tiene tres modos: declarativo (enrutado simple), de datos (loaders y actions) y framework, que añade un plugin de Vite, módulos de ruta con tipos seguros, code splitting y la opción de SPA, SSR o renderizado estático. La ruta oficial de actualización es activar los future flags, sustituir los paquetes @remix-run/* por react-router y cambiar los imports. Si tu app está en Remix v2, así sigues con React. Más sobre la librería en React y sobre lo que hace el servidor en renderizado en el servidor.

Remix 3

Remix 3 es un rediseño desde cero anunciado en mayo de 2025. Su sitio describe un framework centrado en el runtime, sobre APIs web y sin paso de compilación de la aplicación: los assets se compilan al pedirse y el estado es JavaScript normal. El anuncio dice que no tendrá dependencias críticas, ni siquiera React, y parte de un fork de Preact. El paquete remix de npm está en la 3.0.0 desde el 1 de octubre de 2026, pero el proyecto es joven: revisa remix.run antes de apostar una app de producción por él.

Cómo funcionan loaders y actions

Un módulo de ruta exporta un loader, que obtiene datos en el servidor, y una action que gestiona los envíos de formularios. El componente recibe los datos cargados como prop, así que la página se renderiza con datos en lugar de pedirlos después de cargar.

// 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>;
}

Como el loader se ejecuta antes de renderizar, el servidor puede enviar HTML terminado y el navegador lo hidrata después. Las rutas anidadas cargan sus datos en paralelo, no en cascada. Si conoces Next.js, la idea es parecida, pero la API es distinta. El modo framework compila con Vite.

Errores comunes

• Mezclar generaciones. Los tutoriales de Remix v2, el modo framework de React Router v7 y Remix 3 usan paquetes y APIs distintos. Usa la documentación de la versión de tu package.json.
• Creer que Remix 3 es React. No lo es, así que las librerías de React no encajan sin más.
• Loaders lentos. Cada petición espera a sus loaders. Una consulta lenta a la base de datos se convierte en una página lenta.
• Saltarse los future flags. Actívalos primero en v2, o el paso a React Router v7 deja de ser un simple cambio de nombre.

Cómo probar y monitorizar una app Remix o React Router

Las rutas renderizadas en el servidor necesitan comprobaciones que un test unitario no da. Prueba el HTML que genera un loader con una prueba de API y protege los flujos clave con pruebas de regresión. Antes del lanzamiento, haz una prueba de carga de las rutas con más carga de loaders con LoadFocus load testing. En producción, LoadFocus API monitoring comprueba endpoints de forma programada y, en los planes de pago, también ejecuta checks de navegador con Playwright para login o checkout. Para ver el panorama, lee monitorización sintética frente a monitorización de usuarios reales.

Preguntas frecuentes

¿Está muerto Remix?

No, pero el nombre cambió de significado. Las ideas de Remix v2 siguen en el modo framework de React Router v7 y el proyecto Remix desarrolla ahora Remix 3, un framework nuevo.

¿React Router v7 es lo mismo que Remix?

El modo framework de React Router v7 es el sucesor de Remix v2. El equipo dijo que lo planeado como Remix v3 se publicaría como React Router v7.

¿Remix 3 usa React?

No. El anuncio dice que no tendrá dependencias críticas, ni siquiera React, y parte de un fork de Preact.

¿Cómo migro desde Remix v2?

Actualiza a la última v2, activa todos los future flags, sustituye los paquetes @remix-run/* por react-router y cambia los imports. El equipo de React Router lo describe como un cambio por lo general sin rupturas.

¿Cómo hago una prueba de carga a una app Remix?

Prueba las rutas con loaders lentos, con tráfico y datos realistas, y vigila tiempos de respuesta y errores mientras sube la carga.