test(react-start): benchmarking setup w/ platformatic/flame and autocannon

e2e/react-start/flamegraph-bench/.gitignore

@@ -0,0 +1,7 @@
+# Flamegraph profiles
+**/cpu-profile-*.md
+**/cpu-profile-*.html
+**/cpu-profile-*.pb
+**/heap-profile-*.html
+**/heap-profile-*.pb
+**/heap-profile-*.md

e2e/react-start/flamegraph-bench/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tanstack-react-start-flamegraph-bench",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "NODE_ENV=production vite build --mode=production",
+    "start": "NODE_ENV=production node ./tests/server.js",
+    "start:prof": "NODE_ENV=production flame run --md-format=detailed ./tests/server.js",
+    "bench": "pnpm build && pnpm bench:run",
+    "bench:run": "concurrently -k -s first \"pnpm start:prof\" \"sleep 3 && node ./tests/bench.js\""
+  },
+  "dependencies": {
+    "@tanstack/react-router": "workspace:^",
+    "@tanstack/react-start": "workspace:^",
+    "express": "^4.21.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "srvx": "^0.10.0"
+  },
+  "devDependencies": {
+    "@platformatic/flame": "latest",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autocannon": "^8.0.0",
+    "concurrently": "9.2.1",
+    "typescript": "^5.7.2",
+    "vite": "^7.3.1"
+  }
+}

e2e/react-start/flamegraph-bench/src/client.tsx

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/react-start/client'
+import { getRouter } from './router'
+
+const router = getRouter()
+
+hydrateRoot(document, <StartClient router={router} />)

e2e/react-start/flamegraph-bench/src/routeTree.gen.ts

@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as PageIdRouteImport } from './routes/page.$id'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PageIdRoute = PageIdRouteImport.update({
+  id: '/page/$id',
+  path: '/page/$id',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/page/$id': typeof PageIdRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/page/$id': typeof PageIdRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/page/$id': typeof PageIdRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/page/$id'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/page/$id'
+  id: '__root__' | '/' | '/page/$id'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  PageIdRoute: typeof PageIdRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/page/$id': {
+      id: '/page/$id'
+      path: '/page/$id'
+      fullPath: '/page/$id'
+      preLoaderRoute: typeof PageIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  PageIdRoute: PageIdRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

e2e/react-start/flamegraph-bench/src/router.tsx

@@ -0,0 +1,11 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}

e2e/react-start/flamegraph-bench/src/routes/__root.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Flamegraph Benchmark</title>
+        <HeadContent />
+      </head>
+      <body>
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

e2e/react-start/flamegraph-bench/src/routes/index.tsx

@@ -0,0 +1,26 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  return (
+    <div>
+      <h1 data-testid="page-title">Flamegraph Benchmark - Index</h1>
+      <p>Navigate to any page to start:</p>
+      <div>
+        {Array.from({ length: 10 }, (_, i) => (
+          <Link
+            key={i}
+            to="/page/$id"
+            params={{ id: String(i) }}
+            style={{ marginRight: '10px' }}
+          >
+            Page {i}
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

e2e/react-start/flamegraph-bench/src/routes/page.$id.tsx

@@ -0,0 +1,29 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/page/$id')({
+  component: PageComponent,
+})
+
+function PageComponent() {
+  const { id } = Route.useParams()
+
+  // 100 links = 100 buildLocation calls during SSR
+  return (
+    <div>
+      <h1 data-testid="page-title">Page {id}</h1>
+      <div>
+        {Array.from({ length: 100 }, (_, i) => (
+          <Link
+            key={i}
+            to="/page/$id"
+            params={{ id: String(i % 10) }}
+            data-testid={`link-${i}`}
+            style={{ display: 'block', margin: '2px 0' }}
+          >
+            Go to Page {i % 10}
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

e2e/react-start/flamegraph-bench/src/server.ts

@@ -0,0 +1,7 @@
+import handler from '@tanstack/react-start/server-entry'
+
+export default {
+  fetch(request: Request) {
+    return handler.fetch(request)
+  },
+}

e2e/react-start/flamegraph-bench/tests/bench.js

@@ -0,0 +1,39 @@
+import autocannon from 'autocannon'
+
+const BASE_URL = 'http://localhost:3000'
+
+const instance = autocannon({
+  url: BASE_URL,
+  connections: 100, // concurrent connections
+  duration: 30, // seconds
+  pipelining: 1, // requests per connection
+  requests: [
+    {
+      setupRequest: (req) => {
+        // Pick a random page for each request
+        const randomPage = '/page/' + Math.floor(Math.random() * 1000)
+        return { ...req, path: randomPage }
+      },
+    },
+  ],
+})
+
+autocannon.track(instance, { renderProgressBar: true })
+
+instance.on('done', (results) => {
+  console.log('\n=== SSR Benchmark Results ===')
+  console.log(`Total requests: ${results.requests.total}`)
+  console.log(`Requests/sec: ${results.requests.average}`)
+  console.log(`Latency (avg): ${results.latency.average}ms`)
+  console.log(`Latency (p99): ${results.latency.p99}ms`)
+  console.log(
+    `Throughput: ${(results.throughput.average / 1024 / 1024).toFixed(2)} MB/s`,
+  )
+
+  if (results.errors) {
+    console.log(`Errors: ${results.errors}`)
+  }
+
+  // Exit after a short delay to allow the server profiler to finish
+  setTimeout(() => process.exit(0), 1000)
+})

e2e/react-start/flamegraph-bench/tests/server.js

@@ -0,0 +1,30 @@
+import { toNodeHandler } from 'srvx/node'
+import express from 'express'
+
+const port = process.env.PORT || 3000
+
+async function createStartServer() {
+  const server = (await import('../dist/server/server.js')).default
+  const nodeHandler = toNodeHandler(server.fetch)
+
+  const app = express()
+
+  // Serve static client assets (matching basic example pattern)
+  app.use(express.static('../dist/client', { redirect: false }))
+
+  app.use(async (req, res, next) => {
+    try {
+      await nodeHandler(req, res)
+    } catch (error) {
+      next(error)
+    }
+  })
+
+  return { app }
+}
+
+createStartServer().then(async ({ app }) =>
+  app.listen(port, () => {
+    console.log(`Flamegraph bench server: http://localhost:${port}`)
+  }),
+)

e2e/react-start/flamegraph-bench/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "tests"]
+}

e2e/react-start/flamegraph-bench/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [tanstackStart(), viteReact()],
+})