React router fixes and production server fixes (#270)

Author: AlexanderKaran

.github/frameworks.json

@@ -88,11 +88,7 @@
       "package": "app-mastro",
       "buildScript": "build",
       "buildOutputDir": "generated",
-      "measurements": [
-        {
-          "type": "ssrRequestThroughput"
-        }
-      ]
+      "measurements": []
     }
   },
   {

.github/workflows/measure-framework.yml

@@ -280,8 +280,6 @@ jobs:
       - name: Build app
         working-directory: ./packages/${{ matrix.framework.package }}
         run: pnpm build
-        env:
-          BUILD_MODE: spa
 
       - name: Run client-side rendered benchmark
         run: pnpm --filter @framework-tracker/stats-generator run:client-side-rendered ${{ matrix.framework.package }}

.github/workflows/validate-stats.yml

@@ -52,7 +52,7 @@ jobs:
 
           echo "=== Running SSR request throughput benchmarks ==="
           FRAMEWORKS=$(cat .github/frameworks.json)
-          echo "$FRAMEWORKS" | jq -c '.[] | select(.app)' | while read -r framework; do
+          echo "$FRAMEWORKS" | jq -c '.[] | select(.app) | select(.app.measurements | map(.type) | contains(["ssrRequestThroughput"]))' | while read -r framework; do
             PKG=$(echo "$framework" | jq -r '.app.package')
             echo "Building $PKG..."
             (cd packages/$PKG && pnpm build)
@@ -97,7 +97,7 @@ jobs:
           echo "$FRAMEWORKS" | jq -c '.[] | select(.app) | select(.app.measurements | map(.type) | contains(["clientSideRendered"]))' | while read -r framework; do
             PKG=$(echo "$framework" | jq -r '.app.package')
             echo "Building client-side rendered app for $PKG..."
-            (cd packages/$PKG && BUILD_MODE=spa pnpm build)
+            (cd packages/$PKG && pnpm build)
             echo "Running client-side rendered benchmark for $PKG..."
             pnpm --filter @framework-tracker/stats-generator run:client-side-rendered $PKG
           done

packages/app-astro/astro.config.mjs

@@ -5,7 +5,7 @@ import react from '@astrojs/react'
 export default defineConfig({
   output: 'server',
   adapter: node({
-    mode: 'middleware',
+    mode: 'standalone',
   }),
   integrations: [react()],
 })

packages/app-nuxt/nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
     compatibilityVersion: 4,
   },
   nitro: {
-    preset: 'node',
+    preset: 'node-server',
   },
   routeRules: {
     '/client-side-rendered': { ssr: false },

packages/app-react-router/app/routes.ts

@@ -1,18 +1,9 @@
 import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
-const isClientSideRendered = process.env.BUILD_MODE === 'spa'
-
 export default [
-  ...(isClientSideRendered ? [] : [index('routes/home.tsx')]),
+  index('routes/home.tsx'),
   route('/client-side-rendered', 'routes/client-side-rendered.tsx'),
   route('/client-side-rendered/:id', 'routes/client-side-rendered.detail.tsx'),
-  ...(isClientSideRendered
-    ? []
-    : [
-        route('/server-side-rendered', 'routes/server-side-rendered.tsx'),
-        route(
-          '/server-side-rendered/:id',
-          'routes/server-side-rendered.detail.tsx',
-        ),
-      ]),
+  route('/server-side-rendered', 'routes/server-side-rendered.tsx'),
+  route('/server-side-rendered/:id', 'routes/server-side-rendered.detail.tsx'),
 ] satisfies RouteConfig

packages/app-react-router/app/routes/client-side-rendered.detail.tsx

@@ -1,7 +1,17 @@
-import { useParams } from 'react-router'
+import type { Route } from './+types/client-side-rendered.detail'
 
-export default function ClientSideRenderedDetailPage() {
-  const { id } = useParams()
+export async function clientLoader({ params }: Route.ClientLoaderArgs) {
+  return { id: params.id }
+}
+
+clientLoader.hydrate = true as const
+
+export function HydrateFallback() {
+  return null
+}
 
-  return <p id="detail-id">{id}</p>
+export default function ClientSideRenderedDetailPage({
+  loaderData,
+}: Route.ComponentProps) {
+  return <p id="detail-id">{loaderData.id}</p>
 }

packages/app-react-router/app/routes/client-side-rendered.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
 import { Link } from 'react-router'
+import type { Route } from './+types/client-side-rendered'
 
 type Entry = { id: string; name: string }
 
@@ -10,13 +10,23 @@ function generateData(): Entry[] {
   }))
 }
 
-export default function ClientSideRenderedPage() {
-  const [entries] = useState(generateData)
+export async function clientLoader() {
+  return { data: generateData() }
+}
+
+clientLoader.hydrate = true as const
+
+export function HydrateFallback() {
+  return null
+}
 
+export default function ClientSideRenderedPage({
+  loaderData,
+}: Route.ComponentProps) {
   return (
     <table>
       <tbody>
-        {entries.map((entry) => (
+        {loaderData.data.map((entry) => (
           <tr key={entry.id}>
             <td>{entry.id}</td>
             <td>{entry.name}</td>

packages/app-react-router/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "react-router dev",
     "build": "react-router build",
-    "start": "react-router-serve ./build/server/index.js"
+    "start": "react-router-serve ./build/server/index.js",
+    "type-check": "react-router typegen && tsc"
   },
   "dependencies": {
     "@react-router/node": "7.10.1",
@@ -20,6 +21,7 @@
     "@types/node": "22",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
+    "typescript": "5.9.3",
     "vite": "7.3.0"
   }
 }