diff --git a/docs/guide/data-loading.md b/docs/guide/data-loading.md
index 9d06a0ba76..ac5209cc80 100644
--- a/docs/guide/data-loading.md
+++ b/docs/guide/data-loading.md
@@ -6,13 +6,13 @@ Data loading is a common concern for web applications and is extremely related t
 
 You may be familiar with `getServerSideProps` from Next.js or or `loaders` from Remix/React-Router. Both of these APIs assumes that **the router will store and manage your data**. This approach is great for use cases covered by both of those libraries, but TanStack Router is designed to function a bit differently than you're used to. Let's dig in!
 
-## TanStack Router **does not store your data**.
+## TanStack Router **should not store your data**.
 
-Most routers that support data fetching will store the data for you in memory on the client. This is fine, but puts a large responsibility and stress on the router to handle [many cross-cutting and complex challenges that come with managing server-data, client-side caches and mutations](https://tanstack.com/query/latest/docs/react/overview#motivation).
+Most routers that support data fetching will store and manage the data for you as you navigate. This is fine, but puts a large responsibility and stress on the router to handle [many cross-cutting and complex challenges that come with managing server-data, client-side caches and mutations](https://tanstack.com/query/latest/docs/react/overview#motivation).
 
 ## TanStack Router **orchestrates your data fetching**.
 
-Instead of storing your data, TanStack Router is designed to **coordinate** your data fetching. This means that you can use any data fetching library you want, and the router will coordinate the fetching of your data in a way that aligns with your users' navigation.
+Instead of storing and managing your data, TanStack Router is designed to **coordinate** your data fetching. This means that you can use any data fetching library you want, and the router will coordinate the fetching of your data in a way that aligns with your users' navigation.
 
 ## What data fetching libraries are supported?
 
diff --git a/docs/guide/route-paths.md b/docs/guide/route-paths.md
index dcbbb5e4fb..1a42dabd5b 100644
--- a/docs/guide/route-paths.md
+++ b/docs/guide/route-paths.md
@@ -95,9 +95,7 @@ const userRoute = new Route({
   path: '$userId',
 })
 
-const routeConfig = rootRoute.addChildren([
-  usersRoute.addChildren([userRoute])
-])
+const routeConfig = rootRoute.addChildren([usersRoute.addChildren([userRoute])])
 ```
 
 Dynamic segments can be accessed via the `params` object using the label you provided as the property key. For example, a path of `/users/$userId` would produce a `userId` param of `123` for the path `/users/123/details`:
@@ -179,4 +177,18 @@ In the above example, the `layout` route will not add or match any path in the U
 
 > 🧠 An ID is required because every route must be uniquely identifiable, especially when using TypeScript so as to avoid type errors and accomplish autocomplete effectively.
 
+## Identifying Routes via Search Params
+
+Search Params by default are not used to identify matching paths mostly because they are extremely flexible, flat and can contain a lot of unrelated data to your actual route definition. However, in some cases you may choose to use them to uniquely identify a route match. For example, you may want to use a search param to identify a specific user in your application, you might model your url like this: `/user?userId=123`. This means that in your `user` route would need some extra help to identify a specific user. You can do this by adding a `getKey` function to your route:
+
+```tsx
+const userRoute = new Route({
+  getParentRoute: () => usersRoute,
+  path: 'user',
+  getKey: ({ search }) => search.userId,
+})
+```
+
+---
+
 Route paths are just the beginning of what you can do with route configuration. We'll explore more of those features later on.
diff --git a/docs/guide/router-context.md b/docs/guide/router-context.md
index 05cf9f55a4..eae7584e35 100644
--- a/docs/guide/router-context.md
+++ b/docs/guide/router-context.md
@@ -183,7 +183,7 @@ const rootRoute = RootRoute({
   component: () => {
     const router = useRouter()
 
-    const breadcrumbs = router.state.currentMatches.map((match) => {
+    const breadcrumbs = router.state.matches.map((match) => {
       const { routeContext } = match
       return {
         title: routeContext.getTitle(),
@@ -203,7 +203,7 @@ const rootRoute = RootRoute({
   component: () => {
     const router = useRouter()
 
-    const matchWithTitle = [...router.state.currentMatches]
+    const matchWithTitle = [...router.state.matches]
       .reverse()
       .find((d) => d.routeContext.getTitle)
 
diff --git a/docs/guide/search-params.md b/docs/guide/search-params.md
index 34603f6924..78439d80e8 100644
--- a/docs/guide/search-params.md
+++ b/docs/guide/search-params.md
@@ -243,11 +243,8 @@ const ProductList = () => {
 
 You can access your route's validated search params anywhere in your app using:
 
-- `router.state.currentLocation.state`
-- `router.state.pendingLocation.state`
-- `router.state.latestLocation.state`
-
-Each one represent different states of the router. `currentLocation` is the current location of the router, `pendingLocation` is the location that the router is transitioning to, and `latestLocation` is most up-to-date representation of the location that the router has synced from the URL.
+- `router.state.location.state` - The most up-to-date location of the router, regardless of loading state.
+- `router.state.currentLocation.state` - The latest **loaded/resolved** location. This location is only set after a navigation has completed.
 
 ## Writing Search Params
 
diff --git a/examples/react/basic-ssr-streaming/package.json b/examples/react/basic-ssr-streaming/package.json
index a996a56624..e1f11b8481 100644
--- a/examples/react/basic-ssr-streaming/package.json
+++ b/examples/react/basic-ssr-streaming/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tanstack/react-loaders": "0.0.1-beta.105",
+    "@tanstack/react-start": "0.0.1-beta.96",
     "@tanstack/router": "0.0.1-beta.104",
     "@tanstack/router-devtools": "0.0.1-beta.104",
     "@tanstack/router-cli": "0.0.1-beta.69",
diff --git a/examples/react/basic-ssr-streaming/src/entry-client.tsx b/examples/react/basic-ssr-streaming/src/entry-client.tsx
index 6066f1e69a..c45d518ab3 100644
--- a/examples/react/basic-ssr-streaming/src/entry-client.tsx
+++ b/examples/react/basic-ssr-streaming/src/entry-client.tsx
@@ -1,20 +1,10 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import { App } from '.'
-import { router } from './router'
-import { loaderClient } from './loaderClient'
+import { StartClient } from '@tanstack/react-start/client'
+import { createRouter } from './router'
 
-const { dehydratedRouter, dehydratedLoaderClient } = (window as any)
-  .__TSR_DEHYDRATED__
+const router = createRouter()
+router.hydrate()
 
-// Hydrate the loader client first
-loaderClient.hydrate(dehydratedLoaderClient)
-
-// Hydrate the router next
-router.hydrate(dehydratedRouter)
-
-ReactDOM.hydrateRoot(
-  document,
-  <App router={router} loaderClient={loaderClient} head={''} />,
-)
+ReactDOM.hydrateRoot(document, <StartClient router={router} />)
diff --git a/examples/react/basic-ssr-streaming/src/entry-server.tsx b/examples/react/basic-ssr-streaming/src/entry-server.tsx
index ea948bcb54..41bf127728 100644
--- a/examples/react/basic-ssr-streaming/src/entry-server.tsx
+++ b/examples/react/basic-ssr-streaming/src/entry-server.tsx
@@ -1,74 +1,39 @@
 import * as React from 'react'
 import ReactDOMServer from 'react-dom/server'
-import { createMemoryHistory, Router, RouterProvider } from '@tanstack/router'
+import { createMemoryHistory } from '@tanstack/router'
+import { StartServer } from '@tanstack/react-start/server'
 import isbot from 'isbot'
-import jsesc from 'jsesc'
 import { ServerResponse } from 'http'
 import express from 'express'
 
 // index.js
-import '../src-old/fetch-polyfill'
-import { createLoaderClient } from './loaderClient'
-import { routeTree } from './routeTree'
+import './fetch-polyfill'
+import { createRouter } from './router'
 
-async function getRouter(opts: { url: string }) {
-  const loaderClient = createLoaderClient()
-
-  const router = new Router({
-    routeTree: routeTree,
-    context: {
-      loaderClient,
-    },
-  })
+export async function render(opts: {
+  url: string
+  head: string
+  req: express.Request
+  res: ServerResponse
+}) {
+  const router = createRouter()
 
   const memoryHistory = createMemoryHistory({
     initialEntries: [opts.url],
   })
 
+  // Update the history and context
   router.update({
     history: memoryHistory,
+    context: {
+      ...router.context,
+      head: opts.head,
+    },
   })
 
-  return { router, loaderClient }
-}
-
-export async function render(opts: {
-  url: string
-  head: string
-  req: express.Request
-  res: ServerResponse
-}) {
-  const { router, loaderClient } = await getRouter(opts)
-
-  // ssrFooter: () => {
-  //   // After the router has been fully loaded, serialize its
-  //   // state right into the HTML. This way, the client can
-  //   // hydrate the router with the same state that the server
-  //   // used to render the HTML.
-  //   const routerState = router.dehydrate()
-  //   return (
-  //     <>
-  //       <script
-  //         suppressHydrationWarning
-  //         dangerouslySetInnerHTML={{
-  //           __html: `
-  //             window.__TANSTACK_DEHYDRATED_ROUTER__ = JSON.parse(${jsesc(
-  //               JSON.stringify(routerState),
-  //               {
-  //                 isScriptContext: true,
-  //                 wrap: true,
-  //                 json: true,
-  //               },
-  //             )})
-  //           `,
-  //         }}
-  //       ></script>
-  //     </>
-  //   )
-  // },
-
-  // Kick off the router loading sequence, but don't wait for it to finish
-  router.load()
+  // Wait for the router to load critical data
+  // (streamed data will continue to load in the background)
+  await router.load()
 
   // Track errors
   let didError = false
@@ -79,11 +44,7 @@ export async function render(opts: {
     : 'onShellReady'
 
   const stream = ReactDOMServer.renderToPipeableStream(
-    <RouterProvider
-      router={router}
-      loaderClient={loaderClient}
-      head={opts.head}
-    />,
+    <StartServer router={router} />,
     {
       [callbackName]: () => {
         opts.res.statusCode = didError ? 500 : 200
diff --git a/examples/react/basic-ssr-streaming/src/loaderClient.tsx b/examples/react/basic-ssr-streaming/src/loaderClient.tsx
index b64231a14d..0b0635e4f5 100644
--- a/examples/react/basic-ssr-streaming/src/loaderClient.tsx
+++ b/examples/react/basic-ssr-streaming/src/loaderClient.tsx
@@ -1,49 +1,13 @@
-import { Loader, LoaderClient } from '@tanstack/react-loaders'
-
-export type PostType = {
-  id: string
-  title: string
-  body: string
-}
-
-export const postsLoader = new Loader({
-  fn: async () => {
-    console.log('Fetching posts...')
-    await new Promise((r) =>
-      setTimeout(r, 300 + Math.round(Math.random() * 300)),
-    )
-    return fetch('https://jsonplaceholder.typicode.com/posts')
-      .then((d) => d.json() as Promise<PostType[]>)
-      .then((d) => d.slice(0, 10))
-  },
-})
-
-export const postLoader = new Loader({
-  fn: async (postId: string) => {
-    console.log(`Fetching post with id ${postId}...`)
-
-    await new Promise((r) => setTimeout(r, Math.round(Math.random() * 300)))
-
-    return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(
-      (r) => r.json() as Promise<PostType>,
-    )
-  },
-  onInvalidate: async () => {
-    await postsLoader.invalidate()
-  },
-})
+import { LoaderClient } from '@tanstack/react-loaders'
+import { postsLoader } from './routes/posts'
+import { postLoader } from './routes/posts/$postId'
 
 export const createLoaderClient = () => {
   return new LoaderClient({
-    getLoaders: () => ({
-      postsLoader,
-      postLoader,
-    }),
+    getLoaders: () => ({ postsLoader, postLoader }),
   })
 }
 
-export const loaderClient = createLoaderClient()
-
 // Register things for typesafety
 declare module '@tanstack/react-loaders' {
   interface Register {
diff --git a/examples/react/basic-ssr-streaming/src/routeTree.ts b/examples/react/basic-ssr-streaming/src/routeTree.ts
deleted file mode 100644
index 733adcb53d..0000000000
--- a/examples/react/basic-ssr-streaming/src/routeTree.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { rootRoute } from './routes/__root'
-import { indexRoute } from './routes/index'
-import { postsRoute } from './routes/posts'
-import { postsIndexRoute } from './routes/posts/index'
-import { postIdRoute } from './routes/posts/$postId'
-
-export const routeTree = rootRoute.addChildren([
-  indexRoute,
-  postsRoute.addChildren([postsIndexRoute, postIdRoute]),
-])
diff --git a/examples/react/basic-ssr-streaming/src/router.tsx b/examples/react/basic-ssr-streaming/src/router.tsx
index 98fff160eb..5dd5e42baf 100644
--- a/examples/react/basic-ssr-streaming/src/router.tsx
+++ b/examples/react/basic-ssr-streaming/src/router.tsx
@@ -1,21 +1,57 @@
-import { RegisteredLoaderClient } from '@tanstack/react-loaders'
 import { Router } from '@tanstack/router'
-import { loaderClient } from './loaderClient'
-import { routeTree } from './routeTree'
+import { LoaderClientProvider } from '@tanstack/react-loaders'
 
-export interface RouterContext {
-  loaderClient: RegisteredLoaderClient
+import { rootRoute } from './routes/root'
+import { indexRoute } from './routes/index'
+import { postsRoute } from './routes/posts'
+import { postsIndexRoute } from './routes/posts/index'
+import { postIdRoute } from './routes/posts/$postId'
+
+import { createLoaderClient } from './loaderClient'
+import React from 'react'
+
+export type RouterContext = {
+  loaderClient: ReturnType<typeof createLoaderClient>
+  head: string
 }
 
-export const router = new Router({
-  routeTree,
-  context: {
-    loaderClient,
-  },
-})
+export const routeTree = rootRoute.addChildren([
+  indexRoute,
+  postsRoute.addChildren([postsIndexRoute, postIdRoute]),
+])
+
+export function createRouter() {
+  const loaderClient = createLoaderClient()
+
+  return new Router({
+    routeTree,
+    context: {
+      loaderClient,
+      head: '',
+    },
+    // On the server, dehydrate the loader client
+    dehydrate: () => {
+      return {
+        loaderClient: loaderClient.dehydrate(),
+      }
+    },
+    // On the client, rehydrate the loader client
+    hydrate: (dehydrated) => {
+      loaderClient.hydrate(dehydrated.loaderClient)
+    },
+    // Wrap our router in the loader client provider
+    Wrap: ({ children }) => {
+      return (
+        <LoaderClientProvider loaderClient={loaderClient}>
+          {children}
+        </LoaderClientProvider>
+      )
+    },
+  })
+}
 
 declare module '@tanstack/router' {
   interface Register {
-    router: typeof router
+    router: ReturnType<typeof createRouter>
   }
 }
diff --git a/examples/react/basic-ssr-streaming/src/routes/__root.tsx b/examples/react/basic-ssr-streaming/src/routes/__root.tsx
deleted file mode 100644
index af9354a75c..0000000000
--- a/examples/react/basic-ssr-streaming/src/routes/__root.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import * as React from 'react'
-import { Link, Outlet, RootRoute, useRouter } from '@tanstack/router'
-import { RouterContext } from '../router'
-import { useHead } from '../head'
-
-export const rootRoute = RootRoute.withRouterContext<RouterContext>()({
-  component: Root,
-})
-
-function Root() {
-  const head = useHead()
-  const router = useRouter()
-  // This is weak sauce, but it's just an example.
-  // In the future, we'll make meta an official thing
-  // and make it async as well to support data
-  const titleMatch = [...router.state.currentMatches]
-    .reverse()
-    .find((d) => d.context?.title)
-
-  return (
-    <html lang="en">
-      <React.StrictMode>
-        <head>
-          <meta charSet="UTF-8" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
-          <title>{titleMatch ? titleMatch.context?.title : 'Vite App'}</title>
-          <script src="https://cdn.tailwindcss.com"></script>
-          <script
-            suppressHydrationWarning
-            dangerouslySetInnerHTML={{
-              __html: `</script>
-              ${head}
-            <script>`,
-            }}
-          />
-        </head>
-        <body>
-          <div className="p-2 flex gap-2 text-lg">
-            <Link
-              to="/"
-              activeProps={{
-                className: 'font-bold',
-              }}
-              activeOptions={{ exact: true }}
-            >
-              Home
-            </Link>{' '}
-            <Link
-              to="/posts"
-              activeProps={{
-                className: 'font-bold',
-              }}
-            >
-              Posts
-            </Link>
-          </div>
-          <hr />
-          <Outlet /> {/* Start rendering router matches */}
-          <TanStackRouterDevtools position="bottom-right" />
-          <script type="module" src="/src/entry-client.tsx"></script>
-        </body>
-      </React.StrictMode>
-    </html>
-  )
-}
diff --git a/examples/react/basic-ssr-streaming/src/routes/index.tsx b/examples/react/basic-ssr-streaming/src/routes/index.tsx
index 7e9ac4067a..aa5828571b 100644
--- a/examples/react/basic-ssr-streaming/src/routes/index.tsx
+++ b/examples/react/basic-ssr-streaming/src/routes/index.tsx
@@ -1,6 +1,6 @@
 import { Route } from '@tanstack/router'
 import * as React from 'react'
-import { rootRoute } from './__root'
+import { rootRoute } from './root'
 
 export const indexRoute = new Route({
   getParentRoute: () => rootRoute,
diff --git a/examples/react/basic-ssr-streaming/src/routes/posts.tsx b/examples/react/basic-ssr-streaming/src/routes/posts.tsx
index 72fc4b7bb2..467cf61357 100644
--- a/examples/react/basic-ssr-streaming/src/routes/posts.tsx
+++ b/examples/react/basic-ssr-streaming/src/routes/posts.tsx
@@ -1,49 +1,74 @@
 import * as React from 'react'
 import { Link, Outlet, Route } from '@tanstack/router'
-import { rootRoute } from './__root'
-import { useLoader } from '@tanstack/react-loaders'
+import { rootRoute } from './root'
+// import { loaderClient } from '../entry-client'
+import { Loader } from '@tanstack/react-loaders'
 import { postIdRoute } from './posts/$postId'
-import { postsLoader } from '../loaderClient'
+
+export type PostType = {
+  id: string
+  title: string
+  body: string
+}
+
+export const postsLoader = new Loader({
+  fn: async () => {
+    console.log('Fetching posts...')
+    await new Promise((r) =>
+      setTimeout(r, 500 + Math.round(Math.random() * 300)),
+    )
+
+    return fetch('https://jsonplaceholder.typicode.com/posts')
+      .then((d) => d.json() as Promise<PostType[]>)
+      .then((d) => d.slice(0, 10))
+  },
+})
+
+const testLoader = new Loader({
+  fn: async () => {
+    await new Promise((r) => setTimeout(r, 3000))
+    return {
+      test: true,
+    }
+  },
+})
 
 export const postsRoute = new Route({
   getParentRoute: () => rootRoute,
   path: 'posts',
-  component: Posts,
-  errorComponent: () => 'Oh crap',
-  getContext: () => ({
-    title: 'Posts',
-  }),
-  loader: ({ context, preload }) =>
-    context.loaderClient.loaders.postsLoader.load({ preload }),
-})
-
-function Posts() {
-  const {
-    state: { data: posts },
-  } = useLoader({ loader: postsLoader })
+  loader: async ({ context, preload }) => {
+    const { postsLoader } = context.loaderClient.loaders
+    await postsLoader.load({ preload })
+    return () => postsLoader.useLoader()
+  },
+  component: function Posts({ useLoader }) {
+    const {
+      state: { data: posts },
+    } = useLoader()()
 
-  return (
-    <div className="p-2 flex gap-2">
-      <ul className="list-disc pl-4">
-        {posts?.map((post) => {
-          return (
-            <li key={post.id} className="whitespace-nowrap">
-              <Link
-                to={postIdRoute.to}
-                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>
-  )
-}
+    return (
+      <div className="p-2 flex gap-2">
+        <ul className="list-disc pl-4">
+          {posts?.map((post) => {
+            return (
+              <li key={post.id} className="whitespace-nowrap">
+                <Link
+                  to={postIdRoute.to}
+                  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>
+    )
+  },
+})
diff --git a/examples/react/basic-ssr-streaming/src/routes/posts/$postId.tsx b/examples/react/basic-ssr-streaming/src/routes/posts/$postId.tsx
index b20ade31d1..25075957ca 100644
--- a/examples/react/basic-ssr-streaming/src/routes/posts/$postId.tsx
+++ b/examples/react/basic-ssr-streaming/src/routes/posts/$postId.tsx
@@ -1,32 +1,43 @@
-import { useLoader } from '@tanstack/react-loaders'
-import { Route, RouteComponent, useParams } from '@tanstack/router'
+import { Loader } from '@tanstack/react-loaders'
+import { Route } from '@tanstack/router'
 import * as React from 'react'
 // import { loaderClient } from '../../entry-client'
-import { postsRoute } from '../posts'
+import { postsLoader, postsRoute, PostType } from '../posts'
+
+export const postLoader = new Loader({
+  fn: async (postId: string) => {
+    console.log(`Fetching post with id ${postId}...`)
+
+    await new Promise((r) =>
+      setTimeout(r, 1000 + Math.round(Math.random() * 300)),
+    )
+
+    return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(
+      (r) => r.json() as Promise<PostType>,
+    )
+  },
+  onInvalidate: async () => {
+    await postsLoader.invalidate()
+  },
+})
 
 export const postIdRoute = new Route({
   getParentRoute: () => postsRoute,
   path: '$postId',
-  loader: async ({
-    context: { loaderClient },
-    params: { postId },
-    preload,
-  }) => {
-    const { postLoader } = loaderClient.loaders
-
-    await postLoader.load({
+  loader: async ({ context, params: { postId }, preload }) => {
+    const { postLoader } = context.loaderClient.loaders
+
+    const instance = postLoader.getInstance({
       variables: postId,
+    })
+
+    await instance.load({
       preload,
     })
 
-    // Return a curried hook!
-    return () =>
-      useLoader({
-        loader: postLoader,
-        variables: postId,
-      })
+    return () => instance.useInstance()
   },
-  component: ({ useLoader }) => {
+  component: function Post({ useLoader }) {
     const {
       state: { data: post },
     } = useLoader()()
diff --git a/examples/react/basic-ssr-streaming/src/routes/root.tsx b/examples/react/basic-ssr-streaming/src/routes/root.tsx
new file mode 100644
index 0000000000..189c079586
--- /dev/null
+++ b/examples/react/basic-ssr-streaming/src/routes/root.tsx
@@ -0,0 +1,62 @@
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+import * as React from 'react'
+import { Link, Outlet, RootRoute } from '@tanstack/router'
+import { RouterContext } from '../router'
+import { RouterScripts } from '@tanstack/react-start/client'
+
+export const rootRoute = RootRoute.withRouterContext<RouterContext>()({
+  component: Root,
+})
+
+function Root() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+        <script src="https://cdn.tailwindcss.com" />
+        <script
+          type="module"
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: `
+              import RefreshRuntime from "/@react-refresh"
+              RefreshRuntime.injectIntoGlobalHook(window)
+              window.$RefreshReg$ = () => {}
+              window.$RefreshSig$ = () => (type) => type
+              window.__vite_plugin_react_preamble_installed__ = true
+            `,
+          }}
+        />
+        <script type="module" src="/@vite/client" />
+        <script type="module" src="/src/entry-client.tsx" />
+      </head>
+      <body>
+        <div className="p-2 flex gap-2 text-lg">
+          <Link
+            to="/"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            activeOptions={{ exact: true }}
+          >
+            Home
+          </Link>{' '}
+          <Link
+            to="/posts"
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Posts
+          </Link>
+        </div>
+        <hr />
+        <Outlet /> {/* Start rendering router matches */}
+        <TanStackRouterDevtools position="bottom-right" />
+        <RouterScripts />
+      </body>
+    </html>
+  )
+}
diff --git a/examples/react/basic-ssr-streaming/vite.config.js.timestamp-1689182141876.mjs b/examples/react/basic-ssr-streaming/vite.config.js.timestamp-1689182141876.mjs
new file mode 100644
index 0000000000..c86d71131f
--- /dev/null
+++ b/examples/react/basic-ssr-streaming/vite.config.js.timestamp-1689182141876.mjs
@@ -0,0 +1,13 @@
+// vite.config.js
+import { defineConfig } from "file:///Users/tannerlinsley/GitHub/router/node_modules/.pnpm/vite@3.2.4_@types+node@17.0.45/node_modules/vite/dist/node/index.js";
+import react from "file:///Users/tannerlinsley/GitHub/router/node_modules/.pnpm/@vitejs+plugin-react@2.2.0_vite@3.2.4/node_modules/@vitejs/plugin-react/dist/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [react()],
+  build: {
+    minify: false
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvdGFubmVybGluc2xleS9HaXRIdWIvcm91dGVyL2V4YW1wbGVzL3JlYWN0L2Jhc2ljLXNzci1zdHJlYW1pbmdcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy90YW5uZXJsaW5zbGV5L0dpdEh1Yi9yb3V0ZXIvZXhhbXBsZXMvcmVhY3QvYmFzaWMtc3NyLXN0cmVhbWluZy92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvdGFubmVybGluc2xleS9HaXRIdWIvcm91dGVyL2V4YW1wbGVzL3JlYWN0L2Jhc2ljLXNzci1zdHJlYW1pbmcvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xuXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBwbHVnaW5zOiBbcmVhY3QoKV0sXG4gIGJ1aWxkOiB7XG4gICAgbWluaWZ5OiBmYWxzZSxcbiAgfSxcbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQWlZLFNBQVMsb0JBQW9CO0FBQzlaLE9BQU8sV0FBVztBQUVsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQUEsRUFDakIsT0FBTztBQUFBLElBQ0wsUUFBUTtBQUFBLEVBQ1Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
diff --git a/examples/react/basic-ssr-with-html/.gitignore b/examples/react/basic-ssr-with-html/.gitignore
deleted file mode 100644
index d451ff16c1..0000000000
--- a/examples/react/basic-ssr-with-html/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-node_modules
-.DS_Store
-dist
-dist-ssr
-*.local
diff --git a/examples/react/basic-ssr-with-html/README.md b/examples/react/basic-ssr-with-html/README.md
deleted file mode 100644
index 115199d292..0000000000
--- a/examples/react/basic-ssr-with-html/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Example
-
-To run this example:
-
-- `npm install` or `yarn`
-- `npm start` or `yarn start`
diff --git a/examples/react/basic-ssr-with-html/package.json b/examples/react/basic-ssr-with-html/package.json
deleted file mode 100644
index 941bdf328b..0000000000
--- a/examples/react/basic-ssr-with-html/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "tanstack-router-react-example-basic-ssr-with-html",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "node server",
-    "build": "npm run build:client && npm run build:server",
-    "build:client": "vite build --outDir dist/client",
-    "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
-    "serve": "NODE_ENV=production node server",
-    "debug": "node --inspect-brk server"
-  },
-  "dependencies": {
-    "@tanstack/react-loaders": "0.0.1-beta.105",
-    "@tanstack/router": "0.0.1-beta.104",
-    "@tanstack/router-devtools": "0.0.1-beta.104",
-    "@tanstack/router-cli": "0.0.1-beta.69",
-    "axios": "^1.1.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "use-sync-external-store": "^1.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/generator": "^7.20.4",
-    "@rollup/plugin-babel": "^6.0.2",
-    "@types/express": "^4.17.14",
-    "@types/jsesc": "^3.0.1",
-    "@vitejs/plugin-react": "^2.2.0",
-    "compression": "^1.7.4",
-    "concurrently": "^7.6.0",
-    "express": "^4.18.2",
-    "isbot": "^3.6.5",
-    "jsesc": "^3.0.2",
-    "node-fetch": "^3.3.0",
-    "serve-static": "^1.15.0",
-    "vite": "^3.2.3",
-    "vite-plugin-babel": "^1.1.2"
-  },
-  "resolutions": {
-    "use-sync-external-store": "1.2.0"
-  }
-}
diff --git a/examples/react/basic-ssr-with-html/server.js b/examples/react/basic-ssr-with-html/server.js
deleted file mode 100644
index 5801af87b6..0000000000
--- a/examples/react/basic-ssr-with-html/server.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import express from 'express'
-
-const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
-
-process.env.MY_CUSTOM_SECRET = 'API_KEY_qwertyuiop'
-
-export async function createServer(
-  root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production',
-  hmrPort,
-) {
-  const app = express()
-
-  /**
-   * @type {import('vite').ViteDevServer}
-   */
-  let vite
-  if (!isProd) {
-    vite = await (
-      await import('vite')
-    ).createServer({
-      root,
-      logLevel: isTest ? 'error' : 'info',
-      server: {
-        middlewareMode: true,
-        watch: {
-          // During tests we edit the files too fast and sometimes chokidar
-          // misses change events, so enforce polling for consistency
-          usePolling: true,
-          interval: 100,
-        },
-        hmr: {
-          port: hmrPort,
-        },
-      },
-      appType: 'custom',
-    })
-    // use vite's connect instance as middleware
-    app.use(vite.middlewares)
-  } else {
-    app.use((await import('compression')).default())
-  }
-
-  app.use('*', async (req, res) => {
-    try {
-      const url = req.originalUrl
-
-      if (url.includes('.')) {
-        console.warn(`${url} is not valid router path`)
-        res.status(404)
-        res.end(`${url} is not valid router path`)
-        return
-      }
-
-      // Extract the head from vite's index transformation hook
-      let viteHead = !isProd
-        ? await vite.transformIndexHtml(
-            url,
-            `<html><head></head><body></body></html>`,
-          )
-        : ''
-
-      viteHead = viteHead.substring(
-        viteHead.indexOf('<head>') + 6,
-        viteHead.indexOf('</head>'),
-      )
-
-      const entry = await (async () => {
-        if (!isProd) {
-          return vite.ssrLoadModule('/src/entry-server.tsx')
-        } else {
-          return import('./dist/server/entry-server.tsx')
-        }
-      })()
-
-      // Since the router can also be used simply to fulfill data,
-      // Request for data, not html
-      if (url.includes('__data=')) {
-        const data = await entry.load({
-          url,
-        })
-        return res.json(data)
-      }
-
-      // Control/hydrate all the way up to <html>
-      // Modify head
-      // Request/Response control at the route level
-
-      console.log('Rendering: ', url, '...')
-      entry.render({ req, res, url, head: viteHead })
-    } catch (e) {
-      !isProd && vite.ssrFixStacktrace(e)
-      console.log(e.stack)
-      res.status(500).end(e.stack)
-    }
-  })
-
-  return { app, vite }
-}
-
-if (!isTest) {
-  createServer().then(({ app }) =>
-    app.listen(3000, () => {
-      console.log('Client Server: http://localhost:3000')
-    }),
-  )
-}
diff --git a/examples/react/basic-ssr-with-html/src/entry-client.tsx b/examples/react/basic-ssr-with-html/src/entry-client.tsx
deleted file mode 100644
index 6066f1e69a..0000000000
--- a/examples/react/basic-ssr-with-html/src/entry-client.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import ReactDOM from 'react-dom/client'
-
-import { App } from '.'
-import { router } from './router'
-import { loaderClient } from './loaderClient'
-
-const { dehydratedRouter, dehydratedLoaderClient } = (window as any)
-  .__TSR_DEHYDRATED__
-
-// Hydrate the loader client first
-loaderClient.hydrate(dehydratedLoaderClient)
-
-// Hydrate the router next
-router.hydrate(dehydratedRouter)
-
-ReactDOM.hydrateRoot(
-  document,
-  <App router={router} loaderClient={loaderClient} head={''} />,
-)
diff --git a/examples/react/basic-ssr-with-html/src/entry-server.tsx b/examples/react/basic-ssr-with-html/src/entry-server.tsx
deleted file mode 100644
index 0c99fc5aeb..0000000000
--- a/examples/react/basic-ssr-with-html/src/entry-server.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import { createMemoryHistory, Router } from '@tanstack/router'
-import jsesc from 'jsesc'
-import { ServerResponse } from 'http'
-import { createLoaderClient } from './loaderClient'
-import express from 'express'
-
-// index.js
-import './fetch-polyfill'
-import { App } from '.'
-import { routeTree } from './routeTree'
-
-async function getRouter(opts: { url: string }) {
-  const loaderClient = createLoaderClient()
-
-  const router = new Router({
-    routeTree: routeTree,
-    context: {
-      loaderClient,
-    },
-  })
-
-  const memoryHistory = createMemoryHistory({
-    initialEntries: [opts.url],
-  })
-
-  router.update({
-    history: memoryHistory,
-  })
-
-  return { router, loaderClient }
-}
-
-export async function render(opts: {
-  url: string
-  head: string
-  req: express.Request
-  res: ServerResponse
-}) {
-  const { router, loaderClient } = await getRouter(opts)
-
-  await router.load()
-  const dehydratedRouter = router.dehydrate()
-  const dehydratedLoaderClient = loaderClient.dehydrate()
-
-  const head = `${opts.head}<script>
-  window.__TSR_DEHYDRATED__ = JSON.parse(
-    ${jsesc(
-      JSON.stringify({
-        dehydratedRouter,
-        dehydratedLoaderClient,
-      }),
-      {
-        isScriptContext: true,
-        wrap: true,
-        json: true,
-      },
-    )}
-  )
-</script>`
-
-  const appHtml = ReactDOMServer.renderToString(
-    <App router={router} loaderClient={loaderClient} head={head} />,
-  )
-
-  opts.res.statusCode = 200
-  opts.res.setHeader('Content-Type', 'text/html')
-  opts.res.end(`<!DOCTYPE html>${appHtml}`)
-}
diff --git a/examples/react/basic-ssr-with-html/src/fetch-polyfill.js b/examples/react/basic-ssr-with-html/src/fetch-polyfill.js
deleted file mode 100644
index 0b76df369a..0000000000
--- a/examples/react/basic-ssr-with-html/src/fetch-polyfill.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// fetch-polyfill.js
-import fetch, {
-  Blob,
-  blobFrom,
-  blobFromSync,
-  File,
-  fileFrom,
-  fileFromSync,
-  FormData,
-  Headers,
-  Request,
-  Response,
-} from 'node-fetch'
-
-if (!globalThis.fetch) {
-  globalThis.fetch = fetch
-  globalThis.Headers = Headers
-  globalThis.Request = Request
-  globalThis.Response = Response
-}
diff --git a/examples/react/basic-ssr-with-html/src/head.ts b/examples/react/basic-ssr-with-html/src/head.ts
deleted file mode 100644
index 46d7213aa1..0000000000
--- a/examples/react/basic-ssr-with-html/src/head.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react'
-
-const context = React.createContext<string>('')
-export const HeadProvider = context.Provider
-export const useHead = () => React.useContext(context)
diff --git a/examples/react/basic-ssr-with-html/src/index.tsx b/examples/react/basic-ssr-with-html/src/index.tsx
deleted file mode 100644
index aa94f2c619..0000000000
--- a/examples/react/basic-ssr-with-html/src/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react'
-
-import { RegisteredRouter, RouterProvider } from '@tanstack/router'
-import {
-  LoaderClientProvider,
-  RegisteredLoaderClient,
-} from '@tanstack/react-loaders'
-import { HeadProvider } from './head'
-
-export function App({
-  router,
-  loaderClient,
-  head,
-}: {
-  router: RegisteredRouter
-  loaderClient: RegisteredLoaderClient
-  head: string
-}) {
-  return (
-    <HeadProvider value={head}>
-      <LoaderClientProvider loaderClient={loaderClient}>
-        <RouterProvider router={router} />
-      </LoaderClientProvider>
-    </HeadProvider>
-  )
-}
diff --git a/examples/react/basic-ssr-with-html/src/loaderClient.tsx b/examples/react/basic-ssr-with-html/src/loaderClient.tsx
deleted file mode 100644
index bde5f8ad57..0000000000
--- a/examples/react/basic-ssr-with-html/src/loaderClient.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Loader, LoaderClient } from '@tanstack/react-loaders'
-import { postsLoader } from './routes/posts'
-import { postLoader } from './routes/posts/$postId'
-
-export const createLoaderClient = () => {
-  return new LoaderClient({
-    getLoaders: () => ({ postsLoader, postLoader }),
-  })
-}
-
-export const loaderClient = createLoaderClient()
-
-// Register things for typesafety
-declare module '@tanstack/react-loaders' {
-  interface Register {
-    loaderClient: ReturnType<typeof createLoaderClient>
-  }
-}
diff --git a/examples/react/basic-ssr-with-html/src/routeTree.ts b/examples/react/basic-ssr-with-html/src/routeTree.ts
deleted file mode 100644
index 9bd6daf8fd..0000000000
--- a/examples/react/basic-ssr-with-html/src/routeTree.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { rootRoute } from './routes/root'
-import { indexRoute } from './routes/index'
-import { postsRoute } from './routes/posts'
-import { postsIndexRoute } from './routes/posts/index'
-import { postIdRoute } from './routes/posts/$postId'
-
-export const routeTree = rootRoute.addChildren([
-  indexRoute,
-  postsRoute.addChildren([postsIndexRoute, postIdRoute]),
-])
diff --git a/examples/react/basic-ssr-with-html/src/router.tsx b/examples/react/basic-ssr-with-html/src/router.tsx
deleted file mode 100644
index 98fff160eb..0000000000
--- a/examples/react/basic-ssr-with-html/src/router.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { RegisteredLoaderClient } from '@tanstack/react-loaders'
-import { Router } from '@tanstack/router'
-import { loaderClient } from './loaderClient'
-import { routeTree } from './routeTree'
-
-export interface RouterContext {
-  loaderClient: RegisteredLoaderClient
-}
-
-export const router = new Router({
-  routeTree,
-  context: {
-    loaderClient,
-  },
-})
-
-declare module '@tanstack/router' {
-  interface Register {
-    router: typeof router
-  }
-}
diff --git a/examples/react/basic-ssr-with-html/src/routes/index.tsx b/examples/react/basic-ssr-with-html/src/routes/index.tsx
deleted file mode 100644
index 4404bbb747..0000000000
--- a/examples/react/basic-ssr-with-html/src/routes/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Route } from '@tanstack/router'
-import * as React from 'react'
-import { rootRoute } from './root'
-
-export const indexRoute = new Route({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  getContext: () => ({
-    getTitle: () => 'Home',
-  }),
-  component: () => (
-    <div className="p-2">
-      <h3>Welcome Home!</h3>
-    </div>
-  ),
-})
diff --git a/examples/react/basic-ssr-with-html/src/routes/posts.tsx b/examples/react/basic-ssr-with-html/src/routes/posts.tsx
deleted file mode 100644
index 60e0b2a20c..0000000000
--- a/examples/react/basic-ssr-with-html/src/routes/posts.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react'
-import { Link, Outlet, Route } from '@tanstack/router'
-import { rootRoute } from './root'
-// import { loaderClient } from '../entry-client'
-import { Loader, useLoader } from '@tanstack/react-loaders'
-import { postIdRoute } from './posts/$postId'
-
-export type PostType = {
-  id: string
-  title: string
-  body: string
-}
-
-export const postsLoader = new Loader({
-  fn: async () => {
-    console.log('Fetching posts...')
-    await new Promise((r) =>
-      setTimeout(r, 300 + Math.round(Math.random() * 300)),
-    )
-    return fetch('https://jsonplaceholder.typicode.com/posts')
-      .then((d) => d.json() as Promise<PostType[]>)
-      .then((d) => d.slice(0, 10))
-  },
-})
-
-export const postsRoute = new Route({
-  getParentRoute: () => rootRoute,
-  path: 'posts',
-  getContext: ({ context }) => {
-    const { postsLoader } = context.loaderClient.loaders
-
-    return {
-      postsLoader,
-      getTitle: () => {
-        const postsCount = postsLoader.getInstance().state.data?.length
-
-        return `Posts (${postsCount})`
-      },
-    }
-  },
-  loader: async ({ context, preload }) => {
-    await context.postsLoader.load({ preload })
-    return () => context.postsLoader.useLoader()
-  },
-  errorComponent: () => 'Oh crap',
-  component: function Posts({ useLoader }) {
-    const {
-      state: { data: posts },
-    } = useLoader()()
-
-    return (
-      <div className="p-2 flex gap-2">
-        <ul className="list-disc pl-4">
-          {posts?.map((post) => {
-            return (
-              <li key={post.id} className="whitespace-nowrap">
-                <Link
-                  to={postIdRoute.to}
-                  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>
-    )
-  },
-})
diff --git a/examples/react/basic-ssr-with-html/src/routes/posts/$postId.tsx b/examples/react/basic-ssr-with-html/src/routes/posts/$postId.tsx
deleted file mode 100644
index 983a5cc835..0000000000
--- a/examples/react/basic-ssr-with-html/src/routes/posts/$postId.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Loader } from '@tanstack/react-loaders'
-import { Route } from '@tanstack/router'
-import * as React from 'react'
-// import { loaderClient } from '../../entry-client'
-import { postsLoader, postsRoute, PostType } from '../posts'
-
-export const postLoader = new Loader({
-  fn: async (postId: string) => {
-    console.log(`Fetching post with id ${postId}...`)
-
-    await new Promise((r) => setTimeout(r, Math.round(Math.random() * 300)))
-
-    return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(
-      (r) => r.json() as Promise<PostType>,
-    )
-  },
-  onInvalidate: async () => {
-    await postsLoader.invalidate()
-  },
-})
-
-export const postIdRoute = new Route({
-  getParentRoute: () => postsRoute,
-  path: '$postId',
-  getContext: ({ context, params: { postId } }) => {
-    const { postLoader } = context.loaderClient.loaders
-
-    const postLoaderInstance = postLoader.getInstance({ variables: postId })
-
-    return {
-      postLoaderInstance,
-      getTitle: () => {
-        const title = postLoaderInstance.state.data?.title
-
-        return `${title} | Post`
-      },
-    }
-  },
-  loader: async ({ context: { postLoaderInstance }, preload }) => {
-    await postLoaderInstance.load({
-      preload,
-    })
-
-    return () => postLoaderInstance.useInstance()
-  },
-  component: function Post({ useLoader }) {
-    const {
-      state: { data: post },
-    } = useLoader()()
-
-    return (
-      <div className="space-y-2">
-        <h4 className="text-xl font-bold underline">{post.title}</h4>
-        <div className="text-sm">{post.body}</div>
-      </div>
-    )
-  },
-})
diff --git a/examples/react/basic-ssr-with-html/src/routes/posts/index.tsx b/examples/react/basic-ssr-with-html/src/routes/posts/index.tsx
deleted file mode 100644
index aa96f1fbb5..0000000000
--- a/examples/react/basic-ssr-with-html/src/routes/posts/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Route } from '@tanstack/router'
-import * as React from 'react'
-import { postsRoute } from '../posts'
-
-export const postsIndexRoute = new Route({
-  getParentRoute: () => postsRoute,
-  path: '/',
-  component: () => <div>Select a post.</div>,
-})
diff --git a/examples/react/basic-ssr-with-html/src/routes/root.tsx b/examples/react/basic-ssr-with-html/src/routes/root.tsx
deleted file mode 100644
index 6973323e6e..0000000000
--- a/examples/react/basic-ssr-with-html/src/routes/root.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import * as React from 'react'
-import { Link, Outlet, RootRoute, useRouter } from '@tanstack/router'
-import { RouterContext } from '../router'
-import { useHead } from '../head'
-
-export const rootRoute = RootRoute.withRouterContext<RouterContext>()({
-  component: Root,
-})
-
-function Root() {
-  const head = useHead()
-  const router = useRouter()
-  // This is weak sauce, but it's just an example.
-  // In the future, we'll make meta an official thing
-  // and make it async as well to support data
-  const titleMatch = [...router.state.currentMatches]
-    .reverse()
-    .find((d) => d.context.getTitle)
-
-  return (
-    <html lang="en">
-      <React.StrictMode>
-        <head>
-          <meta charSet="UTF-8" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
-          <title>
-            {titleMatch ? titleMatch.context?.getTitle?.() : 'Vite App'}
-          </title>
-          <script src="https://cdn.tailwindcss.com"></script>
-          <script
-            suppressHydrationWarning
-            dangerouslySetInnerHTML={{
-              __html: `</script>
-              ${head}
-            <script>`,
-            }}
-          />
-        </head>
-        <body>
-          <div className="p-2 flex gap-2 text-lg">
-            <Link
-              to="/"
-              activeProps={{
-                className: 'font-bold',
-              }}
-              activeOptions={{ exact: true }}
-            >
-              Home
-            </Link>{' '}
-            <Link
-              to="/posts"
-              activeProps={{
-                className: 'font-bold',
-              }}
-            >
-              Posts
-            </Link>
-          </div>
-          <hr />
-          <Outlet /> {/* Start rendering router matches */}
-          <TanStackRouterDevtools position="bottom-right" />
-          <script type="module" src="/src/entry-client.tsx"></script>
-        </body>
-      </React.StrictMode>
-    </html>
-  )
-}
diff --git a/examples/react/basic-ssr-with-html/tsconfig.dev.json b/examples/react/basic-ssr-with-html/tsconfig.dev.json
deleted file mode 100644
index c09bc865f0..0000000000
--- a/examples/react/basic-ssr-with-html/tsconfig.dev.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "composite": true,
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./build/types"
-  },
-  "files": ["src/main.tsx"],
-  "include": [
-    "src"
-    // "__tests__/**/*.test.*"
-  ]
-}
diff --git a/examples/react/basic-ssr-with-html/tsconfig.json b/examples/react/basic-ssr-with-html/tsconfig.json
deleted file mode 100644
index 0453a66fb9..0000000000
--- a/examples/react/basic-ssr-with-html/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "jsx": "react"
-  }
-}
diff --git a/examples/react/basic-ssr-with-html/vite.config.js b/examples/react/basic-ssr-with-html/vite.config.js
deleted file mode 100644
index 266400b86c..0000000000
--- a/examples/react/basic-ssr-with-html/vite.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    minify: false,
-  },
-})
diff --git a/examples/react/basic-ssr/server.js b/examples/react/basic-ssr/server.js
index 9cf626917f..7f1da2820b 100644
--- a/examples/react/basic-ssr/server.js
+++ b/examples/react/basic-ssr/server.js
@@ -2,8 +2,6 @@ import express from 'express'
 
 const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD
 
-process.env.MY_CUSTOM_SECRET = 'API_KEY_qwertyuiop'
-
 export async function createServer(
   root = process.cwd(),
   isProd = process.env.NODE_ENV === 'production',
@@ -73,19 +71,6 @@ export async function createServer(
         }
       })()
 
-      // // Since the router can also be used simply to fulfill data,
-      // // Request for data, not html
-      // if (url.includes('__data=')) {
-      //   const data = await entry.load({
-      //     url,
-      //   })
-      //   return res.json(data)
-      // }
-
-      // Control/hydrate all the way up to <html>
-      // Modify head
-      // Request/Response control at the route level
-
       console.log('Rendering: ', url, '...')
       entry.render({ req, res, url, head: viteHead })
     } catch (e) {
diff --git a/examples/react/basic-ssr/src/entry-server.tsx b/examples/react/basic-ssr/src/entry-server.tsx
index 7dc159e477..35f01d210c 100644
--- a/examples/react/basic-ssr/src/entry-server.tsx
+++ b/examples/react/basic-ssr/src/entry-server.tsx
@@ -21,6 +21,7 @@ export async function render(opts: {
     initialEntries: [opts.url],
   })
 
+  // Update the history and context
   router.update({
     history: memoryHistory,
     context: {
@@ -29,8 +30,10 @@ export async function render(opts: {
     },
   })
 
+  // Since we're using renderToString, Wait for the router to finish loading
   await router.load()
 
+  // Render the app
   const appHtml = ReactDOMServer.renderToString(<StartServer router={router} />)
 
   opts.res.statusCode = 200
diff --git a/examples/react/kitchen-sink-single-file/src/main.tsx b/examples/react/kitchen-sink-single-file/src/main.tsx
index 589f266d1e..35cda74e3f 100644
--- a/examples/react/kitchen-sink-single-file/src/main.tsx
+++ b/examples/react/kitchen-sink-single-file/src/main.tsx
@@ -12,7 +12,6 @@ import {
   RootRoute,
   Route,
   redirect,
-  useLoader,
 } from '@tanstack/router'
 import {
   Action,
@@ -147,8 +146,10 @@ const rootRoute = RootRoute.withRouterContext<{ auth: AuthContext }>()({
             <h1 className={`text-3xl p-2`}>Kitchen Sink</h1>
             {/* Show a global spinner when the router is transitioning */}
             <div
-              className={`text-3xl duration-300 delay-0 opacity-0 ${
-                loaderClient.state.isLoading ? ` duration-1000 opacity-40` : ''
+              className={`text-3xl duration-300 opacity-0 ${
+                loaderClient.state.isLoading
+                  ? ` duration-1000 opacity-40 delay-500`
+                  : 'delay-0'
               }`}
             >
               <Spinner />
@@ -307,12 +308,6 @@ const dashboardIndexRoute = new Route({
 const invoicesRoute = new Route({
   getParentRoute: () => dashboardRoute,
   path: 'invoices',
-  validateSearch: (search) =>
-    z
-      .object({
-        test: z.string().optional(),
-      })
-      .parse(search),
   component: () => {
     const {
       state: { data: invoices },
@@ -457,9 +452,6 @@ const invoiceRoute = new Route({
         notes: z.string().optional(),
       })
       .parse(search),
-  // getLoaderKey: ({ params, search }) => {
-  //   return [params.invoiceId]
-  // },
   loader: async ({ params: { invoiceId }, preload }) => {
     const invoicesLoaderInstance = invoiceLoader.getInstance({
       variables: invoiceId,
@@ -747,11 +739,12 @@ const usersIndexRoute = new Route({
 const userRoute = new Route({
   getParentRoute: () => usersRoute,
   path: 'user',
-  // parseParams: ({ userId }) => ({ userId: Number(userId) }),
-  // stringifyParams: ({ userId }) => ({ userId: `${userId}` }),
   validateSearch: z.object({
     userId: z.number(),
   }),
+  // Since our userId isn't part of our pathname, make sure we
+  // augment the userId as the key for this route
+  getKey: ({ search: { userId } }) => userId,
   loader: async ({ search: { userId }, preload }) => {
     const userLoaderInstance = userLoader.getInstance({ variables: userId })
 
@@ -797,15 +790,14 @@ const authenticatedRoute = new Route({
   // If navigation is attempted while not authenticated, redirect to login
   // If the error is from a prefetch, redirects will be ignored
   onBeforeLoadError: (error) => {
-    console.log('tanner', error)
     if (error === AuthError) {
       throw redirect({
         to: loginRoute.to,
         search: {
-          // Use latestLocation (not currentLocation) to get the live url
+          // Use location (not location) to get the live url
           // (as opposed to the committed url, which is technically async
           // and resolved after the pending state)
-          redirect: router.state.latestLocation.href,
+          redirect: router.state.location.href,
         },
       })
     }
diff --git a/examples/react/start-basic/src/app/routes/root.tsx b/examples/react/start-basic/src/app/routes/root.tsx
index 09b3e1a976..cc20b102e6 100644
--- a/examples/react/start-basic/src/app/routes/root.tsx
+++ b/examples/react/start-basic/src/app/routes/root.tsx
@@ -21,7 +21,7 @@ export const rootRoute = RootRoute.withRouterContext<RouterContext>()({
   component: function Root() {
     const router = useRouter()
 
-    const titleMatch = [...router.state.currentMatches]
+    const titleMatch = [...router.state.matches]
       .reverse()
       .find((d) => d.routeContext?.getTitle)
 
diff --git a/examples/react/start-kitchen-sink-single-file/src/main.tsx b/examples/react/start-kitchen-sink-single-file/src/main.tsx
index 1c38479d62..b4ed83a11c 100644
--- a/examples/react/start-kitchen-sink-single-file/src/main.tsx
+++ b/examples/react/start-kitchen-sink-single-file/src/main.tsx
@@ -784,10 +784,7 @@ const authenticatedRoute = new Route({
       router.navigate({
         to: loginRoute.to,
         search: {
-          // Use latestLocation (not currentLocation) to get the live url
-          // (as opposed to the committed url, which is technically async
-          // and resolved after the pending state)
-          redirect: router.state.latestLocation.href,
+          redirect: router.state.location.href,
         },
       })
     }
diff --git a/packages/react-loaders/src/index.tsx b/packages/react-loaders/src/index.tsx
index 7db8d95850..b8fa30f50d 100644
--- a/packages/react-loaders/src/index.tsx
+++ b/packages/react-loaders/src/index.tsx
@@ -91,15 +91,9 @@ LoaderInstance.onCreateFns.push((loaderInstance) => {
     }
 
     if (opts?.strict ?? true) {
-      invariant(
-        typeof loaderInstance.state.data !== 'undefined',
-        `useLoader:
-  Loader instance { key: ${loaderInstance.loader.key}, variables: ${loaderInstance.variables} }) is currently in a "${loaderInstance.state.status}" state. By default useLoader will throw an error if the loader instance is not in a "success" state. To avoid this error:
-  
-  - Load the loader instance before using it (e.g. via your router's loader or loader option)
-
-  - Set opts.strict to false and handle the loading state in your component`,
-      )
+      if (loaderInstance.state.status === 'pending') {
+        throw loaderInstance.__loadPromise || loaderInstance.load()
+      }
     }
 
     React.useEffect(() => {
diff --git a/packages/react-start/src/client.tsx b/packages/react-start/src/client.tsx
index 0fd6a01373..1414f63d83 100644
--- a/packages/react-start/src/client.tsx
+++ b/packages/react-start/src/client.tsx
@@ -24,6 +24,7 @@ export function RouterScripts() {
       dangerouslySetInnerHTML={{
         __html: `
           window.__TSR_DEHYDRATED__ = ${JSON.stringify(dehydrated)}
+          window.__TSR_DEHYDRATED_MATCHES__ = {}
         `,
       }}
     />
diff --git a/packages/react-start/src/server.tsx b/packages/react-start/src/server.tsx
index 92acecd922..57e7f8be3b 100644
--- a/packages/react-start/src/server.tsx
+++ b/packages/react-start/src/server.tsx
@@ -106,11 +106,11 @@ export function StartServer<TRouter extends AnyRouter>(props: {
     [],
   )
 
-  React.useState(() => {
-    if (hydrationCtxValue) {
-      props.router.hydrate(hydrationCtxValue)
-    }
-  })
+  // React.useState(() => {
+  //   if (hydrationCtxValue) {
+  //     props.router.hydrate(hydrationCtxValue)
+  //   }
+  // })
 
   return (
     // Provide the hydration context still, since `<RouterScripts />` needs it.
diff --git a/packages/router-devtools/src/devtools.tsx b/packages/router-devtools/src/devtools.tsx
index 708e3fdb63..07a59a3001 100644
--- a/packages/router-devtools/src/devtools.tsx
+++ b/packages/router-devtools/src/devtools.tsx
@@ -520,17 +520,14 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
   )
 
   const allMatches: RouteMatch[] = React.useMemo(
-    () => [
-      ...Object.values(router.state.currentMatches),
-      ...Object.values(router.state.pendingMatches ?? []),
-    ],
-    [router.state.currentMatches, router.state.pendingMatches],
+    () => [...Object.values(router.state.matches)],
+    [router.state.matches],
   )
 
   const activeMatch = allMatches?.find((d) => d.route.id === activeRouteId)
 
   const hasSearch = Object.keys(
-    last(router.state.currentMatches)?.state.search || {},
+    last(router.state.matches)?.state.search || {},
   ).length
 
   return (
@@ -707,7 +704,7 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
             />
           ) : (
             <div>
-              {router.state.currentMatches.map((match, i) => {
+              {router.state.matches.map((match, i) => {
                 return (
                   <div
                     key={match.route.id || i}
@@ -754,70 +751,6 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
                   </div>
                 )
               })}
-              {router.state.pendingMatches?.length ? (
-                <>
-                  <div
-                    style={{
-                      marginTop: '2rem',
-                      padding: '.5em',
-                      background: theme.backgroundAlt,
-                      position: 'sticky',
-                      top: 0,
-                      zIndex: 1,
-                    }}
-                  >
-                    Pending Matches
-                  </div>
-                  {router.state.pendingMatches?.map((match, i) => {
-                    return (
-                      <div
-                        key={match.route.id || i}
-                        role="button"
-                        aria-label={`Open match details for ${match.route.id}`}
-                        onClick={() =>
-                          setActiveRouteId(
-                            activeRouteId === match.route.id
-                              ? ''
-                              : match.route.id,
-                          )
-                        }
-                        style={{
-                          display: 'flex',
-                          borderBottom: `solid 1px ${theme.grayAlt}`,
-                          cursor: 'pointer',
-                          background:
-                            match === activeMatch
-                              ? 'rgba(255,255,255,.1)'
-                              : undefined,
-                        }}
-                      >
-                        <div
-                          style={{
-                            flex: '0 0 auto',
-                            width: '1.3rem',
-                            height: '1.3rem',
-                            marginLeft: '.25rem',
-                            background: getStatusColor(match, theme),
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            fontWeight: 'bold',
-                            borderRadius: '.25rem',
-                            transition: 'all .2s ease-out',
-                          }}
-                        />
-
-                        <Code
-                          style={{
-                            padding: '.5em',
-                          }}
-                        >
-                          {`${match.id}`}
-                        </Code>
-                      </div>
-                    )
-                  })}
-                </>
-              ) : null}
             </div>
           )}
         </div>
@@ -953,9 +886,9 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
               }}
             >
               <Explorer
-                value={last(router.state.currentMatches)?.state.search || {}}
+                value={last(router.state.matches)?.state.search || {}}
                 defaultExpanded={Object.keys(
-                  (last(router.state.currentMatches)?.state.search as {}) || {},
+                  (last(router.state.matches)?.state.search as {}) || {},
                 ).reduce((obj: any, next) => {
                   obj[next] = {}
                   return obj
diff --git a/packages/router/__tests__/index.test.tsx b/packages/router/__tests__/index.test.tsx
index 245ac3d845..20c7bf697f 100644
--- a/packages/router/__tests__/index.test.tsx
+++ b/packages/router/__tests__/index.test.tsx
@@ -55,7 +55,7 @@ function createLocation(location: Partial<Location>): ParsedLocation {
 //     expect(router.store.pendingMatches[0].id).toBe('/')
 
 //     await promise
-//     expect(router.state.currentMatches[0].id).toBe('/')
+//     expect(router.state.matches[0].id).toBe('/')
 //   })
 
 //   test('mounts to /a', async () => {
@@ -77,7 +77,7 @@ function createLocation(location: Partial<Location>): ParsedLocation {
 
 //     expect(router.store.pendingMatches[0].id).toBe('/a')
 //     await promise
-//     expect(router.state.currentMatches[0].id).toBe('/a')
+//     expect(router.state.matches[0].id).toBe('/a')
 //   })
 
 //   test('mounts to /a/b', async () => {
@@ -107,7 +107,7 @@ function createLocation(location: Partial<Location>): ParsedLocation {
 
 //     expect(router.store.pendingMatches[1].id).toBe('/a/b')
 //     await promise
-//     expect(router.state.currentMatches[1].id).toBe('/a/b')
+//     expect(router.state.matches[1].id).toBe('/a/b')
 //   })
 
 //   test('navigates to /a', async () => {
@@ -130,14 +130,14 @@ function createLocation(location: Partial<Location>): ParsedLocation {
 //     expect(router.store.pendingMatches[0].id).toBe('/')
 
 //     await promise
-//     expect(router.state.currentMatches[0].id).toBe('/')
+//     expect(router.state.matches[0].id).toBe('/')
 
 //     promise = router.navigate({ to: 'a' })
-//     expect(router.state.currentMatches[0].id).toBe('/')
+//     expect(router.state.matches[0].id).toBe('/')
 //     expect(router.store.pendingMatches[0].id).toBe('a')
 
 //     await promise
-//     expect(router.state.currentMatches[0].id).toBe('a')
+//     expect(router.state.matches[0].id).toBe('a')
 //     expect(router.store.pending).toBe(undefined)
 //   })
 
@@ -162,17 +162,17 @@ function createLocation(location: Partial<Location>): ParsedLocation {
 //     })
 
 //     await router.mount()
-//     expect(router.state.currentLocation.href).toBe('/')
+//     expect(router.state.location.href).toBe('/')
 
 //     let promise = router.navigate({ to: 'a' })
 //     expect(router.store.pendingLocation.href).toBe('/a')
 //     await promise
-//     expect(router.state.currentLocation.href).toBe('/a')
+//     expect(router.state.location.href).toBe('/a')
 
 //     promise = router.navigate({ to: './b' })
 //     expect(router.store.pendingLocation.href).toBe('/a/b')
 //     await promise
-//     expect(router.state.currentLocation.href).toBe('/a/b')
+//     expect(router.state.location.href).toBe('/a/b')
 
 //     expect(router.store.pending).toBe(undefined)
 //   })
diff --git a/packages/router/src/history.ts b/packages/router/src/history.ts
index 9a1daaf759..8486a4742f 100644
--- a/packages/router/src/history.ts
+++ b/packages/router/src/history.ts
@@ -52,7 +52,7 @@ function createHistory(opts: {
   forward: () => void
   createHref: (path: string) => string
 }): RouterHistory {
-  let currentLocation = opts.getLocation()
+  let location = opts.getLocation()
   let unsub = () => {}
   let listeners = new Set<() => void>()
   let blockers: BlockerFn[] = []
@@ -80,13 +80,13 @@ function createHistory(opts: {
   }
 
   const onUpdate = () => {
-    currentLocation = opts.getLocation()
+    location = opts.getLocation()
     listeners.forEach((listener) => listener())
   }
 
   return {
     get location() {
-      return currentLocation
+      return location
     },
     listen: (cb: () => void) => {
       if (listeners.size === 0) {
diff --git a/packages/router/src/path.ts b/packages/router/src/path.ts
index 210b9ae5e2..d5b74eb2c3 100644
--- a/packages/router/src/path.ts
+++ b/packages/router/src/path.ts
@@ -152,7 +152,7 @@ export function matchPathname(
   matchLocation: Pick<MatchLocation, 'to' | 'fuzzy' | 'caseSensitive'>,
 ): AnyPathParams | undefined {
   const pathParams = matchByPath(basepath, currentPathname, matchLocation)
-  // const searchMatched = matchBySearch(currentLocation.search, matchLocation)
+  // const searchMatched = matchBySearch(location.search, matchLocation)
 
   if (matchLocation.to && !pathParams) {
     return
diff --git a/packages/router/src/react.tsx b/packages/router/src/react.tsx
index e0f7ca9e53..64a7698adc 100644
--- a/packages/router/src/react.tsx
+++ b/packages/router/src/react.tsx
@@ -304,6 +304,8 @@ export type RouterProps<
   router: Router<TRouteConfig, TRoutesInfo>
 }
 
+const useDeferredValue = React.useDeferredValue || ((d) => d)
+
 export function RouterProvider<
   TRouteConfig extends AnyRoute = AnyRoute,
   TRoutesInfo extends AnyRoutesInfo = DefaultRoutesInfo,
@@ -311,13 +313,17 @@ export function RouterProvider<
 >({ router, ...rest }: RouterProps<TRouteConfig, TRoutesInfo, TDehydrated>) {
   router.update(rest)
 
-  const currentMatches = useStore(router.__store, (s) => s.currentMatches)
+  const matches = useDeferredValue(
+    useStore(router.__store, (s) => {
+      return s.matches
+    }),
+  )
 
   React.useEffect(router.mount, [router])
 
   return (
     <routerContext.Provider value={{ router: router as any }}>
-      <matchesContext.Provider value={[undefined!, ...currentMatches]}>
+      <matchesContext.Provider value={[undefined!, ...matches]}>
         <CatchBoundary
           errorComponent={ErrorComponent}
           onCatch={() => {
@@ -369,8 +375,9 @@ export function useMatch<
 }): TStrict extends true ? TRouteMatch : TRouteMatch | undefined {
   const router = useRouterContext()
   const nearestMatch = useMatches()[0]!
+  const matches = useDeferredValue(router.state.matches)
   const match = opts?.from
-    ? router.state.currentMatches.find((d) => d.route.id === opts?.from)
+    ? matches.find((d) => d.route.id === opts?.from)
     : nearestMatch
 
   invariant(
@@ -400,22 +407,6 @@ export function useMatch<
   return match as any
 }
 
-// export function useRoute<
-//   TId extends keyof RegisteredRoutesInfo['routesById'] = '/',
-// >(routeId: TId): RegisteredRoutesInfo['routesById'][TId] {
-//   const router = useRouterContext()
-//   const resolvedRoute = router.getRoute(routeId as any)
-
-//   invariant(
-//     resolvedRoute,
-//     `Could not find a route for route "${
-//       routeId as string
-//     }"! Did you forget to add it to your route?`,
-//   )
-
-//   return resolvedRoute as any
-// }
-
 export type RouteFromIdOrRoute<T> = T extends RegisteredRoutesInfo['routeUnion']
   ? T
   : T extends keyof RegisteredRoutesInfo['routesById']
@@ -424,14 +415,6 @@ export type RouteFromIdOrRoute<T> = T extends RegisteredRoutesInfo['routeUnion']
   ? keyof RegisteredRoutesInfo['routesById']
   : never
 
-// export function useRoute<TRouteOrId>(
-//   route: TRouteOrId extends string
-//     ? keyof RegisteredRoutesInfo['routeIds']
-//     : RegisteredRoutesInfo['routeUnion'],
-// ): RouteFromIdOrRoute<TRouteOrId> {
-//   return null as any
-// }
-
 export function useLoader<
   TFrom extends keyof RegisteredRoutesInfo['routesById'],
   TStrict extends boolean = true,
@@ -476,11 +459,11 @@ export function useParams<
 }): TSelected {
   const router = useRouterContext()
   useStore(router.__store, (d) => {
-    const params = last(d.currentMatches)?.params as any
+    const params = last(d.matches)?.params as any
     return opts?.track?.(params) ?? params
   })
 
-  return last(router.state.currentMatches)?.params as any
+  return last(router.state.matches)?.params as any
 }
 
 export function useNavigate<
@@ -569,8 +552,28 @@ function SubOutlet({
     match.route.options.wrapInSuspense ?? !match.route.isRoot
       ? React.Suspense
       : SafeFragment
+
   const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment
 
+  const dehydrated: Record<string, any> = {}
+
+  if (typeof document === 'undefined') {
+    if (match.state.loader) {
+      Object.keys(match.state.loader).forEach((key) => {
+        let value = match.state.loader[key]
+
+        if (value instanceof Promise || value.then) {
+          value = {
+            __isPromise: true,
+            key: key,
+          }
+        }
+
+        dehydrated[key] = value
+      })
+    }
+  }
+
   return (
     <matchesContext.Provider value={matches}>
       <ResolvedSuspenseBoundary fallback={<PendingComponent />}>
@@ -581,6 +584,20 @@ function SubOutlet({
             warning(false, `Error in route match: ${match.id}`)
           }}
         >
+          {/* {!match.route.isRoot ? (
+            <script
+              suppressHydrationWarning
+              dangerouslySetInnerHTML={{
+                __html: dehydrated
+                  ? `
+              window.__TSR_DEHYDRATED_MATCHES__['${
+                match.id
+              }'] = ${JSON.stringify(dehydrated)}
+          `
+                  : '',
+              }}
+            />
+          ) : null} */}
           <Inner match={match} />
         </ResolvedCatchBoundary>
       </ResolvedSuspenseBoundary>
@@ -591,6 +608,12 @@ function SubOutlet({
 function Inner(props: { match: RouteMatch }): any {
   const router = useRouterContext()
 
+  // if (!props.match.route.isRoot && typeof document !== 'undefined') {
+  //   router.options.hydrate?.(
+  //     (window as any).__TSR_DEHYDRATED_MATCHES__[props.match.id],
+  //   )
+  // }
+
   if (props.match.state.status === 'error') {
     throw props.match.state.error
   }
@@ -669,13 +692,13 @@ function CatchBoundaryInner(props: {
 
   React.useEffect(() => {
     if (activeErrorState) {
-      if (router.state.currentLocation.key !== prevKeyRef.current) {
+      if (router.state.location.key !== prevKeyRef.current) {
         // setActiveErrorState({} as any)
       }
     }
 
-    prevKeyRef.current = router.state.currentLocation.key
-  }, [activeErrorState, router.state.currentLocation.key])
+    prevKeyRef.current = router.state.location.key
+  }, [activeErrorState, router.state.location.key])
 
   React.useEffect(() => {
     if (props.errorState.error) {
diff --git a/packages/router/src/route.ts b/packages/router/src/route.ts
index 46f7f08654..486a145489 100644
--- a/packages/router/src/route.ts
+++ b/packages/router/src/route.ts
@@ -191,6 +191,16 @@ export type RouteOptions<
   > = MergeFromParent<TAllParentContext, TRouteContext>,
 > = RouteOptionsBase<TCustomId, TPath> & {
   getParentRoute: () => TParentRoute
+  // Optionally call this function to get a unique key for this route.
+  // This is useful for routes that need to be uniquely identified
+  // by more than their by search params
+  getKey?: OnLoadFnKey<
+    TSearchSchema,
+    TFullSearchSchema,
+    TAllParams,
+    NoInfer<TRouteContext>,
+    TContext
+  >
   // If true, this route will be matched as case-sensitive
   caseSensitive?: boolean
   // Filter functions that can manipulate search params *before* they are passed to links and navigate
@@ -362,6 +372,26 @@ export type OnLoadFn<
   >,
 ) => Promise<TLoader> | TLoader
 
+export type OnLoadFnKey<
+  TSearchSchema extends AnySearchSchema = {},
+  TFullSearchSchema extends AnySearchSchema = {},
+  TAllParams = {},
+  TContext extends AnyContext = AnyContext,
+  TAllContext extends AnyContext = AnyContext,
+> = (
+  loaderContext: {
+    params: TAllParams
+    search: TFullSearchSchema
+  },
+  // loaderContext: LoaderContext<
+  //   TSearchSchema,
+  //   TFullSearchSchema,
+  //   TAllParams,
+  //   TContext,
+  //   TAllContext
+  // >,
+) => any
+
 export interface LoaderContext<
   TSearchSchema extends AnySearchSchema = {},
   TFullSearchSchema extends AnySearchSchema = {},
@@ -376,6 +406,14 @@ export interface LoaderContext<
   preload: boolean
   routeContext: TContext
   context: TAllContext
+  // serverOnly: <
+  //   TServer extends object | (() => object),
+  //   TClient extends object | (() => object),
+  // >(
+  //   server: TServer,
+  //   client: TClient,
+  // ) => (TServer extends () => infer TReturn ? TReturn : TServer) &
+  //   (TClient extends () => infer TReturn ? TReturn : TClient)
 }
 
 export type UnloaderFn<TPath extends string> = (
diff --git a/packages/router/src/routeMatch.ts b/packages/router/src/routeMatch.ts
index 30103196b8..34e403cd9f 100644
--- a/packages/router/src/routeMatch.ts
+++ b/packages/router/src/routeMatch.ts
@@ -13,7 +13,7 @@ export interface RouteMatchState<
   routeSearch: TRoute['__types']['searchSchema']
   search: TRoutesInfo['fullSearchSchema'] &
     TRoute['__types']['fullSearchSchema']
-  status: 'idle' | 'pending' | 'success' | 'error'
+  status: 'pending' | 'success' | 'error'
   error?: unknown
   updatedAt: number
   loader: TRoute['__types']['loader']
@@ -64,7 +64,9 @@ export class RouteMatch<
   parentMatch?: RouteMatch
   pendingInfo?: PendingRouteMatchInfo
 
+  __loadKey: any = { __init: true }
   __loadPromise?: Promise<void>
+  __loadPromiseResolve?: () => void
   __onExit?:
     | void
     | ((matchContext: {
@@ -92,7 +94,7 @@ export class RouteMatch<
           updatedAt: 0,
           routeSearch: {},
           search: {} as any,
-          status: 'idle',
+          status: 'pending',
           loader: undefined,
         },
         {
@@ -111,11 +113,16 @@ export class RouteMatch<
       this[type] = component as any
     })
 
-    if (this.state.status === 'idle' && !this.#hasLoaders()) {
+    this.__loadPromise = new Promise((r) => {
+      this.__loadPromiseResolve = r
+    })
+
+    if (this.state.status === 'pending' && !this.#hasLoaders()) {
       this.__store.setState((s) => ({
         ...s,
         status: 'success',
       }))
+      this.__loadPromiseResolve?.()
     }
   }
 
@@ -128,7 +135,7 @@ export class RouteMatch<
 
   __commit = () => {
     const { routeSearch, search, context, routeContext } = this.#resolveInfo({
-      location: this.router.state.currentLocation,
+      location: this.router.state.location,
     })
     this.context = context
     this.routeContext = routeContext
@@ -246,11 +253,28 @@ export class RouteMatch<
 
     const { routeSearch, search, context, routeContext } = info
 
-    // If the match is invalid, errored or idle, trigger it to load
-    if (this.state.status === 'pending') {
-      return
+    const loaderOpts = {
+      params: this.params,
+      routeSearch,
+      search,
+      signal: this.abortController.signal,
+      preload: !!opts?.preload,
+      routeContext,
+      context,
     }
 
+    // If getKey is set, we can skip the loader if the key is the same
+    // if (this.route.options.getKey) {
+    // const prevKey = this.__loadKey
+    // this.__loadKey = this.route.options.getKey?.(loaderOpts)
+
+    // if (
+    //   !opts.preload &&
+    //   JSON.stringify(prevKey) === JSON.stringify(this.__loadKey)
+    // ) {
+    //   return
+    // }
+
     this.__loadPromise = Promise.resolve().then(async () => {
       const loadId = '' + Date.now() + Math.random()
       this.#latestId = loadId
@@ -261,16 +285,6 @@ export class RouteMatch<
 
       let latestPromise
 
-      // If the match was in an error state, set it
-      // to a loading state again. Otherwise, keep it
-      // as loading or resolved
-      if (this.state.status === 'idle') {
-        this.__store.setState((s) => ({
-          ...s,
-          status: 'pending',
-        }))
-      }
-
       const componentsPromise = (async () => {
         // then run all component and data loaders in parallel
         // For each component type, potentially load it asynchronously
@@ -288,15 +302,7 @@ export class RouteMatch<
 
       const loaderPromise = Promise.resolve().then(() => {
         if (this.route.options.loader) {
-          return this.route.options.loader({
-            params: this.params,
-            routeSearch,
-            search,
-            signal: this.abortController.signal,
-            preload: !!opts?.preload,
-            routeContext: routeContext,
-            context: context,
-          })
+          return this.route.options.loader(loaderOpts)
         }
         return
       })
@@ -350,6 +356,7 @@ export class RouteMatch<
           updatedAt: Date.now(),
         }))
       } finally {
+        this.__loadPromiseResolve?.()
         delete this.__loadPromise
       }
     })
diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
index d583de1226..5019819942 100644
--- a/packages/router/src/router.ts
+++ b/packages/router/src/router.ts
@@ -154,11 +154,9 @@ export interface RouterState<
   TState extends LocationState = LocationState,
 > {
   status: 'idle' | 'pending'
-  latestLocation: ParsedLocation<TRoutesInfo['fullSearchSchema'], TState>
-  currentMatches: RouteMatch<TRoutesInfo, TRoutesInfo['routeIntersection']>[]
+  matches: RouteMatch<TRoutesInfo, TRoutesInfo['routeIntersection']>[]
+  location: ParsedLocation<TRoutesInfo['fullSearchSchema'], TState>
   currentLocation: ParsedLocation<TRoutesInfo['fullSearchSchema'], TState>
-  pendingMatches?: RouteMatch<TRoutesInfo, TRoutesInfo['routeIntersection']>[]
-  pendingLocation?: ParsedLocation<TRoutesInfo['fullSearchSchema'], TState>
   lastUpdated: number
 }
 
@@ -201,12 +199,7 @@ type LinkCurrentTargetElement = {
 }
 
 export interface DehydratedRouterState
-  extends Pick<
-    RouterState,
-    'status' | 'latestLocation' | 'currentLocation' | 'lastUpdated'
-  > {
-  // currentMatches: DehydratedRouteMatch[]
-}
+  extends Pick<RouterState, 'status' | 'location' | 'lastUpdated'> {}
 
 export interface DehydratedRouter {
   state: DehydratedRouterState
@@ -311,7 +304,7 @@ export class Router<
       state: true,
     })
 
-    if (this.state.latestLocation.href !== next.href) {
+    if (this.state.location.href !== next.href) {
       this.#commitLocation({ ...next, replace: true })
     }
   }
@@ -324,7 +317,7 @@ export class Router<
     // Mount only does anything on the client
     if (!isServer) {
       // If the router matches are empty, start loading the matches
-      if (!this.state.currentMatches.length) {
+      if (!this.state.matches.length) {
         this.safeLoad()
       }
     }
@@ -353,13 +346,13 @@ export class Router<
 
       this.__store.setState((s) => ({
         ...s,
-        latestLocation: parsedLocation,
         currentLocation: parsedLocation,
+        location: parsedLocation,
       }))
 
       this.#unsubHistory = this.history.listen(() => {
         this.safeLoad({
-          next: this.#parseLocation(this.state.latestLocation),
+          next: this.#parseLocation(this.state.location),
         })
       })
     }
@@ -379,7 +372,7 @@ export class Router<
   buildNext = (opts: BuildNextOptions): ParsedLocation => {
     const next = this.#buildLocation(opts)
 
-    const __matches = this.matchRoutes(next.pathname)
+    const __matches = this.matchRoutes(next.pathname, next.search)
 
     return this.#buildLocation({
       ...opts,
@@ -388,10 +381,7 @@ export class Router<
   }
 
   cancelMatches = () => {
-    ;[
-      ...this.state.currentMatches,
-      ...(this.state.pendingMatches || []),
-    ].forEach((match) => {
+    ;[...this.state.matches].forEach((match) => {
       match.cancel()
     })
   }
@@ -404,6 +394,8 @@ export class Router<
   }
 
   load = async (opts?: { next?: ParsedLocation }): Promise<void> => {
+    this.#createNavigationPromise()
+
     let now = Date.now()
     const startedAt = now
     this.startedLoadingAt = startedAt
@@ -418,37 +410,36 @@ export class Router<
         // Ingest the new location
         this.__store.setState((s) => ({
           ...s,
-          latestLocation: opts.next!,
+          location: opts.next!,
         }))
       }
 
       // Match the routes
-      matches = this.matchRoutes(this.state.latestLocation.pathname, {
-        strictParseParams: true,
-        debug: true,
-      })
+      matches = this.matchRoutes(
+        this.state.location.pathname,
+        this.state.location.search,
+        {
+          strictParseParams: true,
+          debug: true,
+        },
+      )
 
       this.__store.setState((s) => ({
         ...s,
         status: 'pending',
-        pendingMatches: matches,
-        pendingLocation: this.state.latestLocation,
+        matches: matches,
       }))
     })
 
     // Load the matches
-    await this.loadMatches(
-      matches,
-      this.state.pendingLocation!,
-      // opts
-    )
+    await this.loadMatches(matches, this.state.location)
 
     if (this.startedLoadingAt !== startedAt) {
       // Ignore side-effects of outdated side-effects
       return this.navigationPromise
     }
 
-    const previousMatches = this.state.currentMatches
+    const previousMatches = this.state.matches
 
     const exiting: AnyRouteMatch[] = [],
       staying: AnyRouteMatch[] = []
@@ -497,22 +488,20 @@ export class Router<
       })
     })
 
-    const prevLocation = this.state.currentLocation
+    const prevLocation = this.state.location
 
     this.__store.setState((s) => ({
       ...s,
       status: 'idle',
-      currentLocation: this.state.latestLocation,
-      currentMatches: matches,
-      pendingLocation: undefined,
-      pendingMatches: undefined,
+      currentLocation: s.location,
+      matches: matches,
     }))
 
     matches.forEach((match) => {
       match.__commit()
     })
 
-    if (prevLocation!.href !== this.state.currentLocation.href) {
+    if (prevLocation!.href !== this.state.location.href) {
       this.options.onRouteChange?.()
     }
 
@@ -530,10 +519,10 @@ export class Router<
   }
 
   loadRoute = async (
-    navigateOpts: BuildNextOptions = this.state.latestLocation,
+    navigateOpts: BuildNextOptions = this.state.location,
   ): Promise<RouteMatch[]> => {
     const next = this.buildNext(navigateOpts)
-    const matches = this.matchRoutes(next.pathname, {
+    const matches = this.matchRoutes(next.pathname, next.search, {
       strictParseParams: true,
     })
     await this.loadMatches(matches, next)
@@ -541,10 +530,10 @@ export class Router<
   }
 
   preloadRoute = async (
-    navigateOpts: BuildNextOptions = this.state.latestLocation,
+    navigateOpts: BuildNextOptions = this.state.location,
   ) => {
     const next = this.buildNext(navigateOpts)
-    const matches = this.matchRoutes(next.pathname, {
+    const matches = this.matchRoutes(next.pathname, next.search, {
       strictParseParams: true,
     })
 
@@ -556,6 +545,7 @@ export class Router<
 
   matchRoutes = (
     pathname: string,
+    search: AnySearchSchema,
     opts?: { strictParseParams?: boolean; debug?: boolean },
   ): RouteMatch[] => {
     // If there's no route tree, we can't match anything
@@ -565,10 +555,7 @@ export class Router<
 
     // Existing matches are matches that are already loaded along with
     // pending matches that are still loading
-    const existingMatches = [
-      ...this.state.currentMatches,
-      ...(this.state.pendingMatches ?? []),
-    ]
+    const existingMatches = [...this.state.matches]
 
     // We need to "flatten" layout routes, but only process as many
     // routes as we need to in order to find the best match
@@ -682,7 +669,12 @@ export class Router<
         Object.assign(allParams, params)
 
         const interpolatedPath = interpolatePath(route.path, allParams)
-        const matchId = interpolatePath(route.id, allParams, true)
+        const matchId =
+          interpolatePath(route.id, allParams, true) +
+          route.options.getKey?.({
+            params: allParams,
+            search,
+          })
 
         // Waste not, want not. If we already have a match for this route,
         // reuse it. This is important for layout routes, which might stick
@@ -851,8 +843,12 @@ export class Router<
     } as any
 
     const next = this.buildNext(location)
+    if (opts?.pending && this.state.status !== 'pending') {
+      return false
+    }
+
     const baseLocation = opts?.pending
-      ? this.state.pendingLocation
+      ? this.state.location
       : this.state.currentLocation
 
     if (!baseLocation) {
@@ -918,21 +914,21 @@ export class Router<
       userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0
 
     // Compare path/hash for matches
-    const currentPathSplit = this.state.currentLocation.pathname.split('/')
+    const currentPathSplit = this.state.location.pathname.split('/')
     const nextPathSplit = next.pathname.split('/')
     const pathIsFuzzyEqual = nextPathSplit.every(
       (d, i) => d === currentPathSplit[i],
     )
     // Combine the matches based on user options
     const pathTest = activeOptions?.exact
-      ? this.state.currentLocation.pathname === next.pathname
+      ? this.state.location.pathname === next.pathname
       : pathIsFuzzyEqual
     const hashTest = activeOptions?.includeHash
-      ? this.state.currentLocation.hash === next.hash
+      ? this.state.location.hash === next.hash
       : true
     const searchTest =
       activeOptions?.includeSearch ?? true
-        ? partialDeepEqual(this.state.currentLocation.search, next.search)
+        ? partialDeepEqual(this.state.location.search, next.search)
         : true
 
     // The final "active" test
@@ -1014,12 +1010,7 @@ export class Router<
   dehydrate = (): DehydratedRouter => {
     return {
       state: {
-        ...pick(this.state, [
-          'latestLocation',
-          'currentLocation',
-          'status',
-          'lastUpdated',
-        ]),
+        ...pick(this.state, ['location', 'status', 'lastUpdated']),
       },
     }
   }
@@ -1044,6 +1035,7 @@ export class Router<
       return {
         ...s,
         ...ctx.router.state,
+        currentLocation: ctx.router.state.location,
       }
     })
 
@@ -1177,8 +1169,8 @@ export class Router<
     dest.fromCurrent = dest.fromCurrent ?? dest.to === ''
 
     const fromPathname = dest.fromCurrent
-      ? this.state.latestLocation.pathname
-      : dest.from ?? this.state.latestLocation.pathname
+      ? this.state.location.pathname
+      : dest.from ?? this.state.location.pathname
 
     let pathname = resolvePath(
       this.basepath ?? '/',
@@ -1186,9 +1178,13 @@ export class Router<
       `${dest.to ?? ''}`,
     )
 
-    const fromMatches = this.matchRoutes(this.state.latestLocation.pathname, {
-      strictParseParams: true,
-    })
+    const fromMatches = this.matchRoutes(
+      this.state.location.pathname,
+      this.state.location.search,
+      {
+        strictParseParams: true,
+      },
+    )
 
     const prevParams = { ...last(fromMatches)?.params }
 
@@ -1224,9 +1220,9 @@ export class Router<
     const preFilteredSearch = preSearchFilters?.length
       ? preSearchFilters?.reduce(
           (prev, next) => next(prev),
-          this.state.latestLocation.search,
+          this.state.location.search,
         )
-      : this.state.latestLocation.search
+      : this.state.location.search
 
     // Then the link/navigate function
     const destSearch =
@@ -1244,7 +1240,7 @@ export class Router<
       : destSearch
 
     const search = replaceEqualDeep(
-      this.state.latestLocation.search,
+      this.state.location.search,
       postFilteredSearch,
     )
 
@@ -1252,15 +1248,15 @@ export class Router<
 
     const hash =
       dest.hash === true
-        ? this.state.latestLocation.hash
-        : functionalUpdate(dest.hash!, this.state.latestLocation.hash)
+        ? this.state.location.hash
+        : functionalUpdate(dest.hash!, this.state.location.hash)
 
     const hashStr = hash ? `#${hash}` : ''
 
     const nextState =
       dest.state === true
-        ? this.state.latestLocation.state
-        : functionalUpdate(dest.state, this.state.latestLocation.state)!
+        ? this.state.location.state
+        : functionalUpdate(dest.state, this.state.location.state)!
 
     return {
       pathname,
@@ -1287,7 +1283,7 @@ export class Router<
       nextAction = 'push'
     }
 
-    const isSameUrl = this.state.latestLocation.href === next.href
+    const isSameUrl = this.state.location.href === next.href
 
     if (isSameUrl && !next.key) {
       nextAction = 'replace'
@@ -1302,14 +1298,20 @@ export class Router<
       ...next.state,
     })
 
-    return (this.navigationPromise = new Promise((resolve) => {
-      const previousNavigationResolve = this.resolveNavigation
+    return this.#createNavigationPromise()
+  }
+
+  #createNavigationPromise = () => {
+    const previousNavigationResolve = this.resolveNavigation
 
+    this.navigationPromise = new Promise((resolve) => {
       this.resolveNavigation = () => {
-        previousNavigationResolve()
         resolve()
+        previousNavigationResolve()
       }
-    }))
+    })
+
+    return this.navigationPromise
   }
 }
 
@@ -1319,9 +1321,9 @@ const isServer = typeof window === 'undefined' || !window.document.createElement
 function getInitialRouterState(): RouterState<any, any> {
   return {
     status: 'idle',
-    latestLocation: null!,
     currentLocation: null!,
-    currentMatches: [],
+    location: null!,
+    matches: [],
     lastUpdated: Date.now(),
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6221c8a90e..a624bc1abb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -298,6 +298,9 @@ importers:
       '@tanstack/react-loaders':
         specifier: workspace:*
         version: link:../../../packages/react-loaders
+      '@tanstack/react-start':
+        specifier: workspace:*
+        version: link:../../../packages/react-start
       '@tanstack/router':
         specifier: workspace:*
         version: link:../../../packages/router