Home
/
Blog
/
Blog article

7/10/2026

React Next.js Remix: The Real Difference in 2025

Blog featured image comparing React 19, Next.js 16, and React Router v7

I spent the last two weeks building the same app three times. Same spec, same data model, same UI. Once with React 19 on its own, once with Next.js 16, and once with React Router v7 (which is what Remix became).

Here is what I learned.

What We Are Actually Comparing

React 19.2 is the foundation. It gives you Server Components, Actions, the React Compiler, and View Transitions out of the box. You can run it standalone with Vite or any bundler.

Next.js 16 is the opinionated framework on top. It adds file-based routing, Turbopack, Cache Components with the "use cache" directive, and a proxy layer for middleware.

React Router v7 is what happened when Shopify merged Remix into React Router. It is Remix's data loading, form handling, and file conventions, now available in three modes: Framework (Remix style), Data (createBrowserRouter), and Declarative (traditional Routes).

The Part That Surprised Me

I expected Next.js and Remix to be more different than they are. Both give you file-based routing, both let you colocate data loading with UI, both support Server Components. But the differences show up in the details.

Here is how they actually diverge.

React 19 Standalone: The Vanilla Option

If you just use React 19 with Vite, you get Actions and Server Components without any framework overhead. React 19's useActionState hook handles form submissions cleanly:

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    });
  };

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </div>
  );
}

No Redux, no Zustand, no React Query for simple mutations. React 19 handles pending states and errors inside useTransition automatically.

The downside is you have to wire up routing, code splitting, and data fetching yourself. For a small app that is fine. For anything bigger, you reach for a framework.

Next.js 16: The Big Bet on Caching

Next.js 16 shipped Cache Components built on Partial Prerendering (PPR). The new "use cache" directive makes caching explicit instead of implicit:

next.config.ts
const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;
app/page.tsx
export default async function HomePage() {
  "use cache";
  const data = await fetch("https://api.example.com/posts");
  const posts = await data.json();
  return <PostList posts={posts} />;
}

Anything without "use cache" is dynamic by default. This fixes one of the biggest complaints about the App Router where caching was invisible and confusing.

Turbopack is now the default bundler in Next.js 16. They claim 5-10x faster Fast Refresh and 2-5x faster production builds. In practice, my project's dev server starts in under a second and hot reloads are instant. The build went from 12 seconds with webpack to around 4 seconds.

Next.js 16 also replaced middleware.ts with proxy.ts. It is the same concept but the naming makes the network boundary clearer:

proxy.ts
export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL("/home", request.url));
}

They also shipped Next.js Devtools MCP, a Model Context Protocol integration. You can plug AI agents into your dev server and they can read logs, stack traces, and routing config directly. I have not used this much but it is an interesting direction.

React Router v7: Remix, Reborn

Remix no longer exists as a separate project. Shopify merged it into React Router v7. The Remix API (loaders, actions, file routes) is now called Framework Mode inside React Router.

A Remix app today looks like this:

app/routes/orders.$id.tsx
import { json } from "react-router";
import { useLoaderData } from "react-router";

export async function loader({ params }) {
  const order = await getOrder(params.id);
  return json({ order });
}

export async function action({ request, params }) {
  const formData = await request.formData();
  await updateOrder(params.id, Object.fromEntries(formData));
  return json({ success: true });
}

export default function Order() {
  const { order } = useLoaderData();
  return <div>Order {order.id}</div>;
}

The big win with React Router v7 is the flexibility. You pick your mode:

  • Framework Mode gives you the full Remix experience with file routes, loaders, actions, and server rendering.
  • Data Mode lets you use loaders and actions with the createBrowserRouter API inside an existing app. No migration required.
  • Declarative Mode is the traditional Routes component API for simple apps.

React Router v7 also supports React Server Components experimentally. It is behind a experimental flag right now, so not production ready. But the direction is clear. They want to offer the same data loading patterns as Next.js without locking you into one paradigm.

Where Each One Shines

Next.js 16 is the best choice if you want the full package. Turbopack makes the dev experience genuinely fast. Cache Components fix the caching confusion. And you get the Vercel ecosystem if you want it.

React Router v7 is the best choice if you want control. You can start with Framework Mode and fall back to Data Mode in specific routes. You can deploy to any Node.js server. You do not need a specific platform.

React 19 standalone is the best choice for small apps, libraries, or when you want to own your toolchain. Pair it with Vite and TanStack Router if you want a lightweight setup.

What Did Not Work

Next.js 16's Cache Components are still settling. The "use cache" directive is new and the docs are thin. I spent an hour debugging why a page was not revalidating before I realized I needed to call revalidateTag() explicitly.

React Router v7 has three modes and that is three mental models. If you are new, you will wonder which one to pick. The docs explain the tradeoffs but it is still a decision you have to make upfront.

React 19 standalone is great until you need nested layouts, code splitting, or parallel data fetching. Then you are back to adding libraries.

The Bottom Line

Pick Next.js 16 if you want the most integrated experience and you are okay with the Vercel ecosystem. The Turbopack speed alone is worth it.

Pick React Router v7 / Framework Mode if you want Remix's data patterns without platform lock in. The ability to mix Framework and Data modes in one app is genuinely useful.

Pick React 19 standalone if you have a small app or you want to build your own stack. React 19's built-in Actions and Server Components go further than people realise.

I am using React Router v7 for my next project. The flexibility to deploy anywhere and mix modes won for me. But I will keep watching Next.js 16's Cache Components as they mature.