Remix v2: la corriente React centrada en web standards

Remix es el framework React que hace décadas que existe en conversaciones paralelas a Next.js. Apuesta diferente: web standards (Request, Response, FormData) sobre abstracciones propietarias, progressive enhancement, y nested routes con data loading declarativo. Con la adquisición de Remix por Shopify en 2022 y la fusión con React Router en v7, el proyecto converge con la base React Router — lo que refuerza su posición.

Qué distingue a Remix

Principios:

• Web standards first: Request, Response, FormData nativos.
• Progressive enhancement: funciona sin JS, JS mejora.
• Nested routes con data loading declarativo.
• Mutations via forms: no fetch manual explicit en UI.
• Error boundaries por ruta.

Loader / Action pattern

// app/routes/users.$id.tsx
import { useLoaderData } from "@remix-run/react";

export async function loader({ params }) {
  const user = await db.user.findById(params.id);
  return { user };
}

export async function action({ request, params }) {
  const form = await request.formData();
  await db.user.update(params.id, { name: form.get("name") });
  return redirect(`/users/${params.id}`);
}

export default function UserPage() {
  const { user } = useLoaderData();
  return (
    <>
      <h1>{user.name}</h1>
      <Form method="post">
        <input name="name" defaultValue={user.name} />
        <button>Save</button>
      </Form>
    </>
  );
}

loader fetch data en servidor. action maneja mutations. UI declarativa.

v2 novedades

Remix v2 (lanzada fines 2023) aportó:

• future flags estabilizados.
• Vite como bundler default (salida de Webpack legacy).
• CSS bundling mejorado.
• Error boundaries más flexibles.
• Performance mejorado en loaders paralelos.

No breaking semántico para proyectos bien construidos.

React Router 7: la convergencia

En 2024, Remix anunció fusión con React Router. Resultado: React Router 7 (alias Remix Framework Mode) con:

• API Remix unificada con React Router.
• Modo “framework” (como Remix actual) y modo “library” (React Router clásico).
• Path de migración smooth entre los dos.

Practicamente: Remix seguirá existiendo como producto pero como perfil de React Router.

Remix vs Next.js App Router

Next.js tiene RSC que Remix no adoptó (aunque React Router 7 podría incorporar). Remix tiene model más simple y web-standard.

Cuándo Remix encaja

Bien:

• Apps form-heavy: CRUD, admin panels, dashboards.
• Progressive enhancement importa.
• Web standards son valor.
• Deployment portable: Cloudflare, Fly.io, Deno, Node — todos soportados.
• Team pequeño: API más simple que App Router.

Menos bien:

• SSR con mucho RSC: Next.js mejor soporte.
• Ecosistema enorme: Next.js tiene más plugins.
• Edge-first con mucha SSG: Astro o Next.js edge.

Deployment targets

Remix es runtime-agnostic:

• Node.js: default.
• Cloudflare Workers / Pages: excelente.
• Vercel: soportado.
• Netlify: soportado.
• Deno Deploy: soportado.
• Fly.io: ideal con su LiteFS.
• AWS Lambda: via adapter.

Esta flexibilidad es fortaleza real — no Vercel lock-in.

Performance

Medido:

• TTFB: similar a Next.js App Router.
• Bundle size cliente: Remix históricamente menor.
• Streaming: ambos lo hacen.
• RSC benefits: solo Next.js los tiene.

Para apps típicas CRUD, performance diff es marginal.

Migración desde Next.js Pages Router

Si tienes Next.js Pages Router y evalúas alternativas:

• A Next.js App Router: path natural (mismo framework).
• A Remix: migration significativa — diferente mental model.
• A Astro: si site mostly static.

Evaluar según necesidades, no por hype.

Form handling excepcional

Remix brilla en apps con forms:

• <Form> component automatically handles submits.
• action receives FormData estándar.
• useFetcher para mutations sin navegación.
• Optimistic UI natural con useNavigation.

Next.js Server Actions se acercan pero Remix lo tenía primero y más pulido.

Developer experience

• Vite dev server: fast hot reload.
• TypeScript built-in.
• Errors helpful: boundaries por ruta con info clara.
• No magic: API más explícita que Next.js.

Ecosistema

• Shopify usa Remix para Hydrogen (storefronts).
• Epic Stack de Kent C. Dodds: full-stack template.
• Blues Stack, Indie Stack: starter templates.
• Community activa pero menor que Next.js.

Sin rutas API separadas

Unlike Next.js con pages/api/ o app/api/, Remix no tiene rutas API distintas. Loaders y actions cubren backend dentro del mismo routing tree. Simplifica mental model.

Para API externa consumida por otros clientes, puedes usar Resource Routes (devuelven Response directo).

Testing

Patterns:

• Vitest + @testing-library/react para unit.
• Playwright para e2e.
• Request mocking con MSW.

Similar a Next.js pero con menos fricciones por mental model más directo.

Conclusión

Remix sigue siendo alternativa legítima y madura en el ecosistema React. Su filosofía web-standards y progressive enhancement lo hace destacar para apps CRUD, form-heavy, y deployment portable. La convergencia con React Router refuerza su posición — no desaparece, sino que se vuelve más accesible. Para proyectos nuevos en 2024, elegir entre Remix y Next.js depende de: ¿RSC crucial? Next.js. ¿Portabilidad y simplicity? Remix. Ambos son production-ready. La decisión es pragmática, no ideológica.

Síguenos en jacar.es para más sobre React, Remix y frameworks modernos.