Rebuilding Shopify Admin on Remix
Shopify has overhauled admin.shopify.com, the system behind 67 million daily page views, with an eye toward both performance and AI readiness. The migration to Remix cut perceived page load times by 30% and laid groundwork the company says will make its Sidekick assistant and future AI features easier to build.
The effort was driven as much by organizational pressure as by user-facing metrics. With 101 teams shipping roughly 350 pull requests daily to a single TypeScript codebase, the challenges were architectural: inconsistent loading patterns across routes, duplicate data requests, and separate systems maintaining their own route inventories.
From Runtime File Tree to Static Manifests
Admin's routing architecture began transitioning to React Router data mode in late 2022. The initial approach — a large getRoutes.tsx file returning a function that defined all routes and children — quickly became a merge-conflict magnet as the file ballooned into numerous sub-files. Being a runtime function, it offered no static model of the Admin's routes.
That meant systems like Search and Sidekick maintained their own YAML-based route lists, which drifted out of sync whenever the main codebase changed routes. The need for a single, statically knowable source of truth was clear.
The solution was route manifests: TypeScript files living alongside component code that contain all metadata for each route. Vite globs these files automatically during build and development, assembling the route configuration for Remix. Because the manifests are typed and linted, teams can be guided toward consistent patterns and best practices.
The result is a definitive inventory: 1,017 routes, each with clear ownership and purpose, available to any system that needs it.
Loaders Eliminate the Waterfall
Admin pages previously loaded via a fetch-then-render waterfall: the browser fetched component code, ran it, and only then started fetching data. Remix loaders reverse that sequence. For the Product Index route, the browser now fetches a tiny 3.2 KB loader file first, data fetching begins immediately, and the component code — 914 KB for the same route — loads in parallel.
The shift also standardized the user experience. Rather than a patchwork of spinners, skeletons, and occasionally nothing at all, all routes now share a global loading indicator and smooth view transitions that maintain context between pages. Developers no longer build custom loading states for each feature.
Prefetching in Idle Time
Loaders unlocked a prefetching strategy that wasn't feasible before. Each route's loader is small and specifies exactly what data it needs, so the system can warm the cache without pulling down full component bundles.
After a page load, the browser identifies commonly visited links on the current page during idle time, prefetches their loaders, and executes them to warm the Apollo cache. When the merchant clicks through, no API call is needed. Combined with Apollo's persistent storage via IndexedDB, frequently visited pages can render instantly even across sessions.
Shopify attributes the 30% perceived-load-time improvement to these optimizations working together.
AI-Ready Actions
The new architecture also prepares Admin for deeper AI integration. Teams are adding Remix actions and zod schemas to routes, giving Sidekick structured knowledge of what data each page needs, what forms exist, and what validations apply.
A merchant request like "create a new product" can therefore be handled through standard I/O: Sidekick determines the route, prefetches data through the loader, applies the form schema, fills fields, and submits via POST to the action — all without loading unnecessary JavaScript.
For merchants, the results are front-end only: faster page loads, a more consistent and responsive Admin, and increasingly capable Sidekick assistance, with no changes required to how they work.
The foundation is in place for further AI integrations, faster development, and additional performance work across the Admin. In a system with hundreds of thousands of files and millions of lines of TypeScript, the win came from adopting web standards and making route data statically accessible — a simpler architecture that serves both developers and merchants.
