Merge branch 'main' into fix/buildlocation-href-rewrite

Author: leesb971204

docs/router/api/file-based-routing.md

@@ -18,7 +18,6 @@ The following options are available for configuring the file-based routing:
 - [`routeToken`](#routetoken)
 - [`quoteStyle`](#quotestyle)
 - [`semicolons`](#semicolons)
-- [`apiBase`](#apibase)
 - [`autoCodeSplitting`](#autocodesplitting)
 - [`disableTypes`](#disabletypes)
 - [`addExtensions`](#addextensions)

docs/router/framework/react/guide/navigation.md

@@ -185,6 +185,11 @@ By default, all links are absolute unless a `from` route path is provided. This
 
 Relative links can be combined with a `from` route path. If a from route path isn't provided, relative paths default to the current active location.
 
+> [!NOTE]
+> Keep in mind that when calling useNavigate as a method on the route, for example `Route.useNavigate`, then the `from` location is predefined to be the route it's called on.
+>
+> Another common pitfall is when using this in a pathless layout route, since the pathless layout route does not have an actual path, the `from` location is regarded as the parent of the pathless layout route. Hence relative routing will be resolved from this parent.
+
 ```tsx
 const postIdRoute = createRoute({
   path: '/blog/post/$postId',

docs/router/framework/react/guide/ssr.md

@@ -70,9 +70,9 @@ declare module '@tanstack/react-router' {
 
 ### Rendering the Application on the Server
 
-Now that you have a router instance that has loaded all of the critical data for the current URL, you can render your application on the server:
+Now that you have a router instance that has loaded all the critical data for the current URL, you can render your application on the server:
 
-using `defaultRenderToString`
+using `defaultRenderHandler`
 
 ```tsx
 // src/entry-server.tsx
@@ -85,7 +85,7 @@ import { createRouter } from './router'
 export async function render({ request }: { request: Request }) {
   const handler = createRequestHandler({ request, createRouter })
 
-  return await handler(defaultRenderToString)
+  return await handler(defaultRenderHandler)
 }
 ```
 
@@ -144,7 +144,7 @@ With this setup, your application will be rendered on the server and then hydrat
 
 ## Streaming SSR
 
-Streaming SSR is the most modern flavor of SSR and is the process of continuously and incrementally sending HTML markup to the client as it is rendered on the server. This is slightly different from traditional SSR in concept because beyond being able to dehydrate and rehydrate a critical first paint, markup and data with less priority or slower response times can be streamed to the client after the initial render, but in the same request.
+Streaming SSR is the most modern flavor of SSR and is the process of continuously and incrementally sending HTML markup to the client as it is rendered on the server. This is slightly different from traditional SSR in concept because beyond being able to dehydrate and rehydrate a critical first paint, markup and data with lower priority or slower response times can be streamed to the client after the initial render, but in the same request.
 
 This pattern can be useful for pages that have slow or high-latency data fetching requirements. For example, if you have a page that needs to fetch data from a third-party API, you can stream the critical initial markup and data to the client and then stream the less-critical third-party data to the client as it is resolved.
 

docs/start/framework/react/authentication.md

@@ -95,7 +95,7 @@ TanStack Start provides secure HTTP-only cookie sessions:
 
 ```tsx
 // utils/session.ts
-import { useSession } from '@tanstack/react-start'
+import { useSession } from '@tanstack/react-start/server'
 
 type SessionData = {
   userId?: string

docs/start/framework/react/fetching-external-api.md

@@ -61,7 +61,7 @@ At this point, the project structure should look like this:
 │   ├── routeTree.gen.ts                  # Generated route tree
 │   └── styles.css                        # Global styles
 ├── public/                               # Static assets
-├── app.config.ts                         # TanStack Start configuration
+├── vite.config.ts                         # TanStack Start configuration
 ├── package.json                          # Project dependencies
 └── tsconfig.json                         # TypeScript configuration
 

docs/start/framework/react/hosting.md

@@ -37,19 +37,15 @@ Once you've chosen a deployment target, you can follow the deployment guidelines
   </picture>
 </a>
 
-### Cloudflare Workers
-
 When deploying to Cloudflare Workers, you'll need to complete a few extra steps before your users can start using your app.
 
-1. Install `@cloudflare/vite-plugin`
+1. Install `@cloudflare/vite-plugin` and `wrangler`
 
 ```bash
-pnpm install @cloudflare/vite-plugin -D
+pnpm add -D @cloudflare/vite-plugin wrangler
 ```
 
-2. Update `vite.config.ts`
-
-Add the cloudflare plugin to your `vite.config.ts` file.
+2. Add the Cloudflare plugin to your `vite.config.ts` file
 
 ```ts
 // vite.config.ts
@@ -67,42 +63,36 @@ export default defineConfig({
 })
 ```
 
-3. Install `wrangler`
-
-```bash
-pnpm add wrangler -D
-```
-
-4. Add a `wrangler.json` config file
+3. Add a `wrangler.jsonc` config file
 
 ```json
 {
   "$schema": "node_modules/wrangler/config-schema.json",
   "name": "tanstack-start-app",
   "compatibility_date": "2025-09-02",
   "compatibility_flags": ["nodejs_compat"],
-  "main": "@tanstack/react-start/server-entry",
-  "vars": {
-    "MY_VAR": "Hello from Cloudflare"
-  }
+  "main": "@tanstack/react-start/server-entry"
 }
 ```
 
-5. Modify package.json script
+4. Modify the scripts in your `package.json` file
 
 ```json
 {
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && tsc --noEmit",
+    // ============ 👇 remove this line ============
     "start": "node .output/server/index.mjs",
-    // ============ 👇 add this line ============
-    "deploy": "wrangler deploy"
+    // ============ 👇 add these lines ============
+    "preview": "vite preview",
+    "deploy": "wrangler deploy",
+    "cf-typegen": "wrangler types"
   }
 }
 ```
 
-6. Build and deploy
+5. Build and deploy
 
 ```bash
 pnpm run build && pnpm run deploy

docs/start/framework/react/middleware.md

@@ -81,7 +81,7 @@ const loggingMiddleware = createMiddleware().server(async ({ next }) => {
 
 ## Request Middleware
 
-Request middleware is used to customize the behavior of any server request that passes through it, including both server routes and server functions.
+Request middleware is used to customize the behavior of any server request that passes through it, including server routes, SSR and server functions.
 
 To create a request middleware, call the `createMiddleware` function. You may call this function with the `type` property set to 'request', but this is the default value so you can omit it if you'd like.
 
@@ -418,7 +418,7 @@ export const startInstance = createStart(() => {
 ```
 
 > [!NOTE]
-> Global **request** middleware runs before **every request, including both server routes and server functions**.
+> Global **request** middleware runs before **every request, including server routes, SSR and server functions**.
 
 ### Global Server Function Middleware
 

docs/start/framework/react/path-aliases.md

@@ -26,11 +26,11 @@ After updating your `tsconfig.json` file, you'll need to install the `vite-tscon
 npm install -D vite-tsconfig-paths
 ```
 
-Now, you'll need to update your `app.config.ts` file to include the following:
+Now, you'll need to update your `vite.config.ts` file to include the following:
 
 ```ts
-// app.config.ts
-import { defineConfig } from '@tanstack/react-start/config'
+// vite.config.ts
+import { defineConfig } from 'vite'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({

docs/start/framework/react/reading-writing-file.md

@@ -79,7 +79,7 @@ At this point, the project structure should look like this -
 │   ├── ssr.tsx                           # Server-side rendering
 │   └── styles.css                        # Global styles
 ├── public/                               # Static assets
-├── app.config.ts                         # TanStack Start configuration
+├── vite.config.ts                         # TanStack Start configuration
 ├── package.json                          # Project dependencies
 └── tsconfig.json                         # TypeScript configuration
 ```

docs/start/framework/react/server-entry-point.md

@@ -31,7 +31,7 @@ export default {
 }
 ```
 
-Whether we are statically generating our app or serving it dynamically, the `server.ts` file is the entry point for doing all SSR-related work.
+Whether we are statically generating our app or serving it dynamically, the `server.ts` file is the entry point for doing all SSR-related work as well as for handling server routes and server function requests.
 
 ## Custom Server Handlers
 
@@ -42,13 +42,13 @@ You can create custom server handlers to modify how your application is rendered
 import {
   createStartHandler,
   defaultStreamHandler,
+  defineHandlerCallback,
 } from '@tanstack/react-start/server'
 
-// Custom handler example
-const customHandler = (request, response) => {
-  // Add custom logic here
-  return defaultStreamHandler(request, response)
-}
+const customHandler = defineHandlerCallback((ctx) => {
+  // add custom logic here
+  return defaultStreamHandler(ctx)
+})
 
 const fetch = createStartHandler(customHandler)
 
@@ -57,6 +57,35 @@ export default {
 }
 ```
 
+## Request context
+
+When your server needs to pass additional, typed data into request handlers (for example, authenticated user info, a database connection, or per-request flags), register a request context type via TypeScript module augmentation. The registered context is delivered as the second argument to the server `fetch` handler and is available throughout the server-side middleware chain — including global middleware, request/function middleware, server routes, server functions, and the router itself.
+
+To add types for your request context, augment the `Register` interface from `@tanstack/react-start` with a `server.requestContext` property. The runtime `context` you pass to `handler.fetch` will then match that type. Example:
+
+```tsx
+import handler from '@tanstack/react-start/server-entry'
+
+type MyRequestContext = {
+  hello: string
+  foo: number
+}
+
+declare module '@tanstack/react-start' {
+  interface Register {
+    server: {
+      requestContext: MyRequestContext
+    }
+  }
+}
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return handler.fetch(request, { context: { hello: 'world', foo: 123 } })
+  },
+}
+```
+
 ## Server Configuration
 
 The server entry point is where you can configure server-specific behavior: