Next.js vs SvelteKit: we built the same dashboard twice

// Same file in both apps. Makes 1,000 fake orders over 90 days from a fixed seed.
export type Status = 'paid' | 'refunded' | 'pending';
export type Order = { id: string; day: number; customer: string; plan: string; amount: number; status: Status };

const NAMES = ['Acme', 'Globex', 'Initech', 'Umbrella', 'Hooli', 'Stark', 'Wayne', 'Wonka', 'Tyrell', 'Soylent', 'Cyberdyne', 'Vandelay'];
const PLANS = ['Starter', 'Team', 'Business'];
const PRICES = [29, 99, 299];

function rng(seed: number) {
  return () => {
    seed = (seed * 1664525 + 1013904223) % 4294967296;
    return seed / 4294967296;
  };
}

export function makeOrders(count = 1000): Order[] {
  const r = rng(42);
  return Array.from({ length: count }, (_, i) => {
    const p = Math.floor(r() * 3);
    const s = r();
    return {
      id: `ord_${(10000 + i).toString(36)}`,
      day: Math.floor(r() * 90),
      customer: `${NAMES[Math.floor(r() * NAMES.length)]} ${Math.floor(r() * 90) + 10}`,
      plan: PLANS[p],
      amount: PRICES[p] * (1 + Math.floor(r() * 4)),
      status: s < 0.08 ? 'refunded' : s < 0.15 ? 'pending' : 'paid',
    };
  });
}

// Same file in both apps. Pure functions the dashboard calls on every change.
import type { Order, Status } from './data';

export type SortKey = 'day' | 'customer' | 'amount';
export type Query = { range: number; search: string; status: Status | 'all'; sort: SortKey; dir: 1 | -1; page: number };
export const PAGE_SIZE = 20;

export function inRange(orders: Order[], range: number) {
  return orders.filter((o) => o.day < range);
}

export function kpis(orders: Order[]) {
  const paid = orders.filter((o) => o.status === 'paid');
  const revenue = paid.reduce((s, o) => s + o.amount, 0);
  const refunds = orders.filter((o) => o.status === 'refunded').length;
  return {
    revenue,
    orders: orders.length,
    aov: paid.length ? revenue / paid.length : 0,
    refundRate: orders.length ? refunds / orders.length : 0,
  };
}

export function daily(orders: Order[], range: number) {
  const days = Array.from({ length: range }, () => 0);
  for (const o of orders) if (o.status === 'paid') days[range - 1 - o.day] += o.amount;
  return days;
}

export function linePath(values: number[], w: number, h: number) {
  const max = Math.max(1, ...values);
  const step = values.length > 1 ? w / (values.length - 1) : 0;
  return values.map((v, i) => `${i ? 'L' : 'M'}${(i * step).toFixed(1)},${(h - (v / max) * h).toFixed(1)}`).join(' ');
}

export function tableRows(orders: Order[], q: Query) {
  const s = q.search.trim().toLowerCase();
  const rows = orders.filter(
    (o) => (q.status === 'all' || o.status === q.status) && (!s || o.customer.toLowerCase().includes(s) || o.id.includes(s)),
  );
  rows.sort((a, b) => {
    const x = a[q.sort];
    const y = b[q.sort];
    return (x < y ? -1 : x > y ? 1 : 0) * q.dir;
  });
  const pages = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
  const page = Math.min(q.page, pages - 1);
  return { total: rows.length, pages, page, rows: rows.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE) };
}

export const money = (n: number) => '$' + Math.round(n).toLocaleString('en-US');

// app/page.tsx
import { makeOrders } from '../lib/data';
import Dashboard from './Dashboard';

export const dynamic = 'force-dynamic';

export default function Page() {
  // Stands in for a database query. Runs on the server for every request.
  return <Dashboard orders={makeOrders()} />;
}
// app/layout.tsx
import '../lib/dash.css';

export const metadata = { title: 'Dashboard' };

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// next.config.mjs
// SKIP_TYPECHECK=1 turns off the type check Next runs inside `next build`, to compare with Vite, which skips it.
export default { poweredByHeader: false, typescript: { ignoreBuildErrors: process.env.SKIP_TYPECHECK === '1' } };

'use client';
import { useMemo, useState } from 'react';
import type { Order, Status } from '../lib/data';
import { daily, inRange, kpis, linePath, money, tableRows, type SortKey } from '../lib/stats';

const RANGES = [7, 30, 90];

export default function Dashboard({ orders }: { orders: Order[] }) {
  const [range, setRange] = useState(30);
  const [search, setSearch] = useState('');
  const [status, setStatus] = useState<Status | 'all'>('all');
  const [sort, setSort] = useState<SortKey>('day');
  const [dir, setDir] = useState<1 | -1>(1);
  const [page, setPage] = useState(0);

  const scoped = useMemo(() => inRange(orders, range), [orders, range]);
  const k = useMemo(() => kpis(scoped), [scoped]);
  const path = useMemo(() => linePath(daily(scoped, range), 600, 150), [scoped, range]);
  const t = useMemo(
    () => tableRows(scoped, { range, search, status, sort, dir, page }),
    [scoped, range, search, status, sort, dir, page],
  );

  function sortBy(key: SortKey) {
    if (key === sort) setDir(dir === 1 ? -1 : 1);
    else {
      setSort(key);
      setDir(1);
    }
    setPage(0);
  }

  return (
    <main>
      <header>
        <h1>Revenue</h1>
        <div className="seg">
          {RANGES.map((r) => (
            <button
              key={r}
              aria-pressed={r === range}
              onClick={() => {
                setRange(r);
                setPage(0);
              }}
            >
              {r} days
            </button>
          ))}
        </div>
      </header>

      <section className="kpis">
        <div className="kpi"><span>Revenue</span><strong>{money(k.revenue)}</strong></div>
        <div className="kpi"><span>Orders</span><strong>{k.orders}</strong></div>
        <div className="kpi"><span>Average order</span><strong>{money(k.aov)}</strong></div>
        <div className="kpi"><span>Refund rate</span><strong>{(k.refundRate * 100).toFixed(1)}%</strong></div>
      </section>

      <section className="card">
        <svg viewBox="0 0 600 150" preserveAspectRatio="none" role="img" aria-label={`Daily revenue, last ${range} days`}>
          <path d={path} fill="none" stroke="#e8641b" strokeWidth="2" vectorEffect="non-scaling-stroke" />
        </svg>
      </section>

      <section className="card">
        <div className="filters">
          <input
            type="search"
            placeholder="Search customer or order id"
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(0);
            }}
          />
          <select
            value={status}
            onChange={(e) => {
              setStatus(e.target.value as Status | 'all');
              setPage(0);
            }}
          >
            <option value="all">All statuses</option>
            <option value="paid">Paid</option>
            <option value="pending">Pending</option>
            <option value="refunded">Refunded</option>
          </select>
        </div>
        <table>
          <thead>
            <tr>
              <th>Order</th>
              <th><button onClick={() => sortBy('day')}>Days ago</button></th>
              <th><button onClick={() => sortBy('customer')}>Customer</button></th>
              <th>Plan</th>
              <th><button onClick={() => sortBy('amount')}>Amount</button></th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {t.rows.map((o) => (
              <tr key={o.id}>
                <td>{o.id}</td>
                <td>{o.day}</td>
                <td>{o.customer}</td>
                <td>{o.plan}</td>
                <td>{money(o.amount)}</td>
                <td className={o.status}>{o.status}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="pager">
          <button disabled={t.page === 0} onClick={() => setPage(t.page - 1)}>Previous</button>
          <span>Page {t.page + 1} of {t.pages}, {t.total} orders</span>
          <button disabled={t.page >= t.pages - 1} onClick={() => setPage(t.page + 1)}>Next</button>
        </div>
      </section>
    </main>
  );
}

// src/routes/+page.server.ts
import { makeOrders } from '$lib/data';

// Stands in for a database query. Runs on the server for every request.
export function load() {
  return { orders: makeOrders() };
}
// svelte.config.js
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default { preprocess: vitePreprocess(), kit: { adapter: adapter() } };

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import '$lib/dash.css';
  let { children } = $props();
</script>

<svelte:head><title>Dashboard</title></svelte:head>
{@render children()}

<script lang="ts">
  import type { Status } from '$lib/data';
  import { daily, inRange, kpis, linePath, money, tableRows, type SortKey } from '$lib/stats';

  let { data } = $props();

  const RANGES = [7, 30, 90];
  let range = $state(30);
  let search = $state('');
  let status = $state<Status | 'all'>('all');
  let sort = $state<SortKey>('day');
  let dir = $state<1 | -1>(1);
  let page = $state(0);

  const scoped = $derived(inRange(data.orders, range));
  const k = $derived(kpis(scoped));
  const path = $derived(linePath(daily(scoped, range), 600, 150));
  const t = $derived(tableRows(scoped, { range, search, status, sort, dir, page }));

  function sortBy(key: SortKey) {
    if (key === sort) dir = dir === 1 ? -1 : 1;
    else {
      sort = key;
      dir = 1;
    }
    page = 0;
  }
</script>

<main>
  <header>
    <h1>Revenue</h1>
    <div class="seg">
      {#each RANGES as r (r)}
        <button aria-pressed={r === range} onclick={() => ((range = r), (page = 0))}>{r} days</button>
      {/each}
    </div>
  </header>

  <section class="kpis">
    <div class="kpi"><span>Revenue</span><strong>{money(k.revenue)}</strong></div>
    <div class="kpi"><span>Orders</span><strong>{k.orders}</strong></div>
    <div class="kpi"><span>Average order</span><strong>{money(k.aov)}</strong></div>
    <div class="kpi"><span>Refund rate</span><strong>{(k.refundRate * 100).toFixed(1)}%</strong></div>
  </section>

  <section class="card">
    <svg viewBox="0 0 600 150" preserveAspectRatio="none" role="img" aria-label="Daily revenue, last {range} days">
      <path d={path} fill="none" stroke="#e8641b" stroke-width="2" vector-effect="non-scaling-stroke" />
    </svg>
  </section>

  <section class="card">
    <div class="filters">
      <input type="search" placeholder="Search customer or order id" bind:value={search} oninput={() => (page = 0)} />
      <select bind:value={status} onchange={() => (page = 0)}>
        <option value="all">All statuses</option>
        <option value="paid">Paid</option>
        <option value="pending">Pending</option>
        <option value="refunded">Refunded</option>
      </select>
    </div>
    <table>
      <thead>
        <tr>
          <th>Order</th>
          <th><button onclick={() => sortBy('day')}>Days ago</button></th>
          <th><button onclick={() => sortBy('customer')}>Customer</button></th>
          <th>Plan</th>
          <th><button onclick={() => sortBy('amount')}>Amount</button></th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {#each t.rows as o (o.id)}
          <tr>
            <td>{o.id}</td>
            <td>{o.day}</td>
            <td>{o.customer}</td>
            <td>{o.plan}</td>
            <td>{money(o.amount)}</td>
            <td class={o.status}>{o.status}</td>
          </tr>
        {/each}
      </tbody>
    </table>
    <div class="pager">
      <button disabled={t.page === 0} onclick={() => (page = t.page - 1)}>Previous</button>
      <span>Page {t.page + 1} of {t.pages}, {t.total} orders</span>
      <button disabled={t.page >= t.pages - 1} onclick={() => (page = t.page + 1)}>Next</button>
    </div>
  </section>
</main>

// next-dash/package.json
{
  "name": "next-dash",
  "private": true,
  "scripts": { "build": "next build", "start": "next start -p 3101" },
  "dependencies": { "next": "^16", "react": "^19", "react-dom": "^19" },
  "devDependencies": { "typescript": "^6", "@types/react": "^19", "@types/node": "^24" }
}
// kit-dash/package.json
{
  "name": "kit-dash",
  "private": true,
  "type": "module",
  "scripts": { "build": "vite build", "start": "node build/index.js" },
  "devDependencies": {
    "@sveltejs/kit": "^2 || ^3",
    "@sveltejs/adapter-node": "^5 || ^6",
    "@sveltejs/vite-plugin-svelte": "^6 || ^7",
    "svelte": "^5",
    "vite": "^7 || ^8",
    "typescript": "^6"
  }
}

packages:
  - next-dash
  - kit-dash
minimumReleaseAge: 21600
minimumReleaseAgeStrict: false
allowBuilds:
  sharp: false
  esbuild: false
  '@parcel/watcher': false

// Cold production builds, alternating apps. Deletes build output and caches before each run.
import { execSync } from 'node:child_process';
import { rmSync } from 'node:fs';

const RUNS = Number(process.argv[2] ?? 5);
const jobs = [
  { name: 'next', dir: 'next-dash', clean: ['.next'], env: {} },
  { name: 'next-no-typecheck', dir: 'next-dash', clean: ['.next'], env: { SKIP_TYPECHECK: '1' } },
  { name: 'sveltekit', dir: 'kit-dash', clean: ['.svelte-kit/output', 'build', 'node_modules/.vite'], env: {} },
];
const times = Object.fromEntries(jobs.map((j) => [j.name, []]));
for (let i = 0; i < RUNS; i++) {
  for (const j of jobs) {
    for (const c of j.clean) rmSync(`${j.dir}/${c}`, { recursive: true, force: true });
    const t = performance.now();
    execSync('pnpm build', { cwd: j.dir, stdio: 'ignore', env: { ...process.env, NEXT_TELEMETRY_DISABLED: '1', ...j.env } });
    times[j.name].push((performance.now() - t) / 1000);
  }
}
const median = (a) => [...a].sort((x, y) => x - y)[Math.floor(a.length / 2)];
for (const [k, v] of Object.entries(times)) console.log(k, 'median', median(v).toFixed(1), 's, runs', v.map((x) => x.toFixed(1)).join(' '));

// Loads each production server in headless Chrome and records:
// 1. every JavaScript file the page loads, raw, gzip, and brotli size (we compress the raw bytes ourselves so both apps are judged the same way)
// 2. the HTML document size
// 3. interaction latency from the Event Timing API, with the CPU slowed 4x, median of RUNS
import { chromium } from 'playwright-core';
import { gzipSync, brotliCompressSync, constants } from 'node:zlib';

const RUNS = 10;
const apps = [
  { name: 'next', url: 'http://localhost:3101/' },
  { name: 'sveltekit', url: 'http://localhost:3102/' },
];
const kb = (n) => (n / 1024).toFixed(1);
const median = (a) => [...a].sort((x, y) => x - y)[Math.floor(a.length / 2)];
const browser = await chromium.launch({ executablePath: 'C:/Program Files/Google/Chrome/Application/chrome.exe', headless: true });

for (const app of apps) {
  // Sizes
  const ctx = await browser.newContext();
  const page = await ctx.newPage();
  const js = new Map();
  let html = 0;
  page.on('response', async (res) => {
    const type = res.request().resourceType();
    try {
      const body = await res.body();
      if (type === 'script') js.set(res.url(), body);
      if (type === 'document') html = body;
    } catch {}
  });
  await page.goto(app.url, { waitUntil: 'networkidle' });
  await page.waitForTimeout(1000);
  let raw = 0, gz = 0, br = 0;
  for (const b of js.values()) {
    raw += b.length;
    gz += gzipSync(b, { level: 9 }).length;
    br += brotliCompressSync(b, { params: { [constants.BROTLI_PARAM_QUALITY]: 11 } }).length;
  }
  console.log(`${app.name}: ${js.size} JS files, raw ${kb(raw)} KB, gzip ${kb(gz)} KB, brotli ${kb(br)} KB`);
  console.log(`${app.name}: HTML raw ${kb(html.length)} KB, gzip ${kb(gzipSync(html, { level: 9 }).length)} KB`);
  await ctx.close();

  // Interactions
  const results = { range90: [], sortCustomer: [], typeSearch: [], nextPage: [] };
  for (let i = 0; i < RUNS; i++) {
    const c = await browser.newContext();
    const p = await c.newPage();
    const cdp = await c.newCDPSession(p);
    await cdp.send('Emulation.setCPUThrottlingRate', { rate: 4 });
    await p.goto(app.url, { waitUntil: 'networkidle' });
    await p.waitForTimeout(500);
    await p.evaluate(() => {
      window.__ev = [];
      new PerformanceObserver((l) => {
        for (const e of l.getEntries()) if (e.interactionId) window.__ev.push({ id: e.interactionId, d: e.duration });
      }).observe({ type: 'event', durationThreshold: 16, buffered: true });
    });
    const step = async (key, fn) => {
      await p.evaluate(() => (window.__ev = []));
      await fn();
      await p.waitForTimeout(400);
      const ev = await p.evaluate(() => window.__ev);
      results[key].push(ev.length ? Math.max(...ev.map((e) => e.d)) : 0);
    };
    await step('range90', () => p.getByRole('button', { name: '90 days' }).click());
    await step('sortCustomer', () => p.getByRole('button', { name: 'Customer' }).click());
    await step('typeSearch', () => p.getByPlaceholder('Search customer or order id').pressSequentially('a'));
    await step('nextPage', () => p.getByRole('button', { name: 'Next' }).click());
    await c.close();
  }
  for (const [k, v] of Object.entries(results)) console.log(`${app.name}: ${k} median ${median(v)} ms (runs ${v.join(' ')})`);
}
await browser.close();