Scaling Next.js 15 App Router to Millions of Requests: Caching, Streaming & Edge Runtime Pitfalls

React Server Components (RSC) allow fetching data right where it is rendered. However, placing `await fetch(...)` deep inside nested component trees reintroduces sequential network waterfalls on the server. In our benchmarks, a page with 4 nested async components took 780ms on cold serverless runs. By structuring data fetching with parallel root `Promise.all` queries and passing promises into streaming `<Suspense>` slots, TTFB dropped by 74%.

Next.js 15 shifts fetch requests to un-cached by default (`cache: "no-store"` unless explicitly opted in). In high-throughput architectures, fetching raw databases on every request will saturate PostgreSQL connection pools. We implement an explicit two-tier caching strategy: micro-caching at Edge CDN with surrogate keys, coupled with background event workers issuing `revalidateTag(tag)` upon domain mutations.

Client Browser ────► Cloudflare / Edge CDN (Surrogate Cache)
                          │  (Cache Miss)
                          ▼
               Next.js 15 App Router (Streaming SSR)
                     ├── Suspense: Shell & Critical CSS (< 30ms)
                     ├── Suspense: Dynamic Feed (Streamed chunk)
                     └── Background Worker: revalidateTag()

Keep client bundles lean by never importing heavy server packages in files containing `"use client"`. Run `@next/bundle-analyzer` in your CI pipeline and treat client bundle increases > 15KB as a blocking pull request review.