Running Next.js at Scale: Performance Patterns

Serving 1M+ Requests/Day with Sub-200ms Response Times

Next.js is excellent out of the box. But when you hit scale, defaults aren't enough.

1. The Rendering Strategy Matrix

Choose the right rendering strategy per page. Marketing pages use SSG + ISR because static is fastest. Product listings also use SSG + ISR to tolerate slight staleness. User dashboards need SSR with streaming for personalized, fresh data. Search results work best client-side due to too many variations to cache.

2. Edge Functions for Global Performance

Move logic closer to users with Edge Runtime. We saw P95 latency drop from 400ms to 80ms for Australian users after moving to edge.

3. Database Query Optimization

Most slow pages are database-bound. Use connection pooling and avoid N+1 queries with eager loading.

4. Image Optimization

Images are often heaviest. Use Next/Image with CDN, lazy loading for below-fold, and consider lower quality for thumbnails.

5. Caching Layers

Multiple layers compound: browser cache, CDN cache, application cache (Redis), and database cache.

6. Bundle Size Management

Analyze first with @next/bundle-analyzer. Replace Moment.js with date-fns, use lodash-es, import icons individually, and use dynamic imports.

Results

After implementing these patterns, P50 latency went from 180ms to 45ms, P95 latency dropped from 800ms to 180ms, and Lighthouse score improved from 72 to 96.