Fix TTFB on Vercel: Optimize Time to First Byte

// app/blog/[slug]/page.tsx
// ISR: cached at edge, revalidates every 60 seconds
export const revalidate = 60;

// Pre-generate top pages at build time (instant TTFB)
export async function generateStaticParams() {
  const posts = await getPopularPosts(200);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();
  return <Article post={post} />;
}

// TTFB results on Vercel:
// Pre-generated pages: ~15ms (served from edge cache)
// ISR cache hit: ~20ms (served from edge cache)
// ISR cache miss: ~200ms (SSR, then cached for future requests)
// On-demand revalidation: revalidatePath('/blog/my-post')

// app/api/revalidate/route.ts
// Trigger revalidation from CMS webhook
import { revalidatePath } from 'next/cache';

export async function POST(request: Request) {
  const { secret, path } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }

  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

// CMS publishes new content -> webhook triggers revalidation
// -> Vercel regenerates the page -> Next visitor gets fresh content
// Total TTFB impact: 0ms (revalidation happens in background)

// app/api/search/route.ts
// Runs on Vercel's edge network (~30ms TTFB globally)
export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const q = searchParams.get('q') || '';

  // Use edge-compatible data sources
  const results = await fetch(
    \`\${process.env.API_URL}/search?q=\${encodeURIComponent(q)}\`,
    { next: { revalidate: 300 } }  // Cache for 5 min
  );

  return Response.json(await results.json(), {
    headers: {
      'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
    },
  });
}

// TTFB comparison (user in London):
// Serverless (us-east-1): ~380ms
// Edge Runtime: ~35ms

// middleware.ts
// Runs on every request at the edge before reaching your app
import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();

  // Add cache headers for public HTML pages
  const path = request.nextUrl.pathname;
  if (!path.startsWith('/api/') && !path.startsWith('/dashboard/')) {
    response.headers.set(
      'Cache-Control',
      'public, s-maxage=3600, stale-while-revalidate=86400'
    );
  }

  return response;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

{
  "regions": ["iad1"],
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 10
    }
  }
}

// To change the default function region:
// Vercel Dashboard -> Project Settings -> Functions
// -> Serverless Function Region
//
// Choose the region closest to your database:
// iad1 (Washington D.C.) -- for US East databases
// sfo1 (San Francisco) -- for US West databases
// cdg1 (Paris) -- for EU databases
// hnd1 (Tokyo) -- for Asia-Pacific databases
//
// For global traffic with Edge Runtime:
// No region config needed (runs everywhere automatically)

// app/products/[id]/page.tsx
// Fetch all data in parallel to minimize function execution time

export default async function ProductPage({ params }) {
  // BAD: Sequential fetching (each waits for the previous)
  // const product = await getProduct(params.id);     // 100ms
  // const reviews = await getReviews(params.id);     // 150ms
  // const related = await getRelatedProducts(params.id); // 80ms
  // Total: 330ms

  // GOOD: Parallel fetching (all run simultaneously)
  const [product, reviews, related] = await Promise.all([
    getProduct(params.id),        // 100ms
    getReviews(params.id),        // 150ms
    getRelatedProducts(params.id) // 80ms
  ]);
  // Total: 150ms (the slowest single fetch)

  return <ProductView product={product} reviews={reviews} related={related} />;
}

{
  "crons": [
    {
      "path": "/api/warm",
      "schedule": "*/5 * * * *"
    }
  ]
}

// app/api/warm/route.ts
// Lightweight endpoint that keeps the function warm
export async function GET() {
  // Optionally warm database connection pool
  await db.$connect();
  return Response.json({ status: 'warm', timestamp: Date.now() });
}

// This pings your function every 5 minutes
// preventing cold starts for most traffic patterns

// lib/db.ts
// Use connection pooling to avoid reconnection overhead on every invocation
import { PrismaClient } from '@prisma/client';

// In serverless: reuse the client across warm invocations
const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

export const db = globalForPrisma.prisma || new PrismaClient({
  datasources: {
    db: {
      // Use Prisma Accelerate or PgBouncer for connection pooling
      url: process.env.DATABASE_URL,  // Should point to pooler
    },
  },
});

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;

// Without pooling: each cold start opens a new DB connection (~100ms)
// With pooling: connections are reused across invocations (~5ms)

// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  // Enable standalone output for smaller deployments
  output: 'standalone',

  // Reduce bundle size with external packages
  experimental: {
    serverComponentsExternalPackages: [
      'sharp',      // Image processing (large binary)
      '@prisma/client',  // DB client
    ],
  },

  // Optimize images through Vercel's image service
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200],
    imageSizes: [16, 32, 48, 64, 96, 128, 256],
  },

  // Headers for static assets
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on',
          },
        ],
      },
    ];
  },
};

// Check function sizes: vercel inspect <deployment-url>
// Target: < 1MB per function for fast cold starts

# After deploying, inspect function sizes
npx vercel inspect https://your-app.vercel.app

# Output shows each function's size:
# /api/search -- 245KB (good)
# /api/export -- 4.2MB (too large, will cold start slowly)
# /blog/[slug] -- 890KB (acceptable)

# Reduce large functions by:
# 1. Moving heavy deps to dynamic imports
# 2. Using edge runtime where possible (smaller V8 bundles)
# 3. Splitting monolithic API routes into focused endpoints