Remix: React Router v7 und Remix 3 erklärt

Was ist Remix?

Remix ist ein Web-Framework von den Machern von React Router. Der Name steht heute für zwei Dinge: Remix v1 und v2, React-Frameworks, deren Ideen (verschachtelte Routen, Loader, Actions) als Framework-Modus von React Router v7 weiterleben, und Remix 3, ein neues Framework auf Basis von Web-APIs, das nicht von React abhängt. Klären Sie zuerst, welches gemeint ist, bevor Sie Dokumentation lesen.

Von Remix v2 zu React Router v7

Im Mai 2024 kündigte das Remix-Team an, dass das ursprünglich als Remix v3 geplante Release als React Router v7 erscheint. React Router v7 hat drei Modi: deklarativ (reines Routing), Daten (Loader und Actions) und Framework, der ein Vite-Plugin, typsichere Route-Module, Code-Splitting und die Wahl zwischen SPA, SSR oder statischem Rendering ergänzt. Der offizielle Upgrade-Pfad: Future Flags aktivieren, die @remix-run/*-Pakete durch react-router ersetzen und die Imports anpassen. Wer auf Remix v2 ist, bleibt so bei React. Mehr zur Bibliothek unter React und zum Rendern auf dem Server unter serverseitiges Rendering.

Remix 3

Remix 3 ist ein komplett neuer Entwurf, angekündigt im Mai 2025. Die Website beschreibt ein Framework, das zuerst die Laufzeit denkt, auf Web-APIs aufbaut und keinen Build-Schritt für die Anwendung braucht: Assets werden bei Anfrage kompiliert, der Zustand ist normales JavaScript. Laut Ankündigung gibt es keine kritischen Abhängigkeiten, nicht einmal React; der Start war ein Fork von Preact. Das npm-Paket remix steht seit dem 1. Oktober 2026 auf 3.0.0, das Projekt ist aber jung. Prüfen Sie remix.run, bevor Sie eine Produktivanwendung darauf setzen.

So funktionieren Loader und Actions

Ein Route-Modul exportiert einen loader, der auf dem Server Daten lädt, und eine action für Formularübermittlungen. Die Komponente erhält die geladenen Daten als Prop, die Seite wird also mit Daten gerendert, statt sie erst nach dem Laden abzurufen.

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

Weil der Loader vor dem Rendern läuft, kann der Server fertiges HTML senden, das der Browser dann per Hydration aktiviert. Verschachtelte Routen laden ihre Daten parallel statt nacheinander. Wer Next.js kennt: Die Idee ist ähnlich, die API aber eine andere. Der Framework-Modus baut mit Vite.

Häufige Fehler

• Generationen vermischen. Remix-v2-Tutorials, der Framework-Modus von React Router v7 und Remix 3 nutzen unterschiedliche Pakete und APIs. Lesen Sie die Doku passend zur Version in Ihrer package.json.
• Remix 3 für React halten. Es ist kein React, React-Bibliotheken passen also nicht einfach hinein.
• Langsame Loader. Jede Anfrage wartet auf ihre Loader. Eine langsame Datenbankabfrage wird zur langsamen Seite.
• Future Flags überspringen. Aktivieren Sie sie zuerst in v2, sonst ist der Wechsel zu React Router v7 keine einfache Umbenennung mehr.

Remix- oder React-Router-Apps testen und überwachen

Serverseitig gerenderte Routen brauchen Prüfungen, die ein Unit-Test nicht liefert. Testen Sie das vom Loader erzeugte HTML mit einem API-Test und sichern Sie wichtige Abläufe mit Regressionstests ab. Vor dem Launch hilft ein Lasttest der loaderlastigen Routen mit LoadFocus Load Testing. Im Betrieb prüft LoadFocus API-Monitoring Endpunkte nach Zeitplan und führt in bezahlten Tarifen auch Playwright-Browser-Checks für Login oder Checkout aus. Mehr dazu im Beitrag Synthetic Monitoring vs. Real User Monitoring.

Häufige Fragen

Ist Remix tot?

Nein, aber der Name hat seine Bedeutung geändert. Die Ideen von Remix v2 leben im Framework-Modus von React Router v7 weiter, und das Remix-Projekt entwickelt jetzt Remix 3, ein neues Framework.

Ist React Router v7 dasselbe wie Remix?

Der Framework-Modus von React Router v7 ist der Nachfolger von Remix v2. Das Team sagte, das als Remix v3 Geplante erscheine als React Router v7.

Nutzt Remix 3 React?

Nein. Laut Ankündigung gibt es keine kritischen Abhängigkeiten, nicht einmal React, und der Start war ein Fork von Preact.

Wie migriere ich von Remix v2?

Auf das neueste v2-Release aktualisieren, alle Future Flags aktivieren, die @remix-run/*-Pakete durch react-router ersetzen und die Imports ändern. Das React-Router-Team nennt dies in der Regel nicht-brechend.

Wie führe ich einen Lasttest für eine Remix-App durch?

Testen Sie die Routen mit langsamen Loadern, mit realistischem Traffic und realistischen Daten, und beobachten Sie Antwortzeiten und Fehler beim Hochfahren der Last.