@tanstack/router-core 1.131.3 → 1.131.4

package/dist/esm/ssr/ssr-client.js

@@ -1,16 +1,14 @@
 import invariant from "tiny-invariant";
 import { batch } from "@tanstack/store";
 import { createControlledPromise } from "../utils.js";
-function hydrateMatch(deyhydratedMatch) {
-  return {
-    id: deyhydratedMatch.i,
-    __beforeLoadContext: deyhydratedMatch.b,
-    loaderData: deyhydratedMatch.l,
-    status: deyhydratedMatch.s,
-    ssr: deyhydratedMatch.ssr,
-    updatedAt: deyhydratedMatch.u,
-    error: deyhydratedMatch.e
-  };
+function hydrateMatch(match, deyhydratedMatch) {
+  match.id = deyhydratedMatch.i;
+  match.__beforeLoadContext = deyhydratedMatch.b;
+  match.loaderData = deyhydratedMatch.l;
+  match.status = deyhydratedMatch.s;
+  match.ssr = deyhydratedMatch.ssr;
+  match.updatedAt = deyhydratedMatch.u;
+  match.error = deyhydratedMatch.e;
 }
 async function hydrate(router) {
   var _a, _b, _c;
@@ -34,15 +32,17 @@ async function hydrate(router) {
     const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
     if (pendingMinMs) {
       const minPendingPromise = createControlledPromise();
-      match.minPendingPromise = minPendingPromise;
+      match._nonReactive.minPendingPromise = minPendingPromise;
       match._forcePending = true;
       setTimeout(() => {
         minPendingPromise.resolve();
-        router.updateMatch(match.id, (prev) => ({
-          ...prev,
-          minPendingPromise: void 0,
-          _forcePending: void 0
-        }));
+        router.updateMatch(match.id, (prev) => {
+          prev._nonReactive.minPendingPromise = void 0;
+          return {
+            ...prev,
+            _forcePending: void 0
+          };
+        });
       }, pendingMinMs);
     }
   }
@@ -52,15 +52,12 @@ async function hydrate(router) {
       (d) => d.i === match.id
     );
     if (!dehydratedMatch) {
-      Object.assign(match, { dehydrated: false, ssr: false });
+      match._nonReactive.dehydrated = false;
+      match.ssr = false;
       return;
     }
-    Object.assign(match, hydrateMatch(dehydratedMatch));
-    if (match.ssr === false) {
-      match._dehydrated = false;
-    } else {
-      match._dehydrated = true;
-    }
+    hydrateMatch(match, dehydratedMatch);
+    match._nonReactive.dehydrated = match.ssr !== false;
     if (match.ssr === "data-only" || match.ssr === false) {
       if (firstNonSsrMatchIndex === void 0) {
         firstNonSsrMatchIndex = match.index;
@@ -118,7 +115,7 @@ async function hydrate(router) {
   const hasSsrFalseMatches = matches.some((m) => m.ssr === false);
   if (!hasSsrFalseMatches && !isSpaMode) {
     matches.forEach((match) => {
-      match._dehydrated = void 0;
+      match._nonReactive.dehydrated = void 0;
     });
     return routeChunkPromise;
   }
@@ -133,7 +130,7 @@ async function hydrate(router) {
     );
     setMatchForcePending(match);
     match._displayPending = true;
-    match.displayPendingPromise = loadPromise;
+    match._nonReactive.displayPendingPromise = loadPromise;
     loadPromise.then(() => {
       batch(() => {
         if (router.__store.state.status === "pending") {

package/dist/esm/ssr/ssr-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"ssr-client.js","sources":["../../../src/ssr/ssr-client.ts"],"sourcesContent":["import invariant from 'tiny-invariant'\nimport { batch } from '@tanstack/store'\nimport { createControlledPromise } from '../utils'\nimport type { AnyRouteMatch, MakeRouteMatch } from '../Matches'\nimport type { AnyRouter } from '../router'\nimport type { Manifest } from '../manifest'\nimport type { RouteContextOptions } from '../route'\nimport type { GLOBAL_TSR } from './ssr-server'\n\ndeclare global {\n  interface Window {\n    [GLOBAL_TSR]?: TsrSsrGlobal\n  }\n}\n\nexport interface TsrSsrGlobal {\n  router?: DehydratedRouter\n  // clean scripts, shortened since this is sent for each streamed script\n  c: () => void\n}\n\nfunction hydrateMatch(\n  deyhydratedMatch: DehydratedMatch,\n): Partial<MakeRouteMatch> {\n  return {\n    id: deyhydratedMatch.i,\n    __beforeLoadContext: deyhydratedMatch.b,\n    loaderData: deyhydratedMatch.l,\n    status: deyhydratedMatch.s,\n    ssr: deyhydratedMatch.ssr,\n    updatedAt: deyhydratedMatch.u,\n    error: deyhydratedMatch.e,\n  }\n}\nexport interface DehydratedMatch {\n  i: MakeRouteMatch['id']\n  b?: MakeRouteMatch['__beforeLoadContext']\n  l?: MakeRouteMatch['loaderData']\n  e?: MakeRouteMatch['error']\n  u: MakeRouteMatch['updatedAt']\n  s: MakeRouteMatch['status']\n  ssr?: MakeRouteMatch['ssr']\n}\n\nexport interface DehydratedRouter {\n  manifest: Manifest | undefined\n  dehydratedData?: any\n  lastMatchId?: string\n  matches: Array<DehydratedMatch>\n}\n\nexport async function hydrate(router: AnyRouter): Promise<any> {\n  invariant(\n    window.$_TSR?.router,\n    'Expected to find a dehydrated data on window.$_TSR.router, but we did not. Please file an issue!',\n  )\n\n  const { manifest, dehydratedData, lastMatchId } = window.$_TSR.router\n\n  router.ssr = {\n    manifest,\n  }\n\n  // Hydrate the router state\n  const matches = router.matchRoutes(router.state.location)\n\n  // kick off loading the route chunks\n  const routeChunkPromise = Promise.all(\n    matches.map((match) => {\n      const route = router.looseRoutesById[match.routeId]!\n      return router.loadRouteChunk(route)\n    }),\n  )\n\n  function setMatchForcePending(match: AnyRouteMatch) {\n    // usually the minPendingPromise is created in the Match component if a pending match is rendered\n    // however, this might be too late if the match synchronously resolves\n    const route = router.looseRoutesById[match.routeId]!\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n    if (pendingMinMs) {\n      const minPendingPromise = createControlledPromise<void>()\n      match.minPendingPromise = minPendingPromise\n      match._forcePending = true\n\n      setTimeout(() => {\n        minPendingPromise.resolve()\n        // We've handled the minPendingPromise, so we can delete it\n        router.updateMatch(match.id, (prev) => ({\n          ...prev,\n          minPendingPromise: undefined,\n          _forcePending: undefined,\n        }))\n      }, pendingMinMs)\n    }\n  }\n\n  // Right after hydration and before the first render, we need to rehydrate each match\n  // First step is to reyhdrate loaderData and __beforeLoadContext\n  let firstNonSsrMatchIndex: number | undefined = undefined\n  matches.forEach((match) => {\n    const dehydratedMatch = window.$_TSR!.router!.matches.find(\n      (d) => d.i === match.id,\n    )\n    if (!dehydratedMatch) {\n      Object.assign(match, { dehydrated: false, ssr: false })\n      return\n    }\n\n    Object.assign(match, hydrateMatch(dehydratedMatch))\n\n    if (match.ssr === false) {\n      match._dehydrated = false\n    } else {\n      match._dehydrated = true\n    }\n\n    if (match.ssr === 'data-only' || match.ssr === false) {\n      if (firstNonSsrMatchIndex === undefined) {\n        firstNonSsrMatchIndex = match.index\n        setMatchForcePending(match)\n      }\n    }\n  })\n\n  router.__store.setState((s) => {\n    return {\n      ...s,\n      matches,\n    }\n  })\n\n  // Allow the user to handle custom hydration data\n  await router.options.hydrate?.(dehydratedData)\n\n  // now that all necessary data is hydrated:\n  // 1) fully reconstruct the route context\n  // 2) execute `head()` and `scripts()` for each match\n  await Promise.all(\n    router.state.matches.map(async (match) => {\n      const route = router.looseRoutesById[match.routeId]!\n\n      const parentMatch = router.state.matches[match.index - 1]\n      const parentContext = parentMatch?.context ?? router.options.context ?? {}\n\n      // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed\n      // so run it again and merge route context\n      const contextFnContext: RouteContextOptions<any, any, any, any> = {\n        deps: match.loaderDeps,\n        params: match.params,\n        context: parentContext,\n        location: router.state.location,\n        navigate: (opts: any) =>\n          router.navigate({ ...opts, _fromLocation: router.state.location }),\n        buildLocation: router.buildLocation,\n        cause: match.cause,\n        abortController: match.abortController,\n        preload: false,\n        matches,\n      }\n      match.__routeContext = route.options.context?.(contextFnContext) ?? {}\n\n      match.context = {\n        ...parentContext,\n        ...match.__routeContext,\n        ...match.__beforeLoadContext,\n      }\n\n      const assetContext = {\n        matches: router.state.matches,\n        match,\n        params: match.params,\n        loaderData: match.loaderData,\n      }\n      const headFnContent = await route.options.head?.(assetContext)\n\n      const scripts = await route.options.scripts?.(assetContext)\n\n      match.meta = headFnContent?.meta\n      match.links = headFnContent?.links\n      match.headScripts = headFnContent?.scripts\n      match.styles = headFnContent?.styles\n      match.scripts = scripts\n    }),\n  )\n\n  const isSpaMode = matches[matches.length - 1]!.id !== lastMatchId\n  const hasSsrFalseMatches = matches.some((m) => m.ssr === false)\n  // all matches have data from the server   and we are not in SPA mode so we don't need to kick of router.load()\n  if (!hasSsrFalseMatches && !isSpaMode) {\n    matches.forEach((match) => {\n      // remove the _dehydrate flag since we won't run router.load() which would remove it\n      match._dehydrated = undefined\n    })\n    return routeChunkPromise\n  }\n\n  // schedule router.load() to run after the next tick so we can store the promise in the match before loading starts\n  const loadPromise = Promise.resolve()\n    .then(() => router.load())\n    .catch((err) => {\n      console.error('Error during router hydration:', err)\n    })\n\n  // in SPA mode we need to keep the first match below the root route pending until router.load() is finished\n  // this will prevent that other pending components are rendered but hydration is not blocked\n  if (isSpaMode) {\n    const match = matches[1]\n    invariant(\n      match,\n      'Expected to find a match below the root match in SPA mode.',\n    )\n    setMatchForcePending(match)\n\n    match._displayPending = true\n    match.displayPendingPromise = loadPromise\n\n    loadPromise.then(() => {\n      batch(() => {\n        // ensure router is not in status 'pending' anymore\n        // this usually happens in Transitioner but if loading synchronously resolves,\n        // Transitioner won't be rendered while loading so it cannot track the change from loading:true to loading:false\n        if (router.__store.state.status === 'pending') {\n          router.__store.setState((s) => ({\n            ...s,\n            status: 'idle',\n            resolvedLocation: s.location,\n          }))\n        }\n        // hide the pending component once the load is finished\n        router.updateMatch(match.id, (prev) => {\n          return {\n            ...prev,\n            _displayPending: undefined,\n            displayPendingPromise: undefined,\n          }\n        })\n      })\n    })\n  }\n  return routeChunkPromise\n}\n"],"names":["_b","_a","_c"],"mappings":"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"}
+{"version":3,"file":"ssr-client.js","sources":["../../../src/ssr/ssr-client.ts"],"sourcesContent":["import invariant from 'tiny-invariant'\nimport { batch } from '@tanstack/store'\nimport { createControlledPromise } from '../utils'\nimport type { AnyRouteMatch, MakeRouteMatch } from '../Matches'\nimport type { AnyRouter } from '../router'\nimport type { Manifest } from '../manifest'\nimport type { RouteContextOptions } from '../route'\nimport type { GLOBAL_TSR } from './ssr-server'\n\ndeclare global {\n  interface Window {\n    [GLOBAL_TSR]?: TsrSsrGlobal\n  }\n}\n\nexport interface TsrSsrGlobal {\n  router?: DehydratedRouter\n  // clean scripts, shortened since this is sent for each streamed script\n  c: () => void\n}\n\nfunction hydrateMatch(\n  match: AnyRouteMatch,\n  deyhydratedMatch: DehydratedMatch,\n): void {\n  match.id = deyhydratedMatch.i\n  match.__beforeLoadContext = deyhydratedMatch.b\n  match.loaderData = deyhydratedMatch.l\n  match.status = deyhydratedMatch.s\n  match.ssr = deyhydratedMatch.ssr\n  match.updatedAt = deyhydratedMatch.u\n  match.error = deyhydratedMatch.e\n}\nexport interface DehydratedMatch {\n  i: MakeRouteMatch['id']\n  b?: MakeRouteMatch['__beforeLoadContext']\n  l?: MakeRouteMatch['loaderData']\n  e?: MakeRouteMatch['error']\n  u: MakeRouteMatch['updatedAt']\n  s: MakeRouteMatch['status']\n  ssr?: MakeRouteMatch['ssr']\n}\n\nexport interface DehydratedRouter {\n  manifest: Manifest | undefined\n  dehydratedData?: any\n  lastMatchId?: string\n  matches: Array<DehydratedMatch>\n}\n\nexport async function hydrate(router: AnyRouter): Promise<any> {\n  invariant(\n    window.$_TSR?.router,\n    'Expected to find a dehydrated data on window.$_TSR.router, but we did not. Please file an issue!',\n  )\n\n  const { manifest, dehydratedData, lastMatchId } = window.$_TSR.router\n\n  router.ssr = {\n    manifest,\n  }\n\n  // Hydrate the router state\n  const matches = router.matchRoutes(router.state.location)\n\n  // kick off loading the route chunks\n  const routeChunkPromise = Promise.all(\n    matches.map((match) => {\n      const route = router.looseRoutesById[match.routeId]!\n      return router.loadRouteChunk(route)\n    }),\n  )\n\n  function setMatchForcePending(match: AnyRouteMatch) {\n    // usually the minPendingPromise is created in the Match component if a pending match is rendered\n    // however, this might be too late if the match synchronously resolves\n    const route = router.looseRoutesById[match.routeId]!\n    const pendingMinMs =\n      route.options.pendingMinMs ?? router.options.defaultPendingMinMs\n    if (pendingMinMs) {\n      const minPendingPromise = createControlledPromise<void>()\n      match._nonReactive.minPendingPromise = minPendingPromise\n      match._forcePending = true\n\n      setTimeout(() => {\n        minPendingPromise.resolve()\n        // We've handled the minPendingPromise, so we can delete it\n        router.updateMatch(match.id, (prev) => {\n          prev._nonReactive.minPendingPromise = undefined\n          return {\n            ...prev,\n            _forcePending: undefined,\n          }\n        })\n      }, pendingMinMs)\n    }\n  }\n\n  // Right after hydration and before the first render, we need to rehydrate each match\n  // First step is to reyhdrate loaderData and __beforeLoadContext\n  let firstNonSsrMatchIndex: number | undefined = undefined\n  matches.forEach((match) => {\n    const dehydratedMatch = window.$_TSR!.router!.matches.find(\n      (d) => d.i === match.id,\n    )\n    if (!dehydratedMatch) {\n      match._nonReactive.dehydrated = false\n      match.ssr = false\n      return\n    }\n\n    hydrateMatch(match, dehydratedMatch)\n\n    match._nonReactive.dehydrated = match.ssr !== false\n\n    if (match.ssr === 'data-only' || match.ssr === false) {\n      if (firstNonSsrMatchIndex === undefined) {\n        firstNonSsrMatchIndex = match.index\n        setMatchForcePending(match)\n      }\n    }\n  })\n\n  router.__store.setState((s) => {\n    return {\n      ...s,\n      matches,\n    }\n  })\n\n  // Allow the user to handle custom hydration data\n  await router.options.hydrate?.(dehydratedData)\n\n  // now that all necessary data is hydrated:\n  // 1) fully reconstruct the route context\n  // 2) execute `head()` and `scripts()` for each match\n  await Promise.all(\n    router.state.matches.map(async (match) => {\n      const route = router.looseRoutesById[match.routeId]!\n\n      const parentMatch = router.state.matches[match.index - 1]\n      const parentContext = parentMatch?.context ?? router.options.context ?? {}\n\n      // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed\n      // so run it again and merge route context\n      const contextFnContext: RouteContextOptions<any, any, any, any> = {\n        deps: match.loaderDeps,\n        params: match.params,\n        context: parentContext,\n        location: router.state.location,\n        navigate: (opts: any) =>\n          router.navigate({ ...opts, _fromLocation: router.state.location }),\n        buildLocation: router.buildLocation,\n        cause: match.cause,\n        abortController: match.abortController,\n        preload: false,\n        matches,\n      }\n      match.__routeContext = route.options.context?.(contextFnContext) ?? {}\n\n      match.context = {\n        ...parentContext,\n        ...match.__routeContext,\n        ...match.__beforeLoadContext,\n      }\n\n      const assetContext = {\n        matches: router.state.matches,\n        match,\n        params: match.params,\n        loaderData: match.loaderData,\n      }\n      const headFnContent = await route.options.head?.(assetContext)\n\n      const scripts = await route.options.scripts?.(assetContext)\n\n      match.meta = headFnContent?.meta\n      match.links = headFnContent?.links\n      match.headScripts = headFnContent?.scripts\n      match.styles = headFnContent?.styles\n      match.scripts = scripts\n    }),\n  )\n\n  const isSpaMode = matches[matches.length - 1]!.id !== lastMatchId\n  const hasSsrFalseMatches = matches.some((m) => m.ssr === false)\n  // all matches have data from the server and we are not in SPA mode so we don't need to kick of router.load()\n  if (!hasSsrFalseMatches && !isSpaMode) {\n    matches.forEach((match) => {\n      // remove the dehydrated flag since we won't run router.load() which would remove it\n      match._nonReactive.dehydrated = undefined\n    })\n    return routeChunkPromise\n  }\n\n  // schedule router.load() to run after the next tick so we can store the promise in the match before loading starts\n  const loadPromise = Promise.resolve()\n    .then(() => router.load())\n    .catch((err) => {\n      console.error('Error during router hydration:', err)\n    })\n\n  // in SPA mode we need to keep the first match below the root route pending until router.load() is finished\n  // this will prevent that other pending components are rendered but hydration is not blocked\n  if (isSpaMode) {\n    const match = matches[1]\n    invariant(\n      match,\n      'Expected to find a match below the root match in SPA mode.',\n    )\n    setMatchForcePending(match)\n\n    match._displayPending = true\n    match._nonReactive.displayPendingPromise = loadPromise\n\n    loadPromise.then(() => {\n      batch(() => {\n        // ensure router is not in status 'pending' anymore\n        // this usually happens in Transitioner but if loading synchronously resolves,\n        // Transitioner won't be rendered while loading so it cannot track the change from loading:true to loading:false\n        if (router.__store.state.status === 'pending') {\n          router.__store.setState((s) => ({\n            ...s,\n            status: 'idle',\n            resolvedLocation: s.location,\n          }))\n        }\n        // hide the pending component once the load is finished\n        router.updateMatch(match.id, (prev) => {\n          return {\n            ...prev,\n            _displayPending: undefined,\n            displayPendingPromise: undefined,\n          }\n        })\n      })\n    })\n  }\n  return routeChunkPromise\n}\n"],"names":["_b","_a","_c"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-core",
-  "version": "1.131.3",
+  "version": "1.131.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/Matches.ts

@@ -136,11 +136,18 @@ export interface RouteMatch<
   paramsError: unknown
   searchError: unknown
   updatedAt: number
-  loadPromise?: ControlledPromise<void>
-  /** @internal */
-  beforeLoadPromise?: ControlledPromise<void>
-  /** @internal */
-  loaderPromise?: ControlledPromise<void>
+  _nonReactive: {
+    /** @internal */
+    beforeLoadPromise?: ControlledPromise<void>
+    /** @internal */
+    loaderPromise?: ControlledPromise<void>
+    /** @internal */
+    pendingTimeout?: ReturnType<typeof setTimeout>
+    loadPromise?: ControlledPromise<void>
+    displayPendingPromise?: Promise<void>
+    minPendingPromise?: ControlledPromise<void>
+    dehydrated?: boolean
+  }
   loaderData?: TLoaderData
   /** @internal */
   __routeContext: Record<string, unknown>
@@ -158,12 +165,9 @@ export interface RouteMatch<
   headers?: Record<string, string>
   globalNotFound?: boolean
   staticData: StaticDataRouteOption
-  minPendingPromise?: ControlledPromise<void>
-  pendingTimeout?: ReturnType<typeof setTimeout>
+  /** This attribute is not reactive */
   ssr?: boolean | 'data-only'
-  _dehydrated?: boolean
   _forcePending?: boolean
-  displayPendingPromise?: Promise<void>
   _displayPending?: boolean
 }
 

package/src/router.ts

@@ -1285,6 +1285,9 @@ export class RouterCore<
           error: undefined,
           paramsError: parseErrors[index],
           __routeContext: {},
+          _nonReactive: {
+            loadPromise: createControlledPromise(),
+          },
           __beforeLoadContext: undefined,
           context: {},
           abortController: new AbortController(),
@@ -1300,7 +1303,6 @@ export class RouterCore<
           headScripts: undefined,
           meta: undefined,
           staticData: route.options.staticData || {},
-          loadPromise: createControlledPromise(),
           fullPath: route.fullPath,
         }
       }
@@ -1388,13 +1390,8 @@ export class RouterCore<
     if (!match) return
 
     match.abortController.abort()
-    this.updateMatch(id, (prev) => {
-      clearTimeout(prev.pendingTimeout)
-      return {
-        ...prev,
-        pendingTimeout: undefined,
-      }
-    })
+    match._nonReactive.pendingTimeout = undefined
+    clearTimeout(match._nonReactive.pendingTimeout)
   }
 
   cancelMatches = () => {
@@ -2133,8 +2130,10 @@ export class RouterCore<
           }
         }
 
-        match.beforeLoadPromise?.resolve()
-        match.loaderPromise?.resolve()
+        match._nonReactive.beforeLoadPromise?.resolve()
+        match._nonReactive.loaderPromise?.resolve()
+        match._nonReactive.beforeLoadPromise = undefined
+        match._nonReactive.loaderPromise = undefined
 
         updateMatch(match.id, (prev) => ({
           ...prev,
@@ -2145,15 +2144,13 @@ export class RouterCore<
               : 'error',
           isFetching: false,
           error: err,
-          beforeLoadPromise: undefined,
-          loaderPromise: undefined,
         }))
 
         if (!(err as any).routeId) {
           ;(err as any).routeId = match.routeId
         }
 
-        match.loadPromise?.resolve()
+        match._nonReactive.loadPromise?.resolve()
 
         if (isRedirect(err)) {
           rendered = true
@@ -2173,7 +2170,7 @@ export class RouterCore<
     const shouldSkipLoader = (matchId: string) => {
       const match = this.getMatch(matchId)!
       // upon hydration, we skip the loader if the match has been dehydrated on the server
-      if (!this.isServer && match._dehydrated) {
+      if (!this.isServer && match._nonReactive.dehydrated) {
         return true
       }
 
@@ -2216,8 +2213,9 @@ export class RouterCore<
               }
 
               updateMatch(matchId, (prev) => {
-                prev.beforeLoadPromise?.resolve()
-                prev.loadPromise?.resolve()
+                prev._nonReactive.beforeLoadPromise?.resolve()
+                prev._nonReactive.beforeLoadPromise = undefined
+                prev._nonReactive.loadPromise?.resolve()
 
                 return {
                   ...prev,
@@ -2226,7 +2224,6 @@ export class RouterCore<
                   isFetching: false,
                   updatedAt: Date.now(),
                   abortController: new AbortController(),
-                  beforeLoadPromise: undefined,
                 }
               })
             }
@@ -2296,10 +2293,7 @@ export class RouterCore<
                     }
                   }
                 }
-                updateMatch(matchId, (prev) => ({
-                  ...prev,
-                  ssr,
-                }))
+                existingMatch.ssr = ssr
               }
 
               if (shouldSkipLoader(matchId)) {
@@ -2321,9 +2315,10 @@ export class RouterCore<
 
               let executeBeforeLoad = true
               const setupPendingTimeout = () => {
+                const match = this.getMatch(matchId)!
                 if (
                   shouldPending &&
-                  this.getMatch(matchId)!.pendingTimeout === undefined
+                  match._nonReactive.pendingTimeout === undefined
                 ) {
                   const pendingTimeout = setTimeout(() => {
                     try {
@@ -2332,22 +2327,19 @@ export class RouterCore<
                       triggerOnReady()
                     } catch {}
                   }, pendingMs)
-                  updateMatch(matchId, (prev) => ({
-                    ...prev,
-                    pendingTimeout,
-                  }))
+                  match._nonReactive.pendingTimeout = pendingTimeout
                 }
               }
               if (
                 // If we are in the middle of a load, either of these will be present
                 // (not to be confused with `loadPromise`, which is always defined)
-                existingMatch.beforeLoadPromise ||
-                existingMatch.loaderPromise
+                existingMatch._nonReactive.beforeLoadPromise ||
+                existingMatch._nonReactive.loaderPromise
               ) {
                 setupPendingTimeout()
 
                 // Wait for the beforeLoad to resolve before we continue
-                await existingMatch.beforeLoadPromise
+                await existingMatch._nonReactive.beforeLoadPromise
                 const match = this.getMatch(matchId)!
                 if (match.status === 'error') {
                   executeBeforeLoad = true
@@ -2361,17 +2353,15 @@ export class RouterCore<
               if (executeBeforeLoad) {
                 // If we are not in the middle of a load OR the previous load failed, start it
                 try {
-                  updateMatch(matchId, (prev) => {
-                    // explicitly capture the previous loadPromise
-                    const prevLoadPromise = prev.loadPromise
-                    return {
-                      ...prev,
-                      loadPromise: createControlledPromise<void>(() => {
-                        prevLoadPromise?.resolve()
-                      }),
-                      beforeLoadPromise: createControlledPromise<void>(),
-                    }
-                  })
+                  const match = this.getMatch(matchId)!
+                  match._nonReactive.beforeLoadPromise =
+                    createControlledPromise<void>()
+                  // explicitly capture the previous loadPromise
+                  const prevLoadPromise = match._nonReactive.loadPromise
+                  match._nonReactive.loadPromise =
+                    createControlledPromise<void>(() => {
+                      prevLoadPromise?.resolve()
+                    })
 
                   const { paramsError, searchError } = this.getMatch(matchId)!
 
@@ -2453,11 +2443,11 @@ export class RouterCore<
                 }
 
                 updateMatch(matchId, (prev) => {
-                  prev.beforeLoadPromise?.resolve()
+                  prev._nonReactive.beforeLoadPromise?.resolve()
+                  prev._nonReactive.beforeLoadPromise = undefined
 
                   return {
                     ...prev,
-                    beforeLoadPromise: undefined,
                     isFetching: false,
                   }
                 })
@@ -2507,8 +2497,8 @@ export class RouterCore<
 
                   const potentialPendingMinPromise = async () => {
                     const latestMatch = this.getMatch(matchId)!
-                    if (latestMatch.minPendingPromise) {
-                      await latestMatch.minPendingPromise
+                    if (latestMatch._nonReactive.minPendingPromise) {
+                      await latestMatch._nonReactive.minPendingPromise
                     }
                   }
 
@@ -2524,7 +2514,7 @@ export class RouterCore<
                     }
                   }
                   // there is a loaderPromise, so we are in the middle of a load
-                  else if (prevMatch.loaderPromise) {
+                  else if (prevMatch._nonReactive.loaderPromise) {
                     // do not block if we already have stale data we can show
                     // but only if the ongoing load is not a preload since error handling is different for preloads
                     // and we don't want to swallow errors
@@ -2535,7 +2525,7 @@ export class RouterCore<
                     ) {
                       return this.getMatch(matchId)!
                     }
-                    await prevMatch.loaderPromise
+                    await prevMatch._nonReactive.loaderPromise
                     const match = this.getMatch(matchId)!
                     if (match.error) {
                       handleRedirectAndNotFound(match, match.error)
@@ -2592,13 +2582,16 @@ export class RouterCore<
                         ? shouldReloadOption(getLoaderContext())
                         : shouldReloadOption
 
-                    updateMatch(matchId, (prev) => ({
-                      ...prev,
-                      loaderPromise: createControlledPromise<void>(),
-                      preload:
-                        !!preload &&
-                        !this.state.matches.some((d) => d.id === matchId),
-                    }))
+                    updateMatch(matchId, (prev) => {
+                      prev._nonReactive.loaderPromise =
+                        createControlledPromise<void>()
+                      return {
+                        ...prev,
+                        preload:
+                          !!preload &&
+                          !this.state.matches.some((d) => d.id === matchId),
+                      }
+                    })
 
                     const runLoader = async () => {
                       try {
@@ -2682,11 +2675,13 @@ export class RouterCore<
                       } catch (err) {
                         const head = await executeHead()
 
-                        updateMatch(matchId, (prev) => ({
-                          ...prev,
-                          loaderPromise: undefined,
-                          ...head,
-                        }))
+                        updateMatch(matchId, (prev) => {
+                          prev._nonReactive.loaderPromise = undefined
+                          return {
+                            ...prev,
+                            ...head,
+                          }
+                        })
                         handleRedirectAndNotFound(this.getMatch(matchId)!, err)
                       }
                     }
@@ -2703,14 +2698,10 @@ export class RouterCore<
                       ;(async () => {
                         try {
                           await runLoader()
-                          const { loaderPromise, loadPromise } =
-                            this.getMatch(matchId)!
-                          loaderPromise?.resolve()
-                          loadPromise?.resolve()
-                          updateMatch(matchId, (prev) => ({
-                            ...prev,
-                            loaderPromise: undefined,
-                          }))
+                          const match = this.getMatch(matchId)!
+                          match._nonReactive.loaderPromise?.resolve()
+                          match._nonReactive.loadPromise?.resolve()
+                          match._nonReactive.loaderPromise = undefined
                         } catch (err) {
                           if (isRedirect(err)) {
                             await this.navigate(err.options)
@@ -2734,25 +2725,23 @@ export class RouterCore<
                     }
                   }
                   if (!loaderIsRunningAsync) {
-                    const { loaderPromise, loadPromise } =
-                      this.getMatch(matchId)!
-                    loaderPromise?.resolve()
-                    loadPromise?.resolve()
+                    const match = this.getMatch(matchId)!
+                    match._nonReactive.loaderPromise?.resolve()
+                    match._nonReactive.loadPromise?.resolve()
                   }
 
                   updateMatch(matchId, (prev) => {
-                    clearTimeout(prev.pendingTimeout)
+                    clearTimeout(prev._nonReactive.pendingTimeout)
+                    prev._nonReactive.pendingTimeout = undefined
+                    if (!loaderIsRunningAsync)
+                      prev._nonReactive.loaderPromise = undefined
+                    prev._nonReactive.dehydrated = undefined
                     return {
                       ...prev,
                       isFetching: loaderIsRunningAsync
                         ? prev.isFetching
                         : false,
-                      loaderPromise: loaderIsRunningAsync
-                        ? prev.loaderPromise
-                        : undefined,
                       invalid: false,
-                      pendingTimeout: undefined,
-                      _dehydrated: undefined,
                     }
                   })
                   return this.getMatch(matchId)!

package/src/ssr/ssr-client.ts

@@ -20,17 +20,16 @@ export interface TsrSsrGlobal {
 }
 
 function hydrateMatch(
+  match: AnyRouteMatch,
   deyhydratedMatch: DehydratedMatch,
-): Partial<MakeRouteMatch> {
-  return {
-    id: deyhydratedMatch.i,
-    __beforeLoadContext: deyhydratedMatch.b,
-    loaderData: deyhydratedMatch.l,
-    status: deyhydratedMatch.s,
-    ssr: deyhydratedMatch.ssr,
-    updatedAt: deyhydratedMatch.u,
-    error: deyhydratedMatch.e,
-  }
+): void {
+  match.id = deyhydratedMatch.i
+  match.__beforeLoadContext = deyhydratedMatch.b
+  match.loaderData = deyhydratedMatch.l
+  match.status = deyhydratedMatch.s
+  match.ssr = deyhydratedMatch.ssr
+  match.updatedAt = deyhydratedMatch.u
+  match.error = deyhydratedMatch.e
 }
 export interface DehydratedMatch {
   i: MakeRouteMatch['id']
@@ -80,17 +79,19 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       route.options.pendingMinMs ?? router.options.defaultPendingMinMs
     if (pendingMinMs) {
       const minPendingPromise = createControlledPromise<void>()
-      match.minPendingPromise = minPendingPromise
+      match._nonReactive.minPendingPromise = minPendingPromise
       match._forcePending = true
 
       setTimeout(() => {
         minPendingPromise.resolve()
         // We've handled the minPendingPromise, so we can delete it
-        router.updateMatch(match.id, (prev) => ({
-          ...prev,
-          minPendingPromise: undefined,
-          _forcePending: undefined,
-        }))
+        router.updateMatch(match.id, (prev) => {
+          prev._nonReactive.minPendingPromise = undefined
+          return {
+            ...prev,
+            _forcePending: undefined,
+          }
+        })
       }, pendingMinMs)
     }
   }
@@ -103,17 +104,14 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       (d) => d.i === match.id,
     )
     if (!dehydratedMatch) {
-      Object.assign(match, { dehydrated: false, ssr: false })
+      match._nonReactive.dehydrated = false
+      match.ssr = false
       return
     }
 
-    Object.assign(match, hydrateMatch(dehydratedMatch))
+    hydrateMatch(match, dehydratedMatch)
 
-    if (match.ssr === false) {
-      match._dehydrated = false
-    } else {
-      match._dehydrated = true
-    }
+    match._nonReactive.dehydrated = match.ssr !== false
 
     if (match.ssr === 'data-only' || match.ssr === false) {
       if (firstNonSsrMatchIndex === undefined) {
@@ -186,11 +184,11 @@ export async function hydrate(router: AnyRouter): Promise<any> {
 
   const isSpaMode = matches[matches.length - 1]!.id !== lastMatchId
   const hasSsrFalseMatches = matches.some((m) => m.ssr === false)
-  // all matches have data from the server   and we are not in SPA mode so we don't need to kick of router.load()
+  // all matches have data from the server and we are not in SPA mode so we don't need to kick of router.load()
   if (!hasSsrFalseMatches && !isSpaMode) {
     matches.forEach((match) => {
-      // remove the _dehydrate flag since we won't run router.load() which would remove it
-      match._dehydrated = undefined
+      // remove the dehydrated flag since we won't run router.load() which would remove it
+      match._nonReactive.dehydrated = undefined
     })
     return routeChunkPromise
   }
@@ -213,7 +211,7 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     setMatchForcePending(match)
 
     match._displayPending = true
-    match.displayPendingPromise = loadPromise
+    match._nonReactive.displayPendingPromise = loadPromise
 
     loadPromise.then(() => {
       batch(() => {