SSR vs. ISR vs. Edge Streaming: Benchmarking 10M Monthly Landing Page Visits

// benchmark/lp-ttfb.js — k6 harness
import http from 'k6/http';
import { Trend, Rate } from 'k6/metrics';
import { check } from 'k6';

const ttfb = new Trend('ttfb_ms', true);
const ok = new Rate('http_ok');

const TARGETS = {
  'ssr-uncached': __ENV.SSR_URL,
  'ssr-microcache': __ENV.SSR_CACHED_URL,
  'isr': __ENV.ISR_URL,
  'edge-stream': __ENV.EDGE_URL,
};

// BUST=1 measures cold render cost; BUST=0 measures steady-state edge TTFB.
const bust = __ENV.BUST === '1' ? `?cb=${Math.random()}` : '';

export const options = {
  scenarios: {
    soak: {
      executor: 'constant-arrival-rate',
      rate: 200,
      timeUnit: '1s',
      duration: '10m',
      preAllocatedVUs: 400,
      maxVUs: 1500,
    },
  },
  thresholds: {
    'ttfb_ms{target:isr}': ['p(75)<250', 'p(95)<600'],
    http_ok: ['rate>0.999'],
  },
};

export default function () {
  for (const [name, base] of Object.entries(TARGETS)) {
    if (!base) continue;
    const res = http.get(`${base}/${bust}`, {
      tags: { target: name },
      headers: { 'accept-encoding': 'br, gzip' },
    });
    ttfb.add(res.timings.waiting, { target: name });
    ok.add(res.status === 200, { target: name });
    check(res, { 'status 200': (r) => r.status === 200 });
  }
}

// Yield to the main thread between expensive work items so input can be processed.
type SchedulerLike = { yield?: () => Promise<void> };

const sched = (globalThis as unknown as { scheduler?: SchedulerLike }).scheduler;

async function chunked<T>(items: readonly T[], fn: (item: T) => void): Promise<void> {
  for (const item of items) {
    fn(item);
    // scheduler.yield() keeps priority with the browser; fall back to a macrotask.
    await (sched?.yield?.() ?? new Promise<void>((resolve) => setTimeout(resolve, 0)));
  }
}

// Usage: hydration-safe, non-blocking initialization of below-fold widgets.
void chunked(document.querySelectorAll<HTMLElement>('[data-widget]'), (el) => {
  el.dataset.hydrated = 'true';
});

type Strategy = 'ssr-uncached' | 'ssr-microcache' | 'isr' | 'edge-stream-uncached';

interface TrafficModel {
  pageviewsPerMonth: number;
  htmlBytes: number;          // compressed HTML document
  originRenderMs: number;
  originMemoryGb: number;
  edgeRenderMs: number;
  edgeMemoryGb: number;
  microCacheTtlSeconds: number;
  isrRevalidateSeconds: number;
  onDemandRevalidationsPerMonth: number;
  egressPricePerGb: number;
  originGbSecondPrice: number;
  edgeGbSecondPrice: number;
}

interface CostBreakdown {
  originRenders: number;
  edgeRenders: number;
  originOffloadPct: number;
  originGbs: number;
  edgeGbs: number;
  originEgressGb: number;
  edgeEgressGb: number;
  monthlyUsd: number;
}

const SECONDS_PER_MONTH = 2_592_000;

const cachedRenders = (pv: number, ttl: number): number =>
  ttl > 0 ? Math.min(pv, Math.ceil(SECONDS_PER_MONTH / ttl)) : pv;

export function modelCost(strategy: Strategy, t: TrafficModel): CostBreakdown {
  if (t.pageviewsPerMonth <= 0) throw new RangeError('pageviewsPerMonth must be > 0');
  if (t.htmlBytes <= 0) throw new RangeError('htmlBytes must be > 0');

  let originRenders = 0;
  let edgeRenders = t.pageviewsPerMonth;

  switch (strategy) {
    case 'ssr-uncached':
      originRenders = t.pageviewsPerMonth;
      break;
    case 'ssr-microcache':
      originRenders = cachedRenders(t.pageviewsPerMonth, t.microCacheTtlSeconds);
      break;
    case 'isr':
      originRenders =
        cachedRenders(t.pageviewsPerMonth, t.isrRevalidateSeconds) +
        t.onDemandRevalidationsPerMonth;
      break;
    case 'edge-stream-uncached':
      originRenders = 0;
      break;
    default: {
      const exhaustive: never = strategy;
      throw new Error(`Unhandled strategy: ${String(exhaustive)}`);
    }
  }

  const edgeGbSeconds = edgeRenders * (t.pageviewsPerMonth > 0 ? 0 : 0);
  void edgeGbSeconds; // placeholder removed below

  const originGbs = originRenders * (t.originRenderMs / 1000) * t.originMemoryGb;
  const edgeGbs = edgeRenders * (t.edgeRenderMs / 1000) * t.edgeMemoryGb;
  const originEgressGb = (originRenders * t.htmlBytes) / 1e9;
  const edgeEgressGb = (t.pageviewsPerMonth * t.htmlBytes) / 1e9;

  const monthlyUsd =
    originGbs * t.originGbSecondPrice +
    edgeGbs * t.edgeGbSecondPrice +
    (originEgressGb + edgeEgressGb) * t.egressPricePerGb;

  return {
    originRenders,
    edgeRenders,
    originOffloadPct: 100 * (1 - originRenders / t.pageviewsPerMonth),
    originGbs,
    edgeGbs,
    originEgressGb,
    edgeEgressGb,
    monthlyUsd: Math.round(monthlyUsd * 100) / 100,
  };
}

// app/lp/[tenant]/page.tsx — ISR with tag-scoped invalidation (Next.js App Router)
import { notFound } from 'next/navigation';

export const revalidate = 600;
export const dynamicParams = false; // unknown tenants 404 at the edge, no origin hit

interface TenantConfig { slug: string; headline: string; heroSrc: string; }

export async function generateStaticParams(): Promise<Array<{ tenant: string }>> {
  const res = await fetch(`${process.env.CMS_URL}/tenants?active=1`);
  if (!res.ok) throw new Error(`Tenant list failed: ${res.status}`);
  const tenants = (await res.json()) as TenantConfig[];
  return tenants.map(({ slug }) => ({ tenant: slug }));
}

export default async function LandingPage({ params }: { params: Promise<{ tenant: string }> }) {
  const { tenant } = await params; // Next 15: params is a Promise

  const res = await fetch(`${process.env.CMS_URL}/tenants/${tenant}`, {
    next: { revalidate: 600, tags: [`tenant:${tenant}`] },
  });
  if (res.status === 404) notFound();
  if (!res.ok) throw new Error(`CMS error ${res.status} for ${tenant}`);

  const config = (await res.json()) as TenantConfig;

  return (
    <main>
      {/* LCP element is in the static shell — never inside Suspense. */}
      <img src={config.heroSrc} width={1200} height={630} fetchPriority="high" alt="" />
      <h1>{config.headline}</h1>
    </main>
  );
}

// app/api/revalidate/route.ts — on-demand invalidation, authenticated
import { NextResponse } from 'next/server';
import { revalidateTag } from 'next/cache';

export async function POST(req: Request): Promise<Response> {
  const secret = req.headers.get('x-revalidate-secret');
  if (!secret || secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ ok: false, error: 'unauthorized' }, { status: 401 });
  }
  let body: { tag?: string };
  try {
    body = (await req.json()) as { tag?: string };
  } catch {
    return NextResponse.json({ ok: false, error: 'invalid json' }, { status: 400 });
  }
  if (!body.tag) {
    return NextResponse.json({ ok: false, error: 'tag required' }, { status: 400 });
  }
  revalidateTag(body.tag);
  return NextResponse.json({ ok: true, revalidated: body.tag });
}

// app/lp/[tenant]/[slug]/page.tsx — edge runtime, streamed personalization hole
import { Suspense } from 'react';

export const runtime = 'edge';
export const dynamic = 'force-dynamic';

interface Proof { quote: string; }

async function PersonalizedProof({ slug }: { slug: string }): Promise<JSX.Element> {
  const proof = await fetch(`${process.env.API_URL}/proof/${slug}`, {
    signal: AbortSignal.timeout(250), // never let the hole dominate TTFB
    cache: 'no-store',
  })
    .then((r) => (r.ok ? (r.json() as Promise<Proof>) : Promise.reject(new Error(String(r.status)))))
    .catch(() => ({ quote: 'Trusted by 12,000 revenue teams.' }));

  return <blockquote>{proof.quote}</blockquote>;
}

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  return (
    <main>
      <section>
        <h1>Ship faster. Convert more.</h1>
        <img src="/hero.avif" width={1200} height={630} fetchPriority="high" alt="" />
      </section>
      <Suspense fallback={<p>Trusted by 12,000 revenue teams.</p>}>
        <PersonalizedProof slug={slug} />
      </Suspense>
    </main>
  );
}

// worker.ts — Cloudflare Worker: stable assignment + variant-aware cache key
interface Env { ORIGIN: string; }

const EXPERIMENTS = { hero_cta: ['control', 'short_form'] as const };

function bucket(id: string, salt: string, n: number): number {
  let h = 2166136261 >>> 0; // FNV-1a
  for (const ch of `${salt}:${id}`) {
    h ^= ch.charCodeAt(0);
    h = Math.imul(h, 16777619) >>> 0;
  }
  return h % n;
}

export default {
  async fetch(req: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL(req.url);
    if (!url.pathname.startsWith('/lp/')) {
      return new Response('Not found', { status: 404 });
    }

    const cookieHeader = req.headers.get('cookie') ?? '';
    const existing = /(?:^|; )vid=([^;]+)/.exec(cookieHeader)?.[1];
    const vid = existing ?? crypto.randomUUID();

    const variant = EXPERIMENTS.hero_cta[bucket(vid, 'hero_cta', EXPERIMENTS.hero_cta.length)];

    // Variant participates in the cache key: correctness over marginal hit-rate.
    const cacheUrl = new URL(url);
    cacheUrl.searchParams.set('_ab', `hero_cta:${variant}`);
    const cacheKey = new Request(cacheUrl.toString(), { method: 'GET' });

    const cache = caches.default;
    let res = await cache.match(cacheKey);

    if (!res) {
      const originReq = new Request(new URL(`/render${url.pathname}`, env.ORIGIN), req);
      originReq.headers.set('x-ab-hero-cta', variant);

      const originRes = await fetch(originReq);
      if (!originRes.ok) {
        return new Response('Upstream error', { status: 502 });
      }

      res = new Response(originRes.body, originRes);
      res.headers.set('Cache-Control', 'public, s-maxage=30, stale-while-revalidate=300');
      ctx.waitUntil(cache.put(cacheKey, res.clone()));
    }

    const out = new Response(res.body, res);
    out.headers.append(
      'Set-Cookie',
      `vid=${vid}; Path=/; Max-Age=31536000; SameSite=Lax; Secure`,
    );
    out.headers.set('x-ab-hero-cta', variant);
    return out;
  },
};