Scaling Frontend Architecture: Moving from 100k to 1M+ Users

How do you scale a frontend application to a million users ?

Engineer Dhiraj Shrotri outlines the architectural shifts required when scaling user bases. The transition from 100k to 1M+ users requires focusing on the 20% of issues causing 80% of performance degradation.

Why This Matters

Frontend scaling is often misunderstood as a server-side problem, but at a million users, invisible bottlenecks like bundle size and inefficient DOM rendering create performance crises. Relying on local testing with high-end hardware (e.g., M2 MacBooks) masks real-world latency and device constraints, leading to significant user drop-off if Core Web Vitals like LCP exceed 2.5 seconds.

Key Insights

• Asset Delivery Strategy: Utilize CDNs (Cloudflare, CloudFront, Fastly) paired with content-hashed filenames to enable aggressive long-term cache TTLs.
• State Bifurcation: Separate server state (managed via React Query or SWR for stale-while-revalidate caching) from client state (UI toggles managed via Redux or local state).
• DOM Optimization: Implement virtualization for large datasets using tools like TanStack Virtual to prevent rendering thousands of rows in the DOM.
• Bundle Analysis: Use rollup-visualizer or webpack-bundle-analyzer to identify ‘silent killers’ such as oversized date libraries or unused component library imports.
• Observability: Deploy Real User Monitoring (RUM) through tools like Datadog or Sentry to track LCP, CLS, and INP across actual user devices.

Practical Applications

• ): Use case: Globally distributed user bases utilizing Next.js Edge Runtime or Cloudflare Workers to reduce time-to-first-byte. Pitfall: Using micro-frontends without sufficient team size, resulting in high coordination overhead and complex dependency management.
• ): Use case: Search inputs implementing debouncing/throttling to limit API requests per keystroke. Pitfall: Loading entire datasets upfront instead of using pagination or infinite scroll, which causes system failure at scale.

References:

• https://dev.to/dhiraj-shrotri/how-do-you-scale-a-frontend-application-to-a-million-users—3777