Optimizing Next.js for High Scale

The Challenge of Scale

When building applications that need to serve millions of users, standard server-side rendering (SSR) often becomes a bottleneck. In this log, I'll explore how we optimized a high-traffic e-commerce platform using Next.js 14 features.

1. Granular Caching with Data Cache

Moving away from generic page caching to granular data caching allowed us to keep 90% of our content static while keeping price and inventory data dynamic.

// implementing granular caching
async function getProductData(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { tags: ['products', `product-${id}`] }
  })
  return res.json()
}

2. Edge Middleware for Personalization

Instead of rendering personalized content on the server (slow), we utilized Edge Middleware to rewrite paths based on geolocation and user cookies without hitting the origin server for the initial logic.

Results

• TTFB reduced by 60%
• Server costs reduced by 40%
• Lighthouse scores improved to 99/100