Comparing the Delivery Performance of a Next.js (SSR) Page with Many Assets Using Lambda Web Functions and Lambda Web Adapter

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
};

export default nextConfig;

import Widgets from './Widgets';

// Render on the server for every request (SSR)
export const dynamic = 'force-dynamic';

export default function Home() {
  return (
    <main>
      <h1>Hello, world</h1>
      <p>Rendered on the server at {new Date().toISOString()}</p>
      <Widgets />
    </main>
  );
}

'use client';
import dynamic from 'next/dynamic';

const W001 = dynamic(() => import('./widgets/w001'));
const W002 = dynamic(() => import('./widgets/w002'));
const W150 = dynamic(() => import('./widgets/w150'));

export default function Widgets() {
  return (
    <ul>
      <W001 />
      <W002 />
      <W150 />
    </ul>
  );
}

'use client';
// Test widget 001. To split the chunks, give each its own data (about 8 KB).
const DATA = '...';
export default function W001() {
  return <li>widget 001: {DATA.length} bytes of embedded data</li>;
}

// Fixed short JSON for comparison.
export const dynamic = 'force-dynamic';

export function GET() {
  return Response.json({ ok: true });
}

// Entry point for Lambda Web Functions.
// Next.js standalone reads HOSTNAME / PORT, so set them from
// AWS_LAMBDA_HTTP_ENDPOINT ("host:port") passed by Lambda, and then start.
const [host, port] = (process.env.AWS_LAMBDA_HTTP_ENDPOINT || '0.0.0.0:3000').split(':');
process.env.HOSTNAME = host;
process.env.PORT = port;

require('./server.js');

#!/usr/bin/env bash
# Assemble the deployment package artifacts/pkg (run after the build)
set -euo pipefail
cd "$(dirname "$0")/app"
rm -rf ../pkg
cp -a .next/standalone ../pkg
mkdir -p ../pkg/.next
cp -a .next/static ../pkg/.next/static
[ -d public ] && cp -a public ../pkg/public
cp index.js ../pkg/index.js

# Lambda Web Adapter (LWA) version. Uses the same build artifact pkg/ as the Web Functions version as is.
FROM public.ecr.aws/docker/library/node:24-bookworm-slim

COPY --from=public.ecr.aws/awsguru/aws-lambda-adapter:1.1.0 /lambda-adapter /opt/extensions/lambda-adapter

ENV NODE_ENV=production \
    NEXT_TELEMETRY_DISABLED=1 \
    HOSTNAME=0.0.0.0 \
    PORT=8080 \
    AWS_LWA_PORT=8080 \
    AWS_LWA_READINESS_CHECK_PATH=/api/ping \
    AWS_LWA_READINESS_CHECK_HEALTHY_STATUS=200

WORKDIR /var/task
COPY pkg/ ./
CMD ["node", "server.js"]

# Container for headless Chrome measurement. Holds no credentials at all (only opens a public URL).
FROM node:24-bookworm-slim
RUN apt-get update \
 && apt-get install -y --no-install-recommends chromium fonts-noto-cjk ca-certificates \
 && rm -rf /var/lib/apt/lists/*
WORKDIR /work
COPY package.json package-lock.json* ./
RUN npm install --omit=dev
COPY measure.mjs ./
ENV CHROME_BIN=/usr/bin/chromium
ENTRYPOINT ["node", "measure.mjs"]

{
  "name": "chrome-measure",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "puppeteer-core": "25.13.0"
  }
}

// ヘッドレス Chrome で URL を開き、ネットワークイベントをすべて JSON で出力する。
// 使い方: node measure.mjs --url URL --label NAME --sessions N --views K --out DIR [--api-path /api/ping --api-count M]
// 1 セッション = 1 つの Chrome プロセス。--sessions 個のプロセスを同時に起動し、各セッションが --views 回ページを開く。
import puppeteer from 'puppeteer-core';
import fs from 'node:fs';
import os from 'node:os';
import path from 'node:path';

const args = Object.fromEntries(
  process.argv.slice(2).reduce((acc, cur, i, arr) => {
    if (cur.startsWith('--')) acc.push([cur.slice(2), arr[i + 1]]);
    return acc;
  }, [])
);
const url = args.url;
const label = args.label ?? 'run';
const sessions = Number(args.sessions ?? 1);
const views = Number(args.views ?? 1);
const outDir = args.out ?? '/out';
const apiPath = args['api-path'];
const apiCount = Number(args['api-count'] ?? 0);
const settleMs = Number(args['settle-ms'] ?? 1000);
fs.mkdirSync(outDir, { recursive: true });

const cpuSnap = () => os.cpus().map((c) => ({ ...c.times }));
const cpuBusy = (a, b) => {
  let busy = 0, total = 0;
  a.forEach((x, i) => {
    const y = b[i];
    const idle = y.idle - x.idle;
    const sum = Object.keys(y).reduce((s, k) => s + (y[k] - x[k]), 0);
    busy += sum - idle; total += sum;
  });
  return total ? busy / total : 0;
};

async function runSession(sid) {
  const prefix = `${label}-s${sid}`;
  const procLog = fs.createWriteStream(path.join(outDir, `${prefix}.chrome-stdio.log`));
  const sessionStartWall = Date.now();
  const sessionStartHr = performance.now();
  const browser = await puppeteer.launch({
    executablePath: process.env.CHROME_BIN,
    headless: true,
    dumpio: false,
    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage', '--no-first-run', '--disable-crash-reporter'],
  });
  const proc = browser.process();
  proc.stdout?.on('data', (d) => procLog.write(`[stdout] ${d}`));
  proc.stderr?.on('data', (d) => procLog.write(`[stderr] ${d}`));
  const version = await browser.version();
  const result = {
    label, session: sid, url, chromeVersion: version, chromePid: proc.pid,
    launchArgs: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage', '--no-first-run', '--disable-crash-reporter', '--headless'],
    sessionStartWall, launchedAfterMs: performance.now() - sessionStartHr, views: [],
  };

  for (let v = 0; v < views; v++) {
    const page = await browser.newPage();
    const client = await page.createCDPSession();
    await client.send('Network.enable');
    await client.send('Network.setCacheDisabled', { cacheDisabled: true });
    const events = [];
    for (const ev of ['requestWillBeSent', 'responseReceived', 'loadingFinished', 'loadingFailed', 'dataReceived', 'requestServedFromCache']) {
      client.on(`Network.${ev}`, (p) => events.push({ ev, wall: Date.now(), ...p }));
    }
    const consoleMsgs = [];
    page.on('console', (m) => consoleMsgs.push({ wall: Date.now(), type: m.type(), text: m.text() }));
    page.on('pageerror', (e) => consoleMsgs.push({ wall: Date.now(), type: 'pageerror', text: String(e) }));
    let loadEvt = null, dclEvt = null;
    client.on('Page.loadEventFired', (p) => (loadEvt = { wall: Date.now(), ts: p.timestamp }));
    client.on('Page.domContentEventFired', (p) => (dclEvt = { wall: Date.now(), ts: p.timestamp }));
    await client.send('Page.enable');

    const cpu0 = cpuSnap();
    const t0wall = Date.now();
    const t0 = performance.now();
    let navError = null;
    try {
      await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 });
    } catch (e) { navError = String(e); }
    const t1 = performance.now();
    const t1wall = Date.now();
    await new Promise((r) => setTimeout(r, settleMs));
    const cpuUtil = cpuBusy(cpu0, cpuSnap());

    // API 単発の対照: 同じ Chrome から fetch で呼ぶ
    const apiCalls = [];
    if (apiPath && apiCount > 0) {
      for (let i = 0; i < apiCount; i++) {
        const r = await page.evaluate(async (p) => {
          const s = performance.now();
          let status = -1, err = null;
          try { const res = await fetch(p, { cache: 'no-store' }); status = res.status; await res.text(); } catch (e) { err = String(e); }
          return { startedAtMs: s, durationMs: performance.now() - s, status, err };
        }, apiPath);
        apiCalls.push({ wall: Date.now(), ...r });
      }
    }

    result.views.push({
      view: v, kind: v === 0 ? 'first' : 'warm',
      navStartWall: t0wall, navEndWall: t1wall, navDurationMs: t1 - t0, navError,
      loadEvent: loadEvt, domContentLoaded: dclEvt, hostCpuBusyRatio: cpuUtil,
      events, consoleMsgs, apiCalls,
    });
    await page.close();
  }
  result.sessionEndWall = Date.now();
  await browser.close();
  procLog.end();
  fs.writeFileSync(path.join(outDir, `${prefix}.json`), JSON.stringify(result));
  return result;
}

const t0 = Date.now();
const all = await Promise.all(Array.from({ length: sessions }, (_, i) => runSession(i)));
const summary = all.map((s) => ({
  session: s.session,
  views: s.views.map((v) => ({
    view: v.view, kind: v.kind, navDurationMs: Math.round(v.navDurationMs),
    requests: v.events.filter((e) => e.ev === 'requestWillBeSent').length,
    statuses: v.events.filter((e) => e.ev === 'responseReceived').reduce((m, e) => { const k = e.response.status; m[k] = (m[k] || 0) + 1; return m; }, {}),
    failed: v.events.filter((e) => e.ev === 'loadingFailed').length,
    hostCpuBusyRatio: Number(v.hostCpuBusyRatio.toFixed(3)),
  })),
}));
console.log(JSON.stringify({ label, sessions, views, startedWall: t0, endedWall: Date.now(), chrome: all[0].chromeVersion, cpus: os.cpus().length, summary }, null, 1));

// 30-second throughput measurement. Each VU keeps loading pages with no wait time.
// The first 5 seconds are a warm-up (not aggregated). 1 HTML + 156 assets, 6 concurrent, HTTP/1.1, no cache.
import http from 'k6/http';
import exec from 'k6/execution';
import { Trend, Counter } from 'k6/metrics';

const spec = JSON.parse(open('/work/assets150.json'));
const BASE = __ENV.BASE_URL;
const VUS = Number(__ENV.VUS);
const params = { headers: spec.headers, timeout: '30s' };

const pageTime = new Trend('page_time', true);
const pages = new Counter('pages');
const reqs200 = new Counter('res_200');
const reqs429 = new Counter('res_429');
const reqs5xx = new Counter('res_5xx');
const reqsErr = new Counter('res_err');
const pagesFailed = new Counter('pages_failed');

export const options = {
  scenarios: {
    warm: { executor: 'constant-vus', vus: VUS, duration: '5s', gracefulStop: '0s' },
    main: { executor: 'constant-vus', vus: VUS, duration: '30s', startTime: '5s', gracefulStop: '35s' },
  },
  batch: 6,
  batchPerHost: 6,
  discardResponseBodies: true,
  summaryTrendStats: ['avg', 'med', 'p(95)', 'p(99)', 'max'],
};

export default function () {
  const main = exec.scenario.name === 'main';
  const t0 = Date.now();
  const all = [http.get(BASE + spec.html, params)].concat(
    http.batch(spec.assets.map((p) => ['GET', BASE + p, null, params]))
  );
  if (!main) return;
  let bad = false;
  for (const r of all) {
    if (r.status === 200) reqs200.add(1);
    else if (r.status === 429) { reqs429.add(1); bad = true; }
    else if (r.status >= 500) { reqs5xx.add(1); bad = true; }
    else if (r.status === 0) { reqsErr.add(1); bad = true; }
  }
  if (bad) pagesFailed.add(1);
  pages.add(1);
  pageTime.add(Date.now() - t0);
}

#!/usr/bin/env bash
# Usage: run-tp.sh <wf|lwa> <vus> <tag>
# Replace the environment -> warm up once with curl -> 35 seconds with k6 (5-second warm-up + 30-second aggregation).
set -euo pipefail
ART="$(cd "$(dirname "$0")" && pwd)"; ROOT="$(dirname "$ART")"
. "$ART/endpoints.env"   # Defines WF150_URL and LWA150_URL
t=$1; vus=$2; tag=$3
stamp=$(date +%H%M%S)
if [ "$t" = wf ]; then
  url=$WF150_URL
  (cd "$ROOT" && aws lambda-web deploy --name vs-lwa-wf150 --env "COLD_TAG=$stamp" --region ap-northeast-1)
else
  url=$LWA150_URL
  aws lambda update-function-configuration --function-name vs-lwa-lwa150 --environment "Variables={COLD_TAG=$stamp}" --query '[LastUpdateStatus,State]' --output text --region ap-northeast-1
  aws lambda wait function-updated-v2 --function-name vs-lwa-lwa150 --region ap-northeast-1
fi
sleep 5
curl -sS -o /dev/null -w 'status=%{http_code} time_total=%{time_total}\n' --max-time 60 "$url/"
out="$ROOT/out"; mkdir -p "$out"
docker run --rm --network host --user "$(id -u):$(id -g)" \
  -e GODEBUG=http2client=0 -e BASE_URL="$url" -e VUS="$vus" \
  -v "$ART:/work:ro" -v "$out:/out" grafana/k6:2.3.0 run --quiet \
  --summary-export "/out/$tag.summary.json" /work/k6-throughput.js