feat: prerender with vite preview server (#5921)

Author: edmundhung

e2e/react-start/basic-cloudflare/package.json

@@ -20,7 +20,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@cloudflare/vite-plugin": "^1.13.7",
+    "@cloudflare/vite-plugin": "^1.15.1",
     "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4.1.15",
     "@tanstack/router-e2e-utils": "workspace:^",
@@ -33,6 +33,6 @@
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
-    "wrangler": "^4.40.2"
+    "wrangler": "^4.49.1"
   }
 }

e2e/react-start/basic-cloudflare/src/routeTree.gen.ts

@@ -9,8 +9,14 @@
 // 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 StaticRouteImport } from './routes/static'
 import { Route as IndexRouteImport } from './routes/index'
 
+const StaticRoute = StaticRouteImport.update({
+  id: '/static',
+  path: '/static',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
@@ -19,28 +25,39 @@ const IndexRoute = IndexRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/static': typeof StaticRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/static': typeof StaticRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/static': typeof StaticRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: '/' | '/static'
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: '/' | '/static'
+  id: '__root__' | '/' | '/static'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  StaticRoute: typeof StaticRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/static': {
+      id: '/static'
+      path: '/static'
+      fullPath: '/static'
+      preLoaderRoute: typeof StaticRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -53,6 +70,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  StaticRoute: StaticRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

e2e/react-start/basic-cloudflare/src/routes/static.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { env } from 'cloudflare:workers'
+
+export const Route = createFileRoute('/static')({
+  loader: () => getData(),
+  component: StaticPage,
+})
+
+const getData = createServerFn().handler(() => {
+  return {
+    myVar: env.MY_VAR,
+  }
+})
+
+function StaticPage() {
+  const data = Route.useLoaderData()
+
+  return (
+    <div>
+      <h1 data-testid="static-heading">Static Page</h1>
+      <p data-testid="static-content">The value is {data.myVar}</p>
+    </div>
+  )
+}

e2e/react-start/basic-cloudflare/tests/app.spec.ts

@@ -1,3 +1,5 @@
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
 import { expect } from '@playwright/test'
 import { test } from '@tanstack/router-e2e-utils'
 
@@ -14,3 +16,16 @@ test('returns the correct value from a Cloudflare binding', async ({
   await page.goto('/')
   await expect(page.getByTestId('myVar')).toHaveText('Hello from Cloudflare')
 })
+
+test('prerender with Cloudflare Workers runtime', async ({ page }) => {
+  // Verify the static page was prerendered during build
+  const distDir = join(process.cwd(), 'dist', 'client')
+  expect(existsSync(join(distDir, 'static', 'index.html'))).toBe(true)
+
+  // Verify the page loads correctly
+  await page.goto('/static')
+  await expect(page.getByTestId('static-heading')).toHaveText('Static Page')
+  await expect(page.getByTestId('static-content')).toHaveText(
+    'The value is Hello from Cloudflare',
+  )
+})

e2e/react-start/basic-cloudflare/vite.config.ts

@@ -10,7 +10,12 @@ export default defineConfig({
       projects: ['./tsconfig.json'],
     }),
     cloudflare({ viteEnvironment: { name: 'ssr' }, inspectorPort: false }),
-    tanstackStart(),
+    tanstackStart({
+      prerender: {
+        enabled: true,
+        filter: (page) => page.path === '/static',
+      },
+    }),
     viteReact(),
   ],
 })