Remix v2: The React Current Centered on Web Standards

Remix is the React framework that’s existed in parallel conversations to Next.js for years. Different bet: web standards (Request, Response, FormData) over proprietary abstractions, progressive enhancement, and nested routes with declarative data loading. With Shopify’s 2022 Remix acquisition and v7 fusion with React Router, the project converges with the React Router base — reinforcing its position.

What Distinguishes Remix

Principles:

• Web standards first: native Request, Response, FormData.
• Progressive enhancement: works without JS, JS improves.
• Nested routes with declarative data loading.
• Form-based mutations: no explicit manual fetch in UI.
• Per-route error boundaries.

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 fetches server data. action handles mutations. Declarative UI.

v2 Novelties

Remix v2 (late 2023) brought:

• Stabilised future flags.
• Vite as default bundler (exit from legacy Webpack).
• Improved CSS bundling.
• More flexible error boundaries.
• Improved performance in parallel loaders.

No semantic breaking for well-built projects.

React Router 7: The Convergence

In 2024, Remix announced fusion with React Router. Result: React Router 7 (a.k.a. Remix Framework Mode) with:

• Remix API unified with React Router.
• “Framework” mode (like current Remix) and “library” mode (classic React Router).
• Smooth migration path between the two.

Practically: Remix continues to exist as a product but as a React Router profile.

Remix vs Next.js App Router

Next.js has RSC that Remix didn’t adopt (though React Router 7 could incorporate). Remix has simpler and more web-standard model.

When Remix Fits

Well:

• Form-heavy apps: CRUD, admin panels, dashboards.
• Progressive enhancement matters.
• Web standards are valued.
• Portable deployment: Cloudflare, Fly.io, Deno, Node — all supported.
• Small team: simpler API than App Router.

Less well:

• SSR with heavy RSC: Next.js better support.
• Huge ecosystem: Next.js has more plugins.
• Edge-first with heavy SSG: Astro or Next.js edge.

Deployment Targets

Remix is runtime-agnostic:

• Node.js: default.
• Cloudflare Workers / Pages: excellent.
• Vercel: supported.
• Netlify: supported.
• Deno Deploy: supported.
• Fly.io: ideal with their LiteFS.
• AWS Lambda: via adapter.

This flexibility is real strength — no Vercel lock-in.

Performance

Measured:

• TTFB: similar to Next.js App Router.
• Client bundle size: Remix historically smaller.
• Streaming: both do it.
• RSC benefits: only Next.js has them.

For typical CRUD apps, performance diff is marginal.

Migrating from Next.js Pages Router

If you have Next.js Pages Router evaluating alternatives:

• To Next.js App Router: natural path (same framework).
• To Remix: significant migration — different mental model.
• To Astro: if mostly static site.

Evaluate by need, not hype.

Exceptional Form Handling

Remix shines on form apps:

• <Form> component automatically handles submits.
• action receives standard FormData.
• useFetcher for navigation-less mutations.
• Natural optimistic UI with useNavigation.

Next.js Server Actions approach but Remix had it first and more polished.

Developer Experience

• Vite dev server: fast hot reload.
• Built-in TypeScript.
• Helpful errors: per-route boundaries with clear info.
• No magic: more explicit API than Next.js.

Ecosystem

• Shopify uses Remix for Hydrogen (storefronts).
• Epic Stack from Kent C. Dodds: full-stack template.
• Blues Stack, Indie Stack: starter templates.
• Active community but smaller than Next.js.

No Separate API Routes

Unlike Next.js with pages/api/ or app/api/, Remix has no separate API routes. Loaders and actions cover backend within same routing tree. Simplifies mental model.

For external API consumed by other clients, you can use Resource Routes (return direct Response).

Testing

Patterns:

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

Similar to Next.js but with fewer frictions due to more direct mental model.

Conclusion

Remix remains a legitimate, mature alternative in the React ecosystem. Its web-standards-and-progressive-enhancement philosophy makes it stand out for CRUD apps, form-heavy, and portable deployment. Convergence with React Router reinforces its position — doesn’t disappear, becomes more accessible. For new 2024 projects, choice between Remix and Next.js depends: RSC crucial? Next.js. Portability and simplicity? Remix. Both are production-ready. Decision is pragmatic, not ideological.

Follow us on jacar.es for more on React, Remix, and modern frameworks.