Set up MPA routes in App Packages (#184)

AlexanderKaran · web-flow · commit 3fe1d0372501 · 2026-04-23T08:17:14.000+08:00
* First pass at setting up MPA routes for the test

* Format

* Updated from running tests
diff --git a/packages/app-astro/src/pages/mpa.astro b/packages/app-astro/src/pages/mpa.astro
@@ -0,0 +1,29 @@
+---
+import { testData } from '../../../testdata/src/ssr'
+const entries = await testData()
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Astro MPA Benchmark</title>
+  </head>
+  <body>
+    <table>
+      <tbody>
+        {
+          entries.map((entry) => (
+            <tr>
+              <td>{entry.id}</td>
+              <td>{entry.name}</td>
+              <td>
+                <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+              </td>
+            </tr>
+          ))
+        }
+      </tbody>
+    </table>
+  </body>
+</html>
diff --git a/packages/app-astro/src/pages/mpa/detail.astro b/packages/app-astro/src/pages/mpa/detail.astro
@@ -0,0 +1,14 @@
+---
+const id = Astro.url.searchParams.get('id')
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Astro MPA Detail</title>
+  </head>
+  <body>
+    <p id="detail-id">{id}</p>
+  </body>
+</html>
diff --git a/packages/app-next-js/app/mpa/detail/page.tsx b/packages/app-next-js/app/mpa/detail/page.tsx
@@ -0,0 +1,9 @@
+interface Props {
+  searchParams: Promise<{ id?: string }>
+}
+
+export default async function MpaDetailPage({ searchParams }: Props) {
+  const { id } = await searchParams
+
+  return <p id="detail-id">{id}</p>
+}
diff --git a/packages/app-next-js/app/mpa/page.tsx b/packages/app-next-js/app/mpa/page.tsx
@@ -0,0 +1,23 @@
+import { testData } from '../../../testdata/src/ssr'
+
+export const dynamic = 'force-dynamic'
+
+export default async function MpaPage() {
+  const entries = await testData()
+
+  return (
+    <table>
+      <tbody>
+        {entries.map((entry) => (
+          <tr key={entry.id}>
+            <td>{entry.id}</td>
+            <td>{entry.name}</td>
+            <td>
+              <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/packages/app-nuxt/app/pages/mpa/detail.vue b/packages/app-nuxt/app/pages/mpa/detail.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const route = useRoute()
+const id = Array.isArray(route.query.id) ? route.query.id[0] : route.query.id
+</script>
+
+<template>
+  <p id="detail-id">{{ id }}</p>
+</template>
diff --git a/packages/app-nuxt/app/pages/mpa/index.vue b/packages/app-nuxt/app/pages/mpa/index.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { testData } from '../../../../testdata/src/ssr'
+
+const { data } = await useAsyncData(() => testData(), { deep: false })
+</script>
+
+<template>
+  <table>
+    <tbody>
+      <tr v-for="entry in data" :key="entry.id">
+        <td>{{ entry.id }}</td>
+        <td>{{ entry.name }}</td>
+        <td>
+          <a :href="`/mpa/detail?id=${entry.id}`">View →</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/packages/app-react-router/app/routes.ts b/packages/app-react-router/app/routes.ts
@@ -6,4 +6,10 @@ export default [
   ...(isSpa ? [] : [index('routes/home.tsx')]),
   route('/spa', 'routes/spa.tsx'),
   route('/spa/detail', 'routes/spa.detail.tsx'),
+  ...(isSpa
+    ? []
+    : [
+        route('/mpa', 'routes/mpa.tsx'),
+        route('/mpa/detail', 'routes/mpa.detail.tsx'),
+      ]),
 ] satisfies RouteConfig
diff --git a/packages/app-react-router/app/routes/mpa.detail.tsx b/packages/app-react-router/app/routes/mpa.detail.tsx
@@ -0,0 +1,11 @@
+import type { Route } from './+types/mpa.detail'
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const url = new URL(request.url)
+  const id = url.searchParams.get('id')
+  return { id }
+}
+
+export default function MpaDetailPage({ loaderData }: Route.ComponentProps) {
+  return <p id="detail-id">{loaderData.id}</p>
+}
diff --git a/packages/app-react-router/app/routes/mpa.tsx b/packages/app-react-router/app/routes/mpa.tsx
@@ -0,0 +1,25 @@
+import { testData } from '../../../testdata/src/ssr'
+import type { Route } from './+types/mpa'
+
+export async function loader() {
+  const data = await testData()
+  return { data }
+}
+
+export default function MpaPage({ loaderData }: Route.ComponentProps) {
+  return (
+    <table>
+      <tbody>
+        {loaderData.data.map((entry) => (
+          <tr key={entry.id}>
+            <td>{entry.id}</td>
+            <td>{entry.name}</td>
+            <td>
+              <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/packages/app-solid-start/src/routes/mpa/detail.tsx b/packages/app-solid-start/src/routes/mpa/detail.tsx
@@ -0,0 +1,7 @@
+import { useSearchParams } from '@solidjs/router'
+
+export default function MpaDetailPage() {
+  const [searchParams] = useSearchParams()
+
+  return <p id="detail-id">{searchParams.id}</p>
+}
diff --git a/packages/app-solid-start/src/routes/mpa/index.tsx b/packages/app-solid-start/src/routes/mpa/index.tsx
@@ -0,0 +1,34 @@
+import { For } from 'solid-js'
+import { query, createAsync } from '@solidjs/router'
+import { testData } from '../../../../testdata/src/ssr'
+
+const getData = query(async () => {
+  'use server'
+  return await testData()
+}, 'mpa-data')
+
+export const route = {
+  load: () => getData(),
+}
+
+export default function MpaPage() {
+  const data = createAsync(() => getData())
+
+  return (
+    <table>
+      <tbody>
+        <For each={data()}>
+          {(entry) => (
+            <tr>
+              <td>{entry.id}</td>
+              <td>{entry.name}</td>
+              <td>
+                <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+              </td>
+            </tr>
+          )}
+        </For>
+      </tbody>
+    </table>
+  )
+}
diff --git a/packages/app-sveltekit/src/routes/mpa/+page.server.ts b/packages/app-sveltekit/src/routes/mpa/+page.server.ts
@@ -0,0 +1,5 @@
+import { testData } from '../../../../testdata/src/ssr'
+
+export const load = async () => {
+  return { entries: await testData() }
+}
diff --git a/packages/app-sveltekit/src/routes/mpa/+page.svelte b/packages/app-sveltekit/src/routes/mpa/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  let { data } = $props()
+</script>
+
+<table>
+  <tbody>
+    {#each data.entries as entry (entry.id)}
+      <tr>
+        <td>{entry.id}</td>
+        <td>{entry.name}</td>
+        <td>
+          <a href="/mpa/detail?id={entry.id}" data-sveltekit-reload>View →</a>
+        </td>
+      </tr>
+    {/each}
+  </tbody>
+</table>
diff --git a/packages/app-sveltekit/src/routes/mpa/+page.ts b/packages/app-sveltekit/src/routes/mpa/+page.ts
@@ -0,0 +1 @@
+export const csr = false
diff --git a/packages/app-sveltekit/src/routes/mpa/detail/+page.server.ts b/packages/app-sveltekit/src/routes/mpa/detail/+page.server.ts
@@ -0,0 +1,6 @@
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = ({ url }) => {
+  const id = url.searchParams.get('id')
+  return { id }
+}
diff --git a/packages/app-sveltekit/src/routes/mpa/detail/+page.svelte b/packages/app-sveltekit/src/routes/mpa/detail/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  let { data } = $props()
+</script>
+
+<p id="detail-id">{data.id}</p>
diff --git a/packages/app-sveltekit/src/routes/mpa/detail/+page.ts b/packages/app-sveltekit/src/routes/mpa/detail/+page.ts
@@ -0,0 +1 @@
+export const csr = false
diff --git a/packages/app-tanstack-start-react/src/routeTree.gen.ts b/packages/app-tanstack-start-react/src/routeTree.gen.ts
@@ -10,14 +10,21 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SpaRouteImport } from './routes/spa'
+import { Route as MpaRouteImport } from './routes/mpa'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as SpaDetailRouteImport } from './routes/spa_.detail'
+import { Route as MpaDetailRouteImport } from './routes/mpa_.detail'
 
 const SpaRoute = SpaRouteImport.update({
   id: '/spa',
   path: '/spa',
   getParentRoute: () => rootRouteImport,
 } as any)
+const MpaRoute = MpaRouteImport.update({
+  id: '/mpa',
+  path: '/mpa',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -28,34 +35,47 @@ const SpaDetailRoute = SpaDetailRouteImport.update({
   path: '/spa/detail',
   getParentRoute: () => rootRouteImport,
 } as any)
+const MpaDetailRoute = MpaDetailRouteImport.update({
+  id: '/mpa_/detail',
+  path: '/mpa/detail',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/mpa': typeof MpaRoute
   '/spa': typeof SpaRoute
+  '/mpa/detail': typeof MpaDetailRoute
   '/spa/detail': typeof SpaDetailRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/mpa': typeof MpaRoute
   '/spa': typeof SpaRoute
+  '/mpa/detail': typeof MpaDetailRoute
   '/spa/detail': typeof SpaDetailRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/mpa': typeof MpaRoute
   '/spa': typeof SpaRoute
+  '/mpa_/detail': typeof MpaDetailRoute
   '/spa_/detail': typeof SpaDetailRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/spa' | '/spa/detail'
+  fullPaths: '/' | '/mpa' | '/spa' | '/mpa/detail' | '/spa/detail'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/spa' | '/spa/detail'
-  id: '__root__' | '/' | '/spa' | '/spa_/detail'
+  to: '/' | '/mpa' | '/spa' | '/mpa/detail' | '/spa/detail'
+  id: '__root__' | '/' | '/mpa' | '/spa' | '/mpa_/detail' | '/spa_/detail'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  MpaRoute: typeof MpaRoute
   SpaRoute: typeof SpaRoute
+  MpaDetailRoute: typeof MpaDetailRoute
   SpaDetailRoute: typeof SpaDetailRoute
 }
 
@@ -68,6 +88,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SpaRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/mpa': {
+      id: '/mpa'
+      path: '/mpa'
+      fullPath: '/mpa'
+      preLoaderRoute: typeof MpaRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -82,12 +109,21 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SpaDetailRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/mpa_/detail': {
+      id: '/mpa_/detail'
+      path: '/mpa/detail'
+      fullPath: '/mpa/detail'
+      preLoaderRoute: typeof MpaDetailRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  MpaRoute: MpaRoute,
   SpaRoute: SpaRoute,
+  MpaDetailRoute: MpaDetailRoute,
   SpaDetailRoute: SpaDetailRoute,
 }
 export const routeTree = rootRouteImport
diff --git a/packages/app-tanstack-start-react/src/routes/mpa.tsx b/packages/app-tanstack-start-react/src/routes/mpa.tsx
@@ -0,0 +1,27 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { testData } from '../../../testdata/src/ssr'
+
+export const Route = createFileRoute('/mpa')({
+  component: MpaPage,
+  loader: async () => await testData(),
+})
+
+function MpaPage() {
+  const data = Route.useLoaderData()
+
+  return (
+    <table>
+      <tbody>
+        {data.map((entry) => (
+          <tr key={entry.id}>
+            <td>{entry.id}</td>
+            <td>{entry.name}</td>
+            <td>
+              <a href={`/mpa/detail?id=${entry.id}`}>View →</a>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/packages/app-tanstack-start-react/src/routes/mpa_.detail.tsx b/packages/app-tanstack-start-react/src/routes/mpa_.detail.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/mpa_/detail')({
+  validateSearch: (search) => ({
+    id: typeof search.id === 'string' ? search.id : undefined,
+  }),
+  component: MpaDetailPage,
+})
+
+function MpaDetailPage() {
+  const { id } = Route.useSearch()
+
+  return <p id="detail-id">{id}</p>
+}
