fix: reduce start SSR manifest asset duplication (#7157)

Co-authored-by: schiller-manuel <schiller-manuel@users.noreply.github.com>
Co-authored-by: nx-cloud[bot] <71083854+nx-cloud[bot]@users.noreply.github.com>

Author: schiller-manuel

.changeset/cyan-camels-dance.md

@@ -0,0 +1,9 @@
+---
+'@tanstack/router-core': patch
+'@tanstack/start-plugin-core': patch
+'@tanstack/start-server-core': patch
+---
+
+Reduce React Start SSR manifest payload size by omitting unmatched route assets from dehydrated router state while keeping start-manifest asset serialization deduplicated by shared object identity.
+
+This improves SSR HTML size for apps with many routes that share the same CSS assets and adds regression coverage for CSS module hydration, navigation, and start-manifest asset reuse.

e2e/react-start/start-manifest/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "tanstack-react-start-e2e-start-manifest",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "vite build && tsc --noEmit",
+    "start": "node .output/server/index.mjs",
+    "test:e2e": "playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "workspace:^",
+    "@tanstack/react-start": "workspace:^",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "nitro": "^3.0.260311-beta",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.0"
+  },
+  "nx": {
+    "targets": {
+      "test:e2e": {
+        "parallelism": false
+      }
+    }
+  }
+}

e2e/react-start/start-manifest/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+  reporter: [['line']],
+
+  use: {
+    baseURL,
+  },
+
+  webServer: {
+    command: `PORT=${PORT} pnpm build && PORT=${PORT} pnpm start`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

e2e/react-start/start-manifest/src/components/AppShell.tsx

@@ -0,0 +1,33 @@
+import { ClientOnly, Link, Outlet, linkOptions } from '@tanstack/react-router'
+import styles from '~/styles/root-shell.module.css'
+
+const ROUTES = linkOptions([
+  { to: '/', label: 'home' },
+  { to: '/r1', label: '/r1' },
+  { to: '/r2', label: '/r2' },
+  { to: '/shared-a', label: '/shared-a' },
+])
+
+export function AppShell() {
+  return (
+    <div className={styles.shell}>
+      <nav className={styles.nav}>
+        {ROUTES.map((route) => (
+          <Link key={route.to} {...route} data-testid={`nav-${route.label}`}>
+            {route.label}
+          </Link>
+        ))}
+      </nav>
+
+      <main className={styles.content}>
+        <div className={styles.rootBadge} data-testid="root-shell-marker">
+          Start manifest CSS root shell
+        </div>
+        <ClientOnly>
+          <div data-testid="hydration-marker">hydrated</div>
+        </ClientOnly>
+        <Outlet />
+      </main>
+    </div>
+  )
+}

e2e/react-start/start-manifest/src/components/SharedNestedLayout.tsx

@@ -0,0 +1,29 @@
+import { Link, linkOptions } from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+import styles from '~/styles/shared-layout.module.css'
+
+const SHARED_ROUTES = linkOptions([
+  { to: '/shared-a', label: '/shared-a' },
+  { to: '/shared-b', label: '/shared-b' },
+  { to: '/shared-c', label: '/shared-c' },
+])
+
+export function SharedNestedLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className={styles.layout} data-testid="shared-layout-shell">
+      <div className={styles.heading} data-testid="shared-layout-heading">
+        Shared nested layout CSS module
+      </div>
+      <nav>
+        {SHARED_ROUTES.map((route) => (
+          <Link key={route.to} {...route} data-testid={`nav-${route.label}`}>
+            {route.label}
+          </Link>
+        ))}
+      </nav>
+      <div className={styles.body} data-testid="shared-layout-copy">
+        {children}
+      </div>
+    </section>
+  )
+}