Frontend Scalability Patterns

Frontend scalability has two dimensions: team scalability (enabling multiple teams to work on the same application without stepping on each other) and performance scalability (keeping the application fast as features and users grow). Both require deliberate architectural patterns.

Micro-Frontends

Micro-frontends extend the microservices concept to the frontend: independently developed, tested, and deployed UI sections that compose into a single application.

Module Federation (Webpack 5 / Rspack)

Module Federation allows separate builds to share code at runtime. Each micro-frontend is built independently and exposes specific modules (components, utilities). The host application imports them dynamically.

// Remote app (team-checkout) exposes its components
new ModuleFederationPlugin({
  name: 'checkout',
  filename: 'remoteEntry.js',
  exposes: {
    './CheckoutFlow': './src/CheckoutFlow',
    './CartSummary': './src/CartSummary'
  },
  shared: ['react', 'react-dom']
});
 
// Host app consumes remote components
const CheckoutFlow = React.lazy(() => import('checkout/CheckoutFlow'));

Pros: True independent deployment, shared dependencies (single React instance), no page reloads, fine-grained code sharing. Cons: Runtime dependency resolution, version conflicts, complex debugging.

Single-SPA

Single-SPA is a meta-framework that orchestrates multiple frontend frameworks (React, Vue, Angular) as "parcels" within a single page. Each parcel has its own lifecycle (bootstrap, mount, unmount).

Pros: Framework-agnostic, gradual migration between frameworks. Cons: Bundle duplication (each framework loaded), more complex than Module Federation for React-only apps.

Iframe-Based

Iframes provide the strongest isolation — each micro-frontend runs in a separate browsing context with its own DOM, styles, and JavaScript scope.

Pros: Complete isolation (no style/JS conflicts), independent tech stacks, crash isolation. Cons: Performance overhead, no shared state, accessibility challenges (focus management across iframes), URL/routing coordination.

Code Splitting

Code splitting breaks a monolithic JavaScript bundle into smaller chunks loaded on demand:

• Route-based splitting: Each route loads its own chunk. React.lazy(() => import('./Dashboard')) loads the dashboard code only when navigating to /dashboard.
• Component-based splitting: Heavy components (charts, rich text editors, map widgets) are split into separate chunks loaded when needed.
• Library splitting: Large third-party libraries (moment.js, lodash, D3) are moved to separate chunks or replaced with lighter alternatives.

Next.js provides automatic route-based code splitting — each page is a separate chunk by default.

Dynamic Imports

// Route-level splitting
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
 
// Component-level splitting
const HeavyChart = React.lazy(() => import('./components/HeavyChart'));
 
// Conditional loading
if (user.isPremium) {
  const PremiumFeatures = await import('./PremiumFeatures');
}

Prefetching and Preloading

• Prefetch: Load chunks that will likely be needed soon (on hover over a link, on idle)
• Preload: Load chunks that are needed immediately but shouldn't block rendering
• Next.js prefetches linked routes automatically when <Link> components enter the viewport

Performance Budgets

Performance budgets set hard limits on metrics that trigger alerts or block deployments:

• Bundle size budget: Main bundle < 200KB gzipped; total JS < 400KB gzipped
• Loading budget: LCP < 2.5s, FID < 100ms, CLS < 0.1 (Core Web Vitals)
• Per-route budgets: Each route's JS < 100KB, CSS < 50KB

Tools: Lighthouse CI, bundlesize, webpack-bundle-analyzer, Import Cost (VS Code extension). Integrate into CI/CD to fail builds that exceed budgets.

Monorepo Strategies

Large frontend organizations use monorepos to share code while maintaining team autonomy:

• Turborepo: Task runner with caching. Understands dependency graph, only rebuilds what changed. Remote caching shares build artifacts across developers.
• Nx: Full monorepo framework with code generation, dependency graph visualization, affected commands (only test/build what's impacted by changes).
• pnpm workspaces: Package manager-level workspace support. Fast installs with content-addressable storage.

Monorepo structure for micro-frontends:

packages/
  design-system/       # Shared component library
  shared-utils/        # Common utilities
  shared-types/        # TypeScript types
apps/
  shell/               # Host application
  checkout/            # Team Checkout's micro-frontend
  search/              # Team Search's micro-frontend
  user-profile/        # Team Profile's micro-frontend

Feature Flags

Feature flags decouple deployment from release — code is deployed but hidden behind a flag that can be toggled without redeployment:

• Release flags: Hide incomplete features in production. Enable for internal testing, then roll out gradually.
• Experiment flags: A/B test different implementations. Route 50% of users to variant A, 50% to variant B.
• Ops flags: Kill switches for expensive features during incidents.
• Permission flags: Enable features for specific user segments (premium, beta testers, specific regions).

Implementation: flags are fetched at app startup (or via SSR) and stored in context. Components conditionally render based on flag values.

Tools: LaunchDarkly, Statsig, Flagsmith, Unleash, or custom flag services.

A/B Testing Architecture

A/B testing at scale requires:

• Assignment: Deterministic user-to-variant mapping (hash user ID + experiment ID) for consistent experience
• Bucketing: Gradually increase traffic to new variants (1% → 10% → 50% → 100%)
• Metrics collection: Track conversion events per variant
• Statistical analysis: Determine significance before declaring a winner
• Server-side assignment preferred: Avoid layout shift from client-side assignment (user sees variant A, then switches to B)

CDN and Edge Strategies

• Static assets on CDN: JavaScript, CSS, images, fonts served from edge locations. Immutable filenames (content hashes) enable aggressive caching.
• Edge SSR: Run server rendering at edge locations (Cloudflare Workers, Vercel Edge) for low-latency personalized content.
• Edge middleware: Authentication checks, A/B test assignment, redirects, geolocation at the edge before hitting the origin.
• Cache hierarchy: Browser cache → CDN edge → CDN origin → application server. Each layer reduces load on the next.

Key Interview Distinction

Frontend scalability addresses two problems: team scalability (micro-frontends, monorepos, feature flags enable independent team velocity) and performance scalability (code splitting, performance budgets, CDN strategies keep the app fast as it grows). Module Federation is the leading micro-frontend pattern for React. Performance budgets enforce accountability. Feature flags decouple deployment from release. CDN and edge strategies reduce latency globally. The best architecture balances team autonomy with shared standards.