Remix → React Router 7 Survival Guide for Hydrogen Developers

By nuwudorder | September 23, 2025

Introduction

Shopify Hydrogen started with Remix. In 2024, it migrated to React Router 7 (RR7). That transition left many developers confused about loaders, actions, and caching.

This guide is your survival manual for migrating Hydrogen apps from Remix to RR7 without breaking performance or quotas.

Why the Shift?

  • Remix → React Router 7: Shopify wanted tighter control, smaller bundles, and a simplified runtime.
  • Impact on Devs: familiar APIs (loaders/actions) stayed, but syntax and caching rules changed.
  • Opportunity: RR7 opens the door to more composable data loading and performance profiling.

Key Differences: Remix vs RR7

Loaders & Actions

  • Remix: export const loader = …
  • RR7: loaders/actions defined at route-level, but simpler.
  • Benefit: less boilerplate, easier tree-shaking.

Caching

  • Remix: manual cache headers.
  • RR7: built-in cache primitives + Hydrogen profiler integration.

Routing

  • Remix: nested route conventions.
  • RR7: flatter, more explicit route configs.

Migration Checklist

  1. Rewrite Loaders/Actions
    • Update to RR7 syntax.
    • Ensure data loaders batch Shopify GraphQL queries.
  2. Profile with Hydrogen Profiler
    • Measure TTFB + subrequests.
    • Identify bottlenecks early.
  3. Cache Smart
    • Use RR7 cache primitives for PDP/PLP queries.
    • Don’t cache user-specific data (cart, auth).
  4. Watch Oxygen Quotas
    • Bundle size (<5MB).
    • Memory (~128MB).
    • Subrequests (<40).

Case Example: Agency Migration

  • Client had Hydrogen store built on Remix.
  • Migration took 6 weeks.
  • Optimized loaders/actions for RR7 → reduced TTFB by 40%.
  • Bundle size dropped from 5.6MB → 3.8MB.
  • Oxygen quota issues disappeared.

Guardrails

  • ✅ Rewrite loaders early, don’t patch Remix patterns.
  • ✅ Always profile subrequests post-migration.
  • ✅ Train devs on RR7 cache primitives.
  • ✅ Document Oxygen quota guardrails.

Conclusion

Migrating from Remix to React Router 7 is a chance to slim down, speed up, and future-proof Hydrogen stores. With updated loaders, caching, and quotas in mind, the move strengthens performance and developer velocity.

Remix was the bridge. RR7 is the destination.

Posted in Blog

About nuwudorder