Remixing Shopify's Admin: How We Made It 30% Faster and AI-Ready

Summary

Shopify rebuilt its Admin architecture to address inconsistent loading, duplicate requests, and fragmented route knowledge across a TypeScript codebase serving 67 million daily page views. With 101 teams contributing about 350 pull requests daily and the codebase containing 3,184,248 lines of TypeScript, the work adopted Remix with Vite and SPA mode. Typed route manifests, globbed by Vite, now define metadata and a single source of truth for 1,017 routes, while Remix loaders start data fetching before large component bundles finish loading. Idle-time prefetching warms the Apollo cache, and persistent IndexDB storage helps frequently visited pages load between sessions. The changes delivered a 30% improvement in perceived load times, standardized transitions, and created an architecture in which Remix actions and zod schemas let Sidekick discover forms, validate inputs, and submit tasks without loading unnecessary JavaScript.

Takeaways

1. 1

   Typed route manifests provide a build-time sitemap and a single source of truth for 1,017 Admin routes, including metadata such as descriptions, titles, and eligibility.

2. 2

   Remix loaders let the Product Index route fetch data from a 3.2kb loader while its 914kb component bundle loads in parallel; idle-time prefetching also warms the Apollo cache.

3. 3

   Remix actions and zod schemas allow Sidekick to identify routes, apply form schemas, validate fields, and submit POST requests without loading unnecessary JavaScript.