Repository: TanStack/router
Pull request #2644 (2024-10-26 11:08:36)

feat(react-router): add `preload='render'` support
This is the last preloading strategy which was left to implement.

This option makes it so that a preload will be fired off as soon as the Link component is rendered into the DOM. Once fired, it won't ever fire again unless the component is destroyed.

nx-cloud[bot]: # ☁️ Nx Cloud Report

CI is running for commit 26dfc4fedd54c1f427fbde80d087e1fcc4ebaa17.

[📂 Click to track the progress, see the status, the terminal output, and the build insights.](https://cloud.nx.app/cipes/671ccdcdb326645cb0d4c47c?utm_source=pull-request&utm_medium=comment)


---

Sent with 💌 from [NxCloud.](https://nx.app?utm_source=pull-request&utm_medium=comment)
pkg-pr-new[bot]: 
[Open in Stackblitz](https://pkg.pr.new/template/8073234b-adde-43d2-9093-afd7a7f1a80b)
<details><summary><b>More templates</b></summary><p>

- [tanstack-router-react-example-basic](https://pkg.pr.new/template/35fb1564-06c4-4cd1-9ba7-49dfd272b595)
- [tanstack-router-react-example-authenticated-routes](https://pkg.pr.new/template/c43deb55-e970-45ed-ab8c-9b50fea4d361)
- [tanstack-router-react-example-basic-default-search-params](https://pkg.pr.new/template/f0e6a278-6836-494a-998e-9dcc915e2ddd)
- [tanstack-router-react-example-basic-file-based](https://pkg.pr.new/template/a9cbeadb-95ee-4603-ad32-cb88f86f05be)
- [tanstack-router-react-example-basic-file-based-codesplitting](https://pkg.pr.new/template/81c56ed5-77fc-4301-bb14-d8fd9ac4a566)
- [tanstack-router-react-example-react-query](https://pkg.pr.new/template/58f23b31-e6dd-41cb-9272-77d447fa5712)
- [tanstack-router-react-example-basic-react-query-file-based](https://pkg.pr.new/template/6e786018-363c-4596-9312-95ab491db495)
- [tanstack-router-react-example-basic-ssr-streaming-file-based](https://pkg.pr.new/template/6e599c65-5b42-44ac-9ea7-46da0208a649)
- [tanstack-router-react-example-basic-virtual-file-based](https://pkg.pr.new/template/4fce8191-393e-48b1-ab7d-221ae766372f)
- [tanstack-router-react-example-basic-ssr-file-based](https://pkg.pr.new/template/57cf29e1-3ff8-40ec-89e0-892223379c6e)
- [tanstack-router-react-example-basic-virtual-inside-file-based](https://pkg.pr.new/template/9596c9cd-b8bf-4f32-8d6b-e0e1ed2dc3df)
- [tanstack-router-react-example-deferred-data](https://pkg.pr.new/template/23f2a7c0-31e4-4f00-8eb8-d445b704af41)
- [tanstack-router-react-example-kitchen-sink](https://pkg.pr.new/template/964b771f-8a3c-4bb3-8796-755e7dfd15fe)
- [tanstack-router-react-example-kitchen-sink-file-based](https://pkg.pr.new/template/dbc8519b-204f-4879-a7c4-e46c52b0bd92)
- [tanstack-router-react-example-kitchen-sink-react-query](https://pkg.pr.new/template/bee2cdfd-13b3-4021-9e2c-4796652b63a3)
- [tanstack-router-react-example-kitchen-sink-react-query-file-based](https://pkg.pr.new/template/80db1fdd-293f-49c3-90e3-ee859e14b2b0)
- [tanstack-router-react-example-location-masking](https://pkg.pr.new/template/c12dd3da-bbda-4ae2-9172-b036ef1f3cfe)
- [tanstack-router-react-example-navigation-blocking](https://pkg.pr.new/template/614a0af3-114b-4abe-82f1-660307058fe9)
- [tanstack-router-react-example-large-file-based](https://pkg.pr.new/template/9119cbb3-be0a-4684-bd3d-d6366ea1e679)
- [tanstack-router-react-example-quickstart](https://pkg.pr.new/template/ea27108b-0db2-4d5a-ba18-2127dc860400)
- [tanstack-router-react-example-quickstart-esbuild-file-based](https://pkg.pr.new/template/3e78185d-a163-4abe-9947-11862afa3321)
- [tanstack-router-react-example-quickstart-file-based](https://pkg.pr.new/template/994f30ee-da4a-45cc-a73f-632bb7a24b7f)
- [tanstack-router-react-example-quickstart-rspack-file-based](https://pkg.pr.new/template/f9d16e11-20be-4503-adb6-d408de5954bd)
- [tanstack-router-react-example-quickstart-webpack-file-based](https://pkg.pr.new/template/52201c0c-37fd-4104-a999-5f3f2db45645)
- [router-monorepo-react-query](https://pkg.pr.new/template/7bec1ecd-5d6a-4b70-b24b-b4270e9d208e)
- [router-mono-simple](https://pkg.pr.new/template/78a25e75-28c6-4b21-b3c6-36f15aaed705)
- [tanstack-router-react-example-scroll-restoration](https://pkg.pr.new/template/87ada954-35cb-4c86-b1c0-e8128f88c781)
- [tanstack-router-search-validator-adapters](https://pkg.pr.new/template/cf662e30-3867-47d9-9547-dfe8886f80ce)
- [tanstack-start-example-basic](https://pkg.pr.new/template/0e833de1-9d68-4db6-a4ab-21169e3374b4)
- [tanstack-start-example-basic-auth](https://pkg.pr.new/template/191e8413-3701-4c59-8a98-f3710456e8ea)
- [tanstack-start-example-basic-react-query](https://pkg.pr.new/template/396130af-8e16-4496-9086-5ec3cc75539a)
- [tanstack-start-example-basic-rsc](https://pkg.pr.new/template/1550c9b7-8ac1-451c-adf5-39576613114c)
- [tanstack-start-example-clerk-basic](https://pkg.pr.new/template/38870810-6cd6-4ee3-a4b3-ec831ea79753)
- [tanstack-start-example-counter](https://pkg.pr.new/template/10679aec-9886-43b7-b3c0-cf5306f1ee3a)
- [tanstack-start-example-convex-trellaux](https://pkg.pr.new/template/097fae94-c99a-4068-82ed-5fa58ea8346e)
- [tanstack-start-example-supabase-basic](https://pkg.pr.new/template/b9c3b2e1-efaa-4fd5-886a-c3e8e473b5be)
- [tanstack-start-example-trellaux](https://pkg.pr.new/template/704ad5e0-2078-487b-b59d-a3dfc320a24c)
- [tanstack-router-react-example-with-framer-motion](https://pkg.pr.new/template/41d42f77-47f6-4ecc-b9e9-608b97e2b15d)
- [tanstack-router-react-example-with-trpc](https://pkg.pr.new/template/de2d5c15-b7d0-4205-97a3-d8d5b85c5674)
- [tanstack-router-react-example-with-trpc-react-query](https://pkg.pr.new/template/37c5b340-916a-4513-95e2-ab0e16e98edb)

</p></details>
      
    


<details><summary><b>@tanstack/create-router</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/create-router@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/eslint-plugin-router</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-router@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/react-cross-context</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-router@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/history</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/history@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/react-router-with-query</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-arktype-adapter</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-cli</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-cli@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-devtools</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-devtools@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-generator</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-generator@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-plugin@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-valibot-adapter</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-vite-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/router-zod-adapter</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/start</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/start@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/start-vite-plugin</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2644
```

</p></details>
      
    

<details><summary><b>@tanstack/virtual-file-routes</b></summary><p>

```
pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2644
```

</p></details>
      
    

_commit: <a href="https://github.com/TanStack/router/runs/32101904779"><code>26dfc4f</code></a>_


Patch:
diff --git a/docs/framework/react/api/router/LinkOptionsType.md b/docs/framework/react/api/router/LinkOptionsType.md
index eb34eca80..481a5b4a3 100644
--- a/docs/framework/react/api/router/LinkOptionsType.md
+++ b/docs/framework/react/api/router/LinkOptionsType.md
@@ -33,7 +33,7 @@ The `LinkOptions` object accepts/contains the following properties:
 
 ### `preload`
 
-- Type: `false | 'intent' | 'viewport'`
+- Type: `false | 'intent' | 'viewport' | 'render'`
 - Optional
 - If set, the link's preloading strategy will be set to this value.
 - See the [Preloading guide](../../guide/preloading.md) for more information.
diff --git a/docs/framework/react/api/router/RouterOptionsType.md b/docs/framework/react/api/router/RouterOptionsType.md
index 2b1a41f0e..be87b6b7e 100644
--- a/docs/framework/react/api/router/RouterOptionsType.md
+++ b/docs/framework/react/api/router/RouterOptionsType.md
@@ -46,12 +46,13 @@ The `RouterOptions` type accepts an object with the following properties and met
 
 ### `defaultPreload` property
 
-- Type: `undefined | false | 'intent' | 'viewport'`
+- Type: `undefined | false | 'intent' | 'viewport' | 'render'`
 - Optional
 - Defaults to `false`
 - If `false`, routes will not be preloaded by default in any way.
 - If `'intent'`, routes will be preloaded by default when the user hovers over a link or a `touchstart` event is detected on a `<Link>`.
 - If `'viewport'`, routes will be preloaded by default when they are within the viewport of the browser.
+- If `'render'`, routes will be preloaded by default as soon as they are rendered in the DOM.
 
 ### `defaultPreloadDelay` property
 
diff --git a/docs/framework/react/guide/preloading.md b/docs/framework/react/guide/preloading.md
index ca1c820db..c3221e020 100644
--- a/docs/framework/react/guide/preloading.md
+++ b/docs/framework/react/guide/preloading.md
@@ -13,7 +13,8 @@ Preloading in TanStack Router is a way to load a route before the user actually
   - Preloading by **"viewport**" works by using the Intersection Observer API to preload the dependencies for the destination route when the `<Link>` component is in the viewport.
   - This strategy is useful for preloading routes that are below the fold or off-screen.
 - Render
-  - **Coming soon!**
+  - Preloading by **"render"** works by preloading the dependencies for the destination route as soon as the `<Link>` component is rendered in the DOM.
+  - This strategy is useful for preloading routes that are always needed.
 
 ## How long does preloaded data stay in memory?
 
diff --git a/examples/react/authenticated-routes/package.json b/examples/react/authenticated-routes/package.json
index ff54830ab..badae646e 100644
--- a/examples/react/authenticated-routes/package.json
+++ b/examples/react/authenticated-routes/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
diff --git a/examples/react/basic-file-based-codesplitting/package.json b/examples/react/basic-file-based-codesplitting/package.json
index 32454a6cb..579a0d9b8 100644
--- a/examples/react/basic-file-based-codesplitting/package.json
+++ b/examples/react/basic-file-based-codesplitting/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
diff --git a/examples/react/basic-file-based/package.json b/examples/react/basic-file-based/package.json
index 22b75530d..e54716378 100644
--- a/examples/react/basic-file-based/package.json
+++ b/examples/react/basic-file-based/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
diff --git a/examples/react/basic-react-query-file-based/package.json b/examples/react/basic-react-query-file-based/package.json
index 03a339441..d9b5c2eeb 100644
--- a/examples/react/basic-react-query-file-based/package.json
+++ b/examples/react/basic-react-query-file-based/package.json
@@ -13,7 +13,7 @@
     "@tanstack/react-query-devtools": "^5.59.15",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
diff --git a/examples/react/basic-ssr-file-based/package.json b/examples/react/basic-ssr-file-based/package.json
index 4742b1da2..04d0ebbea 100644
--- a/examples/react/basic-ssr-file-based/package.json
+++ b/examples/react/basic-ssr-file-based/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/router-plugin": "^1.76.4",
+    "@tanstack/start": "^1.76.4",
     "get-port": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-ssr-streaming-file-based/package.json b/examples/react/basic-ssr-streaming-file-based/package.json
index 597baf576..4d1694a5c 100644
--- a/examples/react/basic-ssr-streaming-file-based/package.json
+++ b/examples/react/basic-ssr-streaming-file-based/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/router-plugin": "^1.76.4",
+    "@tanstack/start": "^1.76.4",
     "get-port": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-virtual-file-based/package.json b/examples/react/basic-virtual-file-based/package.json
index f3497c12d..6510d1a32 100644
--- a/examples/react/basic-virtual-file-based/package.json
+++ b/examples/react/basic-virtual-file-based/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@tanstack/virtual-file-routes": "^1.64.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/basic-virtual-inside-file-based/package.json b/examples/react/basic-virtual-inside-file-based/package.json
index f328d5946..cb23a8f8f 100644
--- a/examples/react/basic-virtual-inside-file-based/package.json
+++ b/examples/react/basic-virtual-inside-file-based/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@tanstack/virtual-file-routes": "^1.64.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/kitchen-sink-file-based/package.json b/examples/react/kitchen-sink-file-based/package.json
index 1993e6e8a..3739da58c 100644
--- a/examples/react/kitchen-sink-file-based/package.json
+++ b/examples/react/kitchen-sink-file-based/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/kitchen-sink-react-query-file-based/package.json b/examples/react/kitchen-sink-react-query-file-based/package.json
index 8a774f995..e558e8926 100644
--- a/examples/react/kitchen-sink-react-query-file-based/package.json
+++ b/examples/react/kitchen-sink-react-query-file-based/package.json
@@ -13,7 +13,7 @@
     "@tanstack/react-query-devtools": "^5.59.15",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "immer": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/large-file-based/package.json b/examples/react/large-file-based/package.json
index 078ba1430..78c8b5a1c 100644
--- a/examples/react/large-file-based/package.json
+++ b/examples/react/large-file-based/package.json
@@ -14,7 +14,7 @@
     "@tanstack/react-query": "^5.59.15",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
diff --git a/examples/react/quickstart-esbuild-file-based/package.json b/examples/react/quickstart-esbuild-file-based/package.json
index 423ba6285..c672f0d3a 100644
--- a/examples/react/quickstart-esbuild-file-based/package.json
+++ b/examples/react/quickstart-esbuild-file-based/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
diff --git a/examples/react/quickstart-file-based/package.json b/examples/react/quickstart-file-based/package.json
index e5578c3c9..154af64fd 100644
--- a/examples/react/quickstart-file-based/package.json
+++ b/examples/react/quickstart-file-based/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
diff --git a/examples/react/quickstart-rspack-file-based/package.json b/examples/react/quickstart-rspack-file-based/package.json
index 3f935c4a6..4b1d88a2a 100644
--- a/examples/react/quickstart-rspack-file-based/package.json
+++ b/examples/react/quickstart-rspack-file-based/package.json
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@rsbuild/core": "1.0.16",
     "@rsbuild/plugin-react": "1.0.5",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "typescript": "^5.6.2"
diff --git a/examples/react/quickstart-webpack-file-based/package.json b/examples/react/quickstart-webpack-file-based/package.json
index bc4186980..acca07c39 100644
--- a/examples/react/quickstart-webpack-file-based/package.json
+++ b/examples/react/quickstart-webpack-file-based/package.json
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@swc/core": "^1.7.36",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "html-webpack-plugin": "^5.6.2",
diff --git a/examples/react/router-monorepo-react-query/package.json b/examples/react/router-monorepo-react-query/package.json
index dbe3454fe..36d87bb39 100644
--- a/examples/react/router-monorepo-react-query/package.json
+++ b/examples/react/router-monorepo-react-query/package.json
@@ -14,7 +14,7 @@
     "@tanstack/react-query-devtools": "^5.59.15",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1"
diff --git a/examples/react/router-monorepo-react-query/packages/router/package.json b/examples/react/router-monorepo-react-query/packages/router/package.json
index 1282b3fb7..3c406a3d7 100644
--- a/examples/react/router-monorepo-react-query/packages/router/package.json
+++ b/examples/react/router-monorepo-react-query/packages/router/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.59.15",
     "@tanstack/react-router": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@router-mono-react-query/post-query": "workspace:*",
     "redaxios": "^0.5.1",
     "zod": "^3.23.8",
diff --git a/examples/react/router-monorepo-simple/package.json b/examples/react/router-monorepo-simple/package.json
index 290d41ccb..2f549f931 100644
--- a/examples/react/router-monorepo-simple/package.json
+++ b/examples/react/router-monorepo-simple/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1"
diff --git a/examples/react/router-monorepo-simple/packages/router/package.json b/examples/react/router-monorepo-simple/packages/router/package.json
index 01a31c606..b1df42dcc 100644
--- a/examples/react/router-monorepo-simple/packages/router/package.json
+++ b/examples/react/router-monorepo-simple/packages/router/package.json
@@ -9,7 +9,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "redaxios": "^0.5.1",
     "zod": "^3.23.8",
     "react": "^18.2.0",
diff --git a/examples/react/search-validator-adapters/package.json b/examples/react/search-validator-adapters/package.json
index af599b5e9..2274c58a6 100644
--- a/examples/react/search-validator-adapters/package.json
+++ b/examples/react/search-validator-adapters/package.json
@@ -14,7 +14,7 @@
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-arktype-adapter": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@tanstack/router-valibot-adapter": "^1.76.3",
     "@tanstack/router-zod-adapter": "^1.76.3",
     "arktype": "^2.0.0-rc.17",
diff --git a/examples/react/start-basic-auth/package.json b/examples/react/start-basic-auth/package.json
index 75f16da8f..0b3ae858a 100644
--- a/examples/react/start-basic-auth/package.json
+++ b/examples/react/start-basic-auth/package.json
@@ -13,7 +13,7 @@
     "@prisma/client": "5.21.1",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "dotenv": "^16.4.5",
     "prisma": "^5.21.1",
     "react": "^18.3.1",
diff --git a/examples/react/start-basic-react-query/package.json b/examples/react/start-basic-react-query/package.json
index a6596f61a..00aea68fc 100644
--- a/examples/react/start-basic-react-query/package.json
+++ b/examples/react/start-basic-react-query/package.json
@@ -14,7 +14,7 @@
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/react-router-with-query": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "redaxios": "^0.5.1",
diff --git a/examples/react/start-basic-rsc/package.json b/examples/react/start-basic-rsc/package.json
index 4852018c3..6055eb17e 100644
--- a/examples/react/start-basic-rsc/package.json
+++ b/examples/react/start-basic-rsc/package.json
@@ -12,7 +12,7 @@
     "@babel/plugin-syntax-typescript": "^7.25.7",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.5.4",
     "vinxi": "0.4.3"
diff --git a/examples/react/start-basic/package.json b/examples/react/start-basic/package.json
index c8388768a..54bec4005 100644
--- a/examples/react/start-basic/package.json
+++ b/examples/react/start-basic/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "redaxios": "^0.5.1",
diff --git a/examples/react/start-clerk-basic/package.json b/examples/react/start-clerk-basic/package.json
index 1aaaca132..6cfc82a29 100644
--- a/examples/react/start-clerk-basic/package.json
+++ b/examples/react/start-clerk-basic/package.json
@@ -12,7 +12,7 @@
     "@clerk/tanstack-start": "0.4.15",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "dotenv": "^16.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/examples/react/start-convex-trellaux/package.json b/examples/react/start-convex-trellaux/package.json
index 0e06dcb73..c0161f94a 100644
--- a/examples/react/start-convex-trellaux/package.json
+++ b/examples/react/start-convex-trellaux/package.json
@@ -16,7 +16,7 @@
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/react-router-with-query": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "@convex-dev/react-query": "0.0.0-alpha.7",
     "concurrently": "^8.2.2",
     "convex": "^1.17.0",
diff --git a/examples/react/start-counter/package.json b/examples/react/start-counter/package.json
index efb0dafda..3980a16f8 100644
--- a/examples/react/start-counter/package.json
+++ b/examples/react/start-counter/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vinxi": "0.4.3"
diff --git a/examples/react/start-supabase-basic/package.json b/examples/react/start-supabase-basic/package.json
index 1d58d8cc0..f3aaeb984 100644
--- a/examples/react/start-supabase-basic/package.json
+++ b/examples/react/start-supabase-basic/package.json
@@ -17,7 +17,7 @@
     "@supabase/supabase-js": "^2.45.6",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "@vitejs/plugin-react": "^4.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/examples/react/start-trellaux/package.json b/examples/react/start-trellaux/package.json
index 92ddc5e79..18850d1b5 100644
--- a/examples/react/start-trellaux/package.json
+++ b/examples/react/start-trellaux/package.json
@@ -14,7 +14,7 @@
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/react-router-with-query": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/start": "^1.76.3",
+    "@tanstack/start": "^1.76.4",
     "ky": "^1.7.2",
     "msw": "^2.4.11",
     "react": "^18.3.1",
diff --git a/examples/react/with-trpc-react-query/package.json b/examples/react/with-trpc-react-query/package.json
index 0136bfce5..c5e776986 100644
--- a/examples/react/with-trpc-react-query/package.json
+++ b/examples/react/with-trpc-react-query/package.json
@@ -12,7 +12,7 @@
     "@tanstack/react-query-devtools": "^5.59.15",
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@trpc/client": "11.0.0-rc.593",
     "@trpc/react-query": "11.0.0-rc.593",
     "@trpc/server": "11.0.0-rc.593",
diff --git a/examples/react/with-trpc/package.json b/examples/react/with-trpc/package.json
index cd323c730..bcc7461b8 100644
--- a/examples/react/with-trpc/package.json
+++ b/examples/react/with-trpc/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@tanstack/react-router": "^1.76.3",
     "@tanstack/router-devtools": "^1.76.3",
-    "@tanstack/router-plugin": "^1.76.0",
+    "@tanstack/router-plugin": "^1.76.4",
     "@trpc/client": "11.0.0-rc.593",
     "@trpc/server": "11.0.0-rc.593",
     "react": "^18.2.0",
diff --git a/packages/create-router/package.json b/packages/create-router/package.json
index 74bf1cb77..476f8af96 100644
--- a/packages/create-router/package.json
+++ b/packages/create-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/create-router",
-  "version": "1.76.3",
+  "version": "1.76.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 4d5283e18..3a97ae5a5 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -9,6 +9,7 @@ import {
   functionalUpdate,
   useForwardedRef,
   useIntersectionObserver,
+  useLayoutEffect,
 } from './utils'
 import { exactPathTest, removeTrailingSlash } from './path'
 import type { ParsedLocation } from './location'
@@ -497,7 +498,7 @@ export interface LinkOptionsProps {
    * - `'intent'` - Preload the linked route on hover and cache it for this many milliseconds in hopes that the user will eventually navigate there.
    * - `'viewport'` - Preload the linked route when it enters the viewport
    */
-  preload?: false | 'intent' | 'viewport'
+  preload?: false | 'intent' | 'viewport' | 'render'
   /**
    * When a preload strategy is set, this delays the preload by this many milliseconds.
    * If the user exits the link before this delay, the preload will be cancelled.
@@ -589,6 +590,7 @@ export function useLinkProps<
 ): React.ComponentPropsWithRef<'a'> {
   const router = useRouter()
   const [isTransitioning, setIsTransitioning] = React.useState(false)
+  const hasRenderFetched = React.useRef(false)
   const innerRef = useForwardedRef(forwardedRef)
 
   const {
@@ -722,9 +724,19 @@ export function useLinkProps<
     innerRef,
     preloadViewportIoCallback,
     { rootMargin: '100px' },
-    { disabled: !!disabled || preload !== 'viewport' },
+    { disabled: !!disabled || !(preload === 'viewport') },
   )
 
+  useLayoutEffect(() => {
+    if (hasRenderFetched.current) {
+      return
+    }
+    if (!disabled && preload === 'render') {
+      doPreload()
+      hasRenderFetched.current = true
+    }
+  }, [disabled, doPreload, preload])
+
   if (type === 'external') {
     return {
       ...propsSafeToSpread,
diff --git a/packages/react-router/src/router.ts b/packages/react-router/src/router.ts
index 5e2ae9616..3dda5bece 100644
--- a/packages/react-router/src/router.ts
+++ b/packages/react-router/src/router.ts
@@ -211,7 +211,7 @@ export interface RouterOptions<
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaultpreload-property)
    * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/guide/preloading)
    */
-  defaultPreload?: false | 'intent' | 'viewport'
+  defaultPreload?: false | 'intent' | 'viewport' | 'render'
   /**
    * The delay in milliseconds that a route must be hovered over or touched before it is preloaded.
    *
@@ -1622,7 +1622,7 @@ export class Router<
         })
 
         if (foundMask) {
-          const { from, ...maskProps } = foundMask
+          const { from: _from, ...maskProps } = foundMask
           maskedDest = {
             ...pick(opts, ['from']),
             ...maskProps,
diff --git a/packages/router-plugin/package.json b/packages/router-plugin/package.json
index 803373d9b..fbd72920b 100644
--- a/packages/router-plugin/package.json
+++ b/packages/router-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-plugin",
-  "version": "1.76.0",
+  "version": "1.76.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts
index 96ed3d821..a320a8114 100644
--- a/packages/router-plugin/src/core/code-splitter/compilers.ts
+++ b/packages/router-plugin/src/core/code-splitter/compilers.ts
@@ -406,6 +406,13 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) {
                   ),
                 ]),
               )
+            } else if (t.isVariableDeclarator(splitNode)) {
+              programPath.pushContainer(
+                'body',
+                t.variableDeclaration('const', [
+                  t.variableDeclarator(t.identifier(splitType), splitNode.init),
+                ]),
+              )
             } else if (t.isCallExpression(splitNode)) {
               const outputSplitNodeCode = generate(splitNode).code
               const splitNodeAst = babel.parse(outputSplitNodeCode)
diff --git a/packages/router-vite-plugin/package.json b/packages/router-vite-plugin/package.json
index 8ab9378aa..42e917040 100644
--- a/packages/router-vite-plugin/package.json
+++ b/packages/router-vite-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-vite-plugin",
-  "version": "1.76.0",
+  "version": "1.76.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
diff --git a/packages/start/package.json b/packages/start/package.json
index 4d068ba7b..0fb98dcba 100644
--- a/packages/start/package.json
+++ b/packages/start/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/start",
-  "version": "1.76.3",
+  "version": "1.76.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",


Test patch:
diff --git a/packages/react-router/tests/link.test.tsx b/packages/react-router/tests/link.test.tsx
index 4d2e1d2da..e64c9854b 100644
--- a/packages/react-router/tests/link.test.tsx
+++ b/packages/react-router/tests/link.test.tsx
@@ -3613,7 +3613,7 @@ describe('Link', () => {
     expect(stringifyParamsMock).toHaveBeenCalledWith({ postId: 0 })
   })
 
-  test.each([false, 'intent'] as const)(
+  test.each([false, 'intent', 'render'] as const)(
     'Router.preload="%s", should not trigger the IntersectionObserver\'s observe and disconnect methods',
     async (preload) => {
       const rootRoute = createRootRoute()
@@ -3643,6 +3643,37 @@ describe('Link', () => {
     },
   )
 
+  test.each([false, 'intent', 'viewport', 'render'] as const)(
+    'Router.preload="%s" with Link.preload="false", should not trigger the IntersectionObserver\'s observe method',
+    async (preload) => {
+      const rootRoute = createRootRoute()
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: () => (
+          <>
+            <h1>Index Heading</h1>
+            <Link to="/" preload={false}>
+              Index Link
+            </Link>
+          </>
+        ),
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute]),
+        defaultPreload: preload,
+      })
+
+      render(<RouterProvider router={router} />)
+
+      const indexLink = await screen.findByRole('link', { name: 'Index Link' })
+      expect(indexLink).toBeInTheDocument()
+
+      expect(ioObserveMock).not.toBeCalled()
+    },
+  )
+
   test('Router.preload="viewport", should trigger the IntersectionObserver\'s observe and disconnect methods', async () => {
     const rootRoute = createRootRoute()
     const indexRoute = createRoute({
@@ -3673,32 +3704,44 @@ describe('Link', () => {
     expect(ioDisconnectMock).toBeCalledTimes(1) // since React.StrictMode is enabled it should have disconnected
   })
 
-  test('Router.preload="viewport" with Link.preload="false", should not trigger the IntersectionObserver\'s observe method', async () => {
+  test("Router.preload='render', should trigger the route loader on render", async () => {
+    const mock = vi.fn()
+
     const rootRoute = createRootRoute()
     const indexRoute = createRoute({
       getParentRoute: () => rootRoute,
       path: '/',
+      loader: () => {
+        mock()
+      },
       component: () => (
         <>
           <h1>Index Heading</h1>
-          <Link to="/" preload={false}>
-            Index Link
-          </Link>
+          <Link to="/about">About Link</Link>
+        </>
+      ),
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => (
+        <>
+          <h1>About Heading</h1>
         </>
       ),
     })
 
     const router = createRouter({
-      routeTree: rootRoute.addChildren([indexRoute]),
-      defaultPreload: 'viewport',
+      routeTree: rootRoute.addChildren([aboutRoute, indexRoute]),
+      defaultPreload: 'render',
     })
 
     render(<RouterProvider router={router} />)
 
-    const indexLink = await screen.findByRole('link', { name: 'Index Link' })
-    expect(indexLink).toBeInTheDocument()
+    const aboutLink = await screen.findByRole('link', { name: 'About Link' })
+    expect(aboutLink).toBeInTheDocument()
 
-    expect(ioObserveMock).not.toBeCalled()
+    expect(mock).toHaveBeenCalledTimes(1)
   })
 
   test('Router.preload="intent", pendingComponent renders during unresolved route loader', async () => {
diff --git a/packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx
new file mode 100644
index 000000000..e0859d59e
--- /dev/null
+++ b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx
@@ -0,0 +1,9 @@
+const $$splitComponentImporter = () => import('tsr-split:arrow-function.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+const $$splitLoaderImporter = () => import('tsr-split:arrow-function.tsx?tsr-split');
+import { lazyFn } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/posts')({
+  loader: lazyFn($$splitLoaderImporter, 'loader'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
+});
\ No newline at end of file
diff --git a/packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx
new file mode 100644
index 000000000..1a07e3c31
--- /dev/null
+++ b/packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx
@@ -0,0 +1,29 @@
+import { Link, Outlet } from '@tanstack/react-router';
+import { fetchPosts } from '../posts';
+import { Route } from "arrow-function.tsx";
+const component = () => {
+  const posts = Route.useLoaderData();
+  return <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, {
+        id: 'i-do-not-exist',
+        title: 'Non-existent Post'
+      }]?.map(post => {
+        return <li key={post.id} className="whitespace-nowrap">
+                <Link to="/posts/$postId" params={{
+            postId: post.id
+          }} className="block py-1 text-blue-800 hover:text-blue-600" activeProps={{
+            className: 'text-black font-bold'
+          }}>
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>;
+      })}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>;
+};
+export { component };
+const loader = fetchPosts;
+export { loader };
\ No newline at end of file
diff --git a/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx
new file mode 100644
index 000000000..0328934db
--- /dev/null
+++ b/packages/router-plugin/tests/code-splitter/test-files/arrow-function.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+  component: PostsComponent,
+})
+
+const PostsComponent = () => {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }]?.map(
+          (post) => {
+            return (
+              <li key={post.id} className="whitespace-nowrap">
+                <Link
+                  to="/posts/$postId"
+                  params={{
+                    postId: post.id,
+                  }}
+                  className="block py-1 text-blue-800 hover:text-blue-600"
+                  activeProps={{ className: 'text-black font-bold' }}
+                >
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>
+            )
+          },
+        )}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>
+  )
+}