Fix TTFB in Next.js

// app/products/[slug]/page.tsx

// This makes the page STATIC with revalidation (ISR)
export const revalidate = 3600; // regenerate at most once per hour

// Without this export, dynamic data fetches make it dynamic (SSR)
// With it, Next.js pre-renders and caches at the edge

export async function generateStaticParams() {
  const products = await getTopProducts(1000); // pre-build top 1000
  return products.map(p => ({ slug: p.slug }));
}

export default async function ProductPage({ params }: Params) {
  const product = await getProduct(params.slug);
  return <ProductContent product={product} />;
}

// pages/products/[slug].tsx (Pages Router equivalent)
export async function getStaticProps({ params }) {
  const product = await getProduct(params.slug);
  return {
    props: { product },
    revalidate: 3600, // ISR: regenerate every hour
  };
}

// app/dashboard/page.tsx
// The page shell streams immediately; data sections stream as they're ready

import { Suspense } from 'react';

export default function DashboardPage() {
  return (
    <main>
      {/* This renders immediately -- shell TTFB is <50ms */}
      <DashboardHeader />
      <nav>...</nav>

      {/* These stream in when their async data is ready */}
      <Suspense fallback={<MetricsSkeleton />}>
        <DashboardMetrics /> {/* awaits DB query -- streams in */}
      </Suspense>

      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart /> {/* awaits API call -- streams independently */}
      </Suspense>
    </main>
  );
}

// Each async component fetches its own data -- parallel, not serial
async function DashboardMetrics() {
  const metrics = await db.metrics.findMany({ ... }); // 200ms
  return <MetricsGrid metrics={metrics} />;
}

import { unstable_cache } from 'next/cache';

// Cache this function's result for 1 hour, tagged for invalidation
const getCachedProduct = unstable_cache(
  async (slug: string) => {
    return db.products.findUnique({ where: { slug } });
  },
  ['product'],
  { revalidate: 3600, tags: ['products'] }
);

// Using fetch with caching
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: {
      revalidate: 3600,    // cache for 1 hour
      // OR:
      // cache: 'force-cache',  // cache indefinitely
      // cache: 'no-store',     // never cache (SSR behavior)
    },
  });
  return res.json();
}

// On-demand revalidation from a Server Action or Route Handler
import { revalidateTag } from 'next/cache';

async function updateProduct(id: string, data: ProductData) {
  await db.products.update({ where: { id }, data });
  revalidateTag('products'); // Purge all product cache entries
}

// app/api/user-data/route.ts
export const runtime = 'edge'; // Run on Vercel's edge network

export async function GET(request: Request) {
  const country = request.headers.get('x-vercel-ip-country') ?? 'US';
  const userId = getCookieUserId(request);

  // Edge functions: fast KV reads, not complex DB queries
  const userData = await kv.get(`user:${userId}`);

  return Response.json({ country, userData });
}

// middleware.ts -- Runs at edge, before any page loads
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.headers.get('x-vercel-ip-country');

  // Redirect to locale-specific page at edge -- no origin roundtrip
  if (country === 'DE' && !request.nextUrl.pathname.startsWith('/de')) {
    return NextResponse.redirect(new URL('/de' + request.nextUrl.pathname, request.url));
  }
}

// Bad: serial queries add up
async function getDashboardData() {
  const user = await db.users.findUnique({ where: { id } });     // 50ms
  const orders = await db.orders.findMany({ where: { userId: id } }); // 80ms
  const metrics = await db.metrics.findFirst({ where: { userId: id } }); // 60ms
  // Total: 190ms serial
}

// Good: parallel queries complete in max(50, 80, 60) = 80ms
async function getDashboardData() {
  const [user, orders, metrics] = await Promise.all([
    db.users.findUnique({ where: { id } }),
    db.orders.findMany({ where: { userId: id } }),
    db.metrics.findFirst({ where: { userId: id } }),
  ]);
  // Total: 80ms parallel
}