Hydrogen SDK on React Router 7 after migrating off Remix?
Mid-migration from Remix to React Router 7 following Shopify's framework move. Our loaders currently look like this:
export async function loader({context, params}: LoaderFunctionArgs) { const {product} = await context.storefront.query(PRODUCT_QUERY, { variables: {handle: params.handle}, });
return {product};}Croct is wired into the Remix version and resolves slot content in these loaders. One question: is the Hydrogen SDK Remix-only, or does it work the same on React Router 7? Don't want to finish the migration and find out the SDK is stuck on the old router
1 answer
Both routers are first-class. The Hydrogen SDK supports Hydrogen on React Router 7 or Remix, so your migration does not strand you. We did the same move last quarter and the Croct side was a non-event.
Content resolves in Hydrogen loaders in both cases, so pages still arrive personalized with no flash of default content after you switch. Your loader shape barely changes, and the slot fetching stays where it is.
If you are re-scaffolding anything as part of the migration, the CLI (npx croct@latest init) detects the setup and wires the provider and request context either way, so you can also just re-run it on the new router and diff what it produces against your current wiring.
Good to know, thanks. Will re-run the CLI on a branch and compare against our manual wiring before flipping the router over.