Refactor: Move core SSR functions into its own packages

examples/react/basic-ssr-file-based/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "tanstack-router-react-example-basic-ssr-file-based",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "node server",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build",
+    "build:server": "vite build --ssr",
+    "serve": "NODE_ENV=production node server",
+    "debug": "node --inspect-brk server"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "^1.121.27",
+    "@tanstack/react-router-ssr": "^1.121.32",
+    "@tanstack/router-plugin": "^1.121.29",
+    "compression": "^1.8.0",
+    "express": "^4.21.2",
+    "get-port": "^7.1.0",
+    "isbot": "^5.1.28",
+    "node-fetch": "^3.3.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-router-devtools": "^1.121.27",
+    "@types/express": "^4.17.23",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.1",
+    "@vitejs/plugin-react": "^4.5.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
+  }
+}

examples/react/basic-ssr-file-based/server.js

@@ -1,6 +1,7 @@
 import path from 'node:path'
 import express from 'express'
 import getPort, { portNumbers } from 'get-port'
+import * as zlib from 'node:zlib'
 
 const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
 
@@ -38,9 +39,18 @@ export async function createServer(
     // use vite's connect instance as middleware
     app.use(vite.middlewares)
   } else {
-    app.use((await import('compression')).default())
+    app.use(
+      (await import('compression')).default({
+        brotli: {
+          flush: zlib.constants.BROTLI_OPERATION_FLUSH,
+        },
+        flush: zlib.constants.Z_SYNC_FLUSH,
+      }),
+    )
   }
 
+  if (isProd) app.use(express.static('./dist/client'))
+
   app.use('*', async (req, res) => {
     try {
       const url = req.originalUrl

examples/react/basic-ssr-file-based/src/entry-client.tsx

@@ -1,8 +1,7 @@
 import { hydrateRoot } from 'react-dom/client'
-
-import { StartClient } from '@tanstack/react-start'
+import { RouterClient } from '@tanstack/react-router-ssr/client'
 import { createRouter } from './router'
 
 const router = createRouter()
 
-hydrateRoot(document, <StartClient router={router} />)
+hydrateRoot(document, <RouterClient router={router} />)

examples/react/basic-ssr-file-based/src/entry-server.tsx

@@ -1,8 +1,9 @@
 import { pipeline } from 'node:stream/promises'
 import {
+  RouterServer,
   createRequestHandler,
-  defaultStreamHandler,
-} from '@tanstack/react-start/server'
+  renderRouterToString,
+} from '@tanstack/react-router-ssr/server'
 import { createRouter } from './router'
 import type express from 'express'
 import './fetch-polyfill'
@@ -18,6 +19,7 @@ export async function render({
 }) {
   // Convert the express request to a fetch request
   const url = new URL(req.originalUrl || req.url, 'https://localhost:3000').href
+
   const request = new Request(url, {
     method: req.method,
     headers: (() => {
@@ -47,11 +49,18 @@ export async function render({
   })
 
   // Let's use the default stream handler to create the response
-  const response = await handler(defaultStreamHandler)
+  const response = await handler(({ responseHeaders, router }) =>
+    renderRouterToString({
+      responseHeaders,
+      router,
+      children: <RouterServer router={router} />,
+    }),
+  )
 
   // Convert the fetch response back to an express response
   res.statusMessage = response.statusText
   res.status(response.status)
+
   response.headers.forEach((value, name) => {
     res.setHeader(name, value)
   })