DEV Community

Cover image for How to Accelerate Next.js App Router API Routes by 10x
Alok Deep
Alok Deep

Posted on

How to Accelerate Next.js App Router API Routes by 10x

#webdev #react #nextjs #javascript

Next.js App Router brought powerful server-side capabilities with React Server Components (RSC) and standard Route Handlers (app/api/route.ts).

However, in production deployments on Vercel or AWS Lambda, Next.js API Route Handlers frequently suffer from serverless execution overhead:

  • Cold starts adding 150ms–400ms to initial invocations.
  • Node.js runtime parsing and ORM database connection latency (100ms–300ms).
  • High Vercel Fast Data Transfer and Serverless Function Execution unit bills under heavy traffic.

Here is a practical guide on how to edge-cache Next.js Route Handlers, bypass Node.js runtime overhead on read requests, and achieve sub-15ms API response times.

1. The Bottleneck of Standard Route Handlers 

// app/api/products/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';

export async function GET() {
  // Executes on every single HTTP request:
  // 1. Cold Lambda / Container boot
  // 2. TCP connection to PostgreSQL
  // 3. SQL execution and serialization
  const products = await prisma.product.findMany({
    where: { active: true },
    include: { variants: true }
  });
  return NextResponse.json(products);
}
Enter fullscreen mode Exit fullscreen mode

Under 1,000 requests per second, Vercel spins up dozens of concurrent serverless functions, exhausting database connection limits and resulting in high monthly invocation bills.

2. The Fix: Edge Proxy Caching with SWR Headers

Configure your Route Handler to return standard RFC 5861 Cache-Control headers and route your API domain through an edge proxy (ApexCache):

// app/api/products/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';

export async function GET() {
  const products = await prisma.product.findMany({
    where: { active: true },
    include: { variants: true }
  });

  return NextResponse.json(products, {
    headers: {
      'Cache-Control': 'public, max-age=86400, stale-while-revalidate=3600',
      'X-ApexCache-Tags': 'products, catalog'
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

3. Instant Invalidation with Next.js Server Actions

When an admin updates a product or a new order completes, trigger a background tag purge directly inside your Next.js Server Action:

// app/actions/products.ts
'use server';

import { prisma } from '@/lib/prisma';
import { revalidateTag } from 'next/cache';

export async function updateProductStock(productId: string, newStock: number) {
  // 1. Update primary database
  await prisma.product.update({
    where: { id: productId },
    data: { stock: newStock }
  });

  // 2. Purge edge proxy cache globally (<10ms)
  await fetch('https://api.getapexcache.com/api/v1/cache/invalidate', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.APEXCACHE_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      tags: [`product:${productId}`, 'catalog']
    })
  });

  // 3. Optional: Revalidate Next.js internal cache
  revalidateTag('products');
}
Enter fullscreen mode Exit fullscreen mode

Production Latency & Cost Comparison

Metric Next.js Serverless Direct With Edge Proxy (ApexCache)
P50 API Latency 240ms 11ms
P99 Latency (Cold Starts) 1,450ms 15ms
Serverless Function Invocations 10,000,000 420,000 (95.8% reduction)
Database Connection Pressure High (Connection exhaustion) Minimal (Idle)
Monthly Vercel / Cloud Bills High Compute Charges Slashed by over 75%

Conclusion

Next.js Route Handlers are powerful for business logic, but forcing serverless functions to execute on every single read query degrades user latency and inflates cloud costs.

By adding SWR headers and placing an intelligent edge proxy in front of your Next.js application, you serve 95%+ of API requests in under 15ms globally.

Top comments (0)