Fixed SSR Renderer

packages/app-astro/src/pages/index.astro

@@ -19,6 +19,9 @@ const entries = await testData()
             <tr>
               <td>{entry.id}</td>
               <td>{entry.name}</td>
+              <td>
+                <a href={`/server-side-rendered/${entry.id}`}>View →</a>
+              </td>
             </tr>
           ))
         }

packages/app-mastro/handlers/home.ts

@@ -15,6 +15,9 @@ export const GET = async () => {
                 <tr>
                   <td>${entry.id}</td>
                   <td>${entry.name}</td>
+                  <td>
+                    <a href="/server-side-rendered/${entry.id}">View →</a>
+                  </td>
                 </tr>
               `,
             )}

packages/app-next-js/app/table.tsx

@@ -1,4 +1,5 @@
 'use client'
+import Link from 'next/link'
 import type { TableEntry } from '../../testdata/src/ssr'
 
 export function Table({ data }: { data: TableEntry[] }) {
@@ -9,6 +10,9 @@ export function Table({ data }: { data: TableEntry[] }) {
           <tr key={entry.id}>
             <td>{entry.id}</td>
             <td>{entry.name}</td>
+            <td>
+              <Link href={`/server-side-rendered/${entry.id}`}>View →</Link>
+            </td>
           </tr>
         ))}
       </tbody>

packages/app-nuxt/app/pages/index.vue

@@ -10,6 +10,9 @@ const { data } = await useAsyncData(() => testData(), { deep: false })
       <tr v-for="entry in data" :key="entry.id">
         <td>{{ entry.id }}</td>
         <td>{{ entry.name }}</td>
+        <td>
+          <NuxtLink :to="`/server-side-rendered/${entry.id}`">View →</NuxtLink>
+        </td>
       </tr>
     </tbody>
   </table>

packages/app-react-router/app/routes/home.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router'
 import { testData } from '../../../testdata/src/ssr'
 import type { Route } from './+types/home'
 
@@ -14,6 +15,9 @@ export default function Home({ loaderData }: Route.ComponentProps) {
           <tr key={entry.id}>
             <td>{entry.id}</td>
             <td>{entry.name}</td>
+            <td>
+              <Link to={`/server-side-rendered/${entry.id}`}>View →</Link>
+            </td>
           </tr>
         ))}
       </tbody>

packages/app-solid-start/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { For } from 'solid-js'
-import { query, createAsync } from '@solidjs/router'
+import { A, query, createAsync } from '@solidjs/router'
 import { testData } from '../../../testdata/src/ssr'
 
 const getData = query(async () => {
@@ -22,6 +22,9 @@ export default function Home() {
             <tr>
               <td>{entry.id}</td>
               <td>{entry.name}</td>
+              <td>
+                <A href={`/server-side-rendered/${entry.id}`}>View →</A>
+              </td>
             </tr>
           )}
         </For>

packages/app-sveltekit/src/routes/+page.svelte

@@ -12,6 +12,7 @@
       <tr>
         <td>{entry.id}</td>
         <td>{entry.name}</td>
+        <td><a href={`/server-side-rendered/${entry.id}`}>View →</a></td>
       </tr>
     {/each}
   </tbody>

packages/app-sveltekit/src/routes/client-side-rendered/+page.svelte

@@ -13,7 +13,7 @@
       <tr>
         <td>{entry.id}</td>
         <td>{entry.name}</td>
-        <td><a href="/client-side-rendered/{entry.id}">View →</a></td>
+        <td><a href={`/client-side-rendered/${entry.id}`}>View →</a></td>
       </tr>
     {/each}
   </tbody>

packages/app-sveltekit/src/routes/server-side-rendered/+page.svelte

@@ -9,7 +9,7 @@
         <td>{entry.id}</td>
         <td>{entry.name}</td>
         <td>
-          <a href="/server-side-rendered/{entry.id}">View →</a>
+          <a href={`/server-side-rendered/${entry.id}`}>View →</a>
         </td>
       </tr>
     {/each}

packages/app-tanstack-start-react/src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { Link, createFileRoute } from '@tanstack/react-router'
 import { testData } from '../../../testdata/src/ssr'
 
 export const Route = createFileRoute('/')({
@@ -16,6 +16,11 @@ function Home() {
           <tr key={entry.id}>
             <td>{entry.id}</td>
             <td>{entry.name}</td>
+            <td>
+              <Link to="/server-side-rendered/$id" params={{ id: entry.id }}>
+                View →
+              </Link>
+            </td>
           </tr>
         ))}
       </tbody>

packages/stats-generator/src/baseline-html.ts

@@ -0,0 +1,12 @@
+import type { TableEntry } from '../../testdata/src/ssr.ts'
+
+export function renderBaselineHtml(entries: TableEntry[]): string {
+  const rows = entries
+    .map(
+      (entry) =>
+        `<tr><td>${entry.id}</td><td>${entry.name}</td><td><a href="/server-side-rendered/${entry.id}">View →</a></td></tr>`,
+    )
+    .join('')
+
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Baseline HTML</title></head><body><table><tbody>${rows}</tbody></table></body></html>`
+}

packages/stats-generator/src/serve/baseline-html.ts

@@ -1,15 +1,13 @@
 import { createServer } from 'node:http'
 import { testData } from '../../../testdata/src/ssr.ts'
+import { renderBaselineHtml } from '../baseline-html.ts'
 import { getPort, registerShutdown } from './common.ts'
 
 const PORT = getPort()
 
 const server = createServer(async (_req, res) => {
   const entries = await testData()
-  const rows = entries
-    .map((entry) => `<tr><td>${entry.id}</td><td>${entry.name}</td></tr>`)
-    .join('')
-  const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Baseline HTML</title></head><body><table><tbody>${rows}</tbody></table></body></html>`
+  const html = renderBaselineHtml(entries)
 
   res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
   res.end(html)

packages/stats-generator/src/ssrRequestThroughput/handlers/baseline-html.ts

@@ -1,15 +1,11 @@
 import { testData } from '../../../../testdata/src/ssr.ts'
+import { renderBaselineHtml } from '../../baseline-html.ts'
 import type { NodeServerRenderHandler, ServerRenderHandler } from '../types.ts'
 
 export async function buildBaselineHtmlHandler(): Promise<ServerRenderHandler> {
   const handler: NodeServerRenderHandler = async (_req, res) => {
     const entries = await testData()
-
-    const rows = entries
-      .map((entry) => `<tr><td>${entry.id}</td><td>${entry.name}</td></tr>`)
-      .join('')
-
-    const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Baseline HTML</title></head><body><table><tbody>${rows}</tbody></table></body></html>`
+    const html = renderBaselineHtml(entries)
 
     res.writeHead(200)
     res.end(html)