@tanstack/router-core 1.127.0 → 1.127.3

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

@@ -1,4 +1,6 @@
 import invariant from "tiny-invariant";
+import { batch } from "@tanstack/store";
+import { createControlledPromise } from "../utils.js";
 function hydrateMatch(deyhydratedMatch) {
   return {
     id: deyhydratedMatch.i,
@@ -27,6 +29,23 @@ async function hydrate(router) {
       return router.loadRouteChunk(route);
     })
   );
+  function setMatchForcePending(match) {
+    const route = router.looseRoutesById[match.routeId];
+    const pendingMinMs = route.options.pendingMinMs ?? router.options.defaultPendingMinMs;
+    if (pendingMinMs) {
+      const minPendingPromise = createControlledPromise();
+      match.minPendingPromise = minPendingPromise;
+      match._forcePending = true;
+      setTimeout(() => {
+        minPendingPromise.resolve();
+        router.updateMatch(match.id, (prev) => ({
+          ...prev,
+          minPendingPromise: void 0,
+          _forcePending: void 0
+        }));
+      }, pendingMinMs);
+    }
+  }
   let firstNonSsrMatchIndex = void 0;
   matches.forEach((match) => {
     const dehydratedMatch = window.$_TSR.router.matches.find(
@@ -45,12 +64,9 @@ async function hydrate(router) {
     if (match.ssr === "data-only" || match.ssr === false) {
       if (firstNonSsrMatchIndex === void 0) {
         firstNonSsrMatchIndex = match.index;
-        match._forcePending = true;
+        setMatchForcePending(match);
       }
     }
-    if (match.ssr === false) {
-      return;
-    }
   });
   router.__store.setState((s) => {
     return {
@@ -98,27 +114,42 @@ async function hydrate(router) {
       match.scripts = scripts;
     })
   );
+  const isSpaMode = matches[matches.length - 1].id !== lastMatchId;
+  const hasSsrFalseMatches = matches.some((m) => m.ssr === false);
+  if (!hasSsrFalseMatches && !isSpaMode) {
+    matches.forEach((match) => {
+      match._dehydrated = void 0;
+    });
+    return routeChunkPromise;
+  }
   const loadPromise = Promise.resolve().then(() => router.load()).catch((err) => {
     console.error("Error during router hydration:", err);
   });
-  if (matches[matches.length - 1].id !== lastMatchId) {
-    const matchId = matches[0].id;
-    router.updateMatch(matchId, (prev) => {
-      return {
-        ...prev,
-        _displayPending: true,
-        displayPendingPromise: loadPromise,
-        // make sure that the pending component is displayed for at least pendingMinMs
-        _forcePending: true
-      };
-    });
+  if (isSpaMode) {
+    const match = matches[1];
+    invariant(
+      match,
+      "Expected to find a match below the root match in SPA mode."
+    );
+    setMatchForcePending(match);
+    match._displayPending = true;
+    match.displayPendingPromise = loadPromise;
     loadPromise.then(() => {
-      router.updateMatch(matchId, (prev) => {
-        return {
-          ...prev,
-          _displayPending: void 0,
-          displayPendingPromise: void 0
-        };
+      batch(() => {
+        if (router.__store.state.status === "pending") {
+          router.__store.setState((s) => ({
+            ...s,
+            status: "idle",
+            resolvedLocation: s.location
+          }));
+        }
+        router.updateMatch(match.id, (prev) => {
+          return {
+            ...prev,
+            _displayPending: void 0,
+            displayPendingPromise: void 0
+          };
+        });
       });
     });
   }

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 type { 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  // 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        match._forcePending = true\n      }\n    }\n\n    if (match.ssr === false) {\n      return\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  // 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 outermost match  pending until router.load() is finished\n  // this will prevent that other pending components are rendered but hydration is not blocked\n  if (matches[matches.length - 1]!.id !== lastMatchId) {\n    const matchId = matches[0]!.id\n    router.updateMatch(matchId, (prev) => {\n      return {\n        ...prev,\n        _displayPending: true,\n        displayPendingPromise: loadPromise,\n        // make sure that the pending component is displayed for at least pendingMinMs\n        _forcePending: true,\n      }\n    })\n    // hide the pending component once the load is finished\n    loadPromise.then(() => {\n      router.updateMatch(matchId, (prev) => {\n        return {\n          ...prev,\n          _displayPending: undefined,\n          displayPendingPromise: undefined,\n        }\n      })\n    })\n  }\n  return routeChunkPromise\n}\n"],"names":["_b","_a","_c"],"mappings":";AAmBA,SAAS,aACP,kBACyB;AAClB,SAAA;AAAA,IACL,IAAI,iBAAiB;AAAA,IACrB,qBAAqB,iBAAiB;AAAA,IACtC,YAAY,iBAAiB;AAAA,IAC7B,QAAQ,iBAAiB;AAAA,IACzB,KAAK,iBAAiB;AAAA,IACtB,WAAW,iBAAiB;AAAA,IAC5B,OAAO,iBAAiB;AAAA,EAC1B;AACF;AAkBA,eAAsB,QAAQ,QAAiC;;AAC7D;AAAA,KACE,YAAO,UAAP,mBAAc;AAAA,IACd;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE/D,SAAO,MAAM;AAAA,IACX;AAAA,EACF;AAGA,QAAM,UAAU,OAAO,YAAY,OAAO,MAAM,QAAQ;AAGxD,QAAM,oBAAoB,QAAQ;AAAA,IAChC,QAAQ,IAAI,CAAC,UAAU;AACrB,YAAM,QAAQ,OAAO,gBAAgB,MAAM,OAAO;AAC3C,aAAA,OAAO,eAAe,KAAK;AAAA,IACnC,CAAA;AAAA,EACH;AAIA,MAAI,wBAA4C;AACxC,UAAA,QAAQ,CAAC,UAAU;AACzB,UAAM,kBAAkB,OAAO,MAAO,OAAQ,QAAQ;AAAA,MACpD,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,IACvB;AACA,QAAI,CAAC,iBAAiB;AACpB,aAAO,OAAO,OAAO,EAAE,YAAY,OAAO,KAAK,OAAO;AACtD;AAAA,IAAA;AAGF,WAAO,OAAO,OAAO,aAAa,eAAe,CAAC;AAE9C,QAAA,MAAM,QAAQ,OAAO;AACvB,YAAM,cAAc;AAAA,IAAA,OACf;AACL,YAAM,cAAc;AAAA,IAAA;AAGtB,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,OAAO;AACpD,UAAI,0BAA0B,QAAW;AACvC,gCAAwB,MAAM;AAC9B,cAAM,gBAAgB;AAAA,MAAA;AAAA,IACxB;AAGE,QAAA,MAAM,QAAQ,OAAO;AACvB;AAAA,IAAA;AAAA,EACF,CACD;AAEM,SAAA,QAAQ,SAAS,CAAC,MAAM;AACtB,WAAA;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IACF;AAAA,EAAA,CACD;AAGK,UAAA,kBAAO,SAAQ,YAAf,4BAAyB;AAK/B,QAAM,QAAQ;AAAA,IACZ,OAAO,MAAM,QAAQ,IAAI,OAAO,UAAU;;AACxC,YAAM,QAAQ,OAAO,gBAAgB,MAAM,OAAO;AAElD,YAAM,cAAc,OAAO,MAAM,QAAQ,MAAM,QAAQ,CAAC;AACxD,YAAM,iBAAgB,2CAAa,YAAW,OAAO,QAAQ,WAAW,CAAC;AAIzE,YAAM,mBAA4D;AAAA,QAChE,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM;AAAA,QACd,SAAS;AAAA,QACT,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,CAAC,SACT,OAAO,SAAS,EAAE,GAAG,MAAM,eAAe,OAAO,MAAM,SAAA,CAAU;AAAA,QACnE,eAAe,OAAO;AAAA,QACtB,OAAO,MAAM;AAAA,QACb,iBAAiB,MAAM;AAAA,QACvB,SAAS;AAAA,QACT;AAAA,MACF;AACA,YAAM,mBAAiBA,OAAAC,MAAA,MAAM,SAAQ,YAAd,gBAAAD,IAAA,KAAAC,KAAwB,sBAAqB,CAAC;AAErE,YAAM,UAAU;AAAA,QACd,GAAG;AAAA,QACH,GAAG,MAAM;AAAA,QACT,GAAG,MAAM;AAAA,MACX;AAEA,YAAM,eAAe;AAAA,QACnB,SAAS,OAAO,MAAM;AAAA,QACtB;AAAA,QACA,QAAQ,MAAM;AAAA,QACd,YAAY,MAAM;AAAA,MACpB;AACA,YAAM,gBAAgB,QAAM,MAAAC,MAAA,MAAM,SAAQ,SAAd,wBAAAA,KAAqB;AAEjD,YAAM,UAAU,QAAM,iBAAM,SAAQ,YAAd,4BAAwB;AAE9C,YAAM,OAAO,+CAAe;AAC5B,YAAM,QAAQ,+CAAe;AAC7B,YAAM,cAAc,+CAAe;AACnC,YAAM,SAAS,+CAAe;AAC9B,YAAM,UAAU;AAAA,IACjB,CAAA;AAAA,EACH;AAGA,QAAM,cAAc,QAAQ,QAAQ,EACjC,KAAK,MAAM,OAAO,KAAM,CAAA,EACxB,MAAM,CAAC,QAAQ;AACN,YAAA,MAAM,kCAAkC,GAAG;AAAA,EAAA,CACpD;AAIH,MAAI,QAAQ,QAAQ,SAAS,CAAC,EAAG,OAAO,aAAa;AAC7C,UAAA,UAAU,QAAQ,CAAC,EAAG;AACrB,WAAA,YAAY,SAAS,CAAC,SAAS;AAC7B,aAAA;AAAA,QACL,GAAG;AAAA,QACH,iBAAiB;AAAA,QACjB,uBAAuB;AAAA;AAAA,QAEvB,eAAe;AAAA,MACjB;AAAA,IAAA,CACD;AAED,gBAAY,KAAK,MAAM;AACd,aAAA,YAAY,SAAS,CAAC,SAAS;AAC7B,eAAA;AAAA,UACL,GAAG;AAAA,UACH,iBAAiB;AAAA,UACjB,uBAAuB;AAAA,QACzB;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA;AAEI,SAAA;AACT;"}
+{"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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"}

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

@@ -61,12 +61,16 @@ function attachRouterServerSsrUtils(router, manifest) {
     dehydrate: async () => {
       var _a, _b, _c;
       invariant(!_dehydrated, "router is already dehydrated!");
-      const matches = router.state.matches.map(dehydrateMatch);
+      let matchesToDehydrate = router.state.matches;
+      if (router.isShell()) {
+        matchesToDehydrate = matchesToDehydrate.slice(0, 1);
+      }
+      const matches = matchesToDehydrate.map(dehydrateMatch);
       const dehydratedRouter = {
         manifest: router.ssr.manifest,
         matches
       };
-      const lastMatchId = (_a = router.state.matches[router.state.matches.length - 1]) == null ? void 0 : _a.id;
+      const lastMatchId = (_a = matchesToDehydrate[matchesToDehydrate.length - 1]) == null ? void 0 : _a.id;
       if (lastMatchId) {
         dehydratedRouter.lastMatchId = lastMatchId;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"ssr-server.js","sources":["../../../src/ssr/ssr-server.ts"],"sourcesContent":["import { crossSerializeStream, getCrossReferenceHeader } from 'seroval'\nimport { ReadableStreamPlugin } from 'seroval-plugins/web'\nimport invariant from 'tiny-invariant'\nimport { createControlledPromise } from '../utils'\nimport minifiedTsrBootStrapScript from './tsrScript?script-string'\nimport { ShallowErrorPlugin } from './seroval-plugins'\nimport type { AnyRouter } from '../router'\nimport type { DehydratedMatch } from './ssr-client'\nimport type { DehydratedRouter } from './client'\nimport type { AnyRouteMatch } from '../Matches'\nimport type { Manifest } from '../manifest'\n\ndeclare module '../router' {\n  interface ServerSsr {\n    setRenderFinished: () => void\n  }\n  interface RouterEvents {\n    onInjectedHtml: {\n      type: 'onInjectedHtml'\n      promise: Promise<string>\n    }\n  }\n}\n\nexport const GLOBAL_TSR = '$_TSR'\nconst SCOPE_ID = 'tsr'\n\nexport function dehydrateMatch(match: AnyRouteMatch): DehydratedMatch {\n  const dehydratedMatch: DehydratedMatch = {\n    i: match.id,\n    u: match.updatedAt,\n    s: match.status,\n  }\n\n  const properties = [\n    ['__beforeLoadContext', 'b'],\n    ['loaderData', 'l'],\n    ['error', 'e'],\n    ['ssr', 'ssr'],\n  ] as const\n\n  for (const [key, shorthand] of properties) {\n    if (match[key] !== undefined) {\n      dehydratedMatch[shorthand] = match[key]\n    }\n  }\n  return dehydratedMatch\n}\n\nexport function attachRouterServerSsrUtils(\n  router: AnyRouter,\n  manifest: Manifest | undefined,\n) {\n  router.ssr = {\n    manifest,\n  }\n  const serializationRefs = new Map<unknown, number>()\n\n  let initialScriptSent = false\n  const getInitialScript = () => {\n    if (initialScriptSent) {\n      return ''\n    }\n    initialScriptSent = true\n    return `${getCrossReferenceHeader(SCOPE_ID)};${minifiedTsrBootStrapScript};`\n  }\n  let _dehydrated = false\n  const listeners: Array<() => void> = []\n\n  router.serverSsr = {\n    injectedHtml: [],\n    injectHtml: (getHtml) => {\n      const promise = Promise.resolve().then(getHtml)\n      router.serverSsr!.injectedHtml.push(promise)\n      router.emit({\n        type: 'onInjectedHtml',\n        promise,\n      })\n\n      return promise.then(() => {})\n    },\n    injectScript: (getScript) => {\n      return router.serverSsr!.injectHtml(async () => {\n        const script = await getScript()\n        return `<script class='$tsr'>${getInitialScript()}${script};if (typeof $_TSR !== 'undefined') $_TSR.c()</script>`\n      })\n    },\n    dehydrate: async () => {\n      invariant(!_dehydrated, 'router is already dehydrated!')\n      const matches = router.state.matches.map(dehydrateMatch)\n\n      const dehydratedRouter: DehydratedRouter = {\n        manifest: router.ssr!.manifest,\n        matches,\n      }\n      const lastMatchId =\n        router.state.matches[router.state.matches.length - 1]?.id\n      if (lastMatchId) {\n        dehydratedRouter.lastMatchId = lastMatchId\n      }\n      dehydratedRouter.dehydratedData = await router.options.dehydrate?.()\n      _dehydrated = true\n\n      const p = createControlledPromise<string>()\n      crossSerializeStream(dehydratedRouter, {\n        refs: serializationRefs,\n        // TODO make plugins configurable\n        plugins: [ReadableStreamPlugin, ShallowErrorPlugin],\n        onSerialize: (data, initial) => {\n          const serialized = initial ? `${GLOBAL_TSR}[\"router\"]=` + data : data\n          router.serverSsr!.injectScript(() => serialized)\n        },\n        scopeId: SCOPE_ID,\n        onDone: () => p.resolve(''),\n        onError: (err) => p.reject(err),\n      })\n      // make sure the stream is kept open until the promise is resolved\n      router.serverSsr!.injectHtml(() => p)\n    },\n    isDehydrated() {\n      return _dehydrated\n    },\n    onRenderFinished: (listener) => listeners.push(listener),\n    setRenderFinished: () => {\n      listeners.forEach((l) => l())\n    },\n  }\n}\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,aAAa;AAC1B,MAAM,WAAW;AAEV,SAAS,eAAe,OAAuC;AACpE,QAAM,kBAAmC;AAAA,IACvC,GAAG,MAAM;AAAA,IACT,GAAG,MAAM;AAAA,IACT,GAAG,MAAM;AAAA,EACX;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,uBAAuB,GAAG;AAAA,IAC3B,CAAC,cAAc,GAAG;AAAA,IAClB,CAAC,SAAS,GAAG;AAAA,IACb,CAAC,OAAO,KAAK;AAAA,EACf;AAEA,aAAW,CAAC,KAAK,SAAS,KAAK,YAAY;AACrC,QAAA,MAAM,GAAG,MAAM,QAAW;AACZ,sBAAA,SAAS,IAAI,MAAM,GAAG;AAAA,IAAA;AAAA,EACxC;AAEK,SAAA;AACT;AAEgB,SAAA,2BACd,QACA,UACA;AACA,SAAO,MAAM;AAAA,IACX;AAAA,EACF;AACM,QAAA,wCAAwB,IAAqB;AAEnD,MAAI,oBAAoB;AACxB,QAAM,mBAAmB,MAAM;AAC7B,QAAI,mBAAmB;AACd,aAAA;AAAA,IAAA;AAEW,wBAAA;AACpB,WAAO,GAAG,wBAAwB,QAAQ,CAAC,IAAI,0BAA0B;AAAA,EAC3E;AACA,MAAI,cAAc;AAClB,QAAM,YAA+B,CAAC;AAEtC,SAAO,YAAY;AAAA,IACjB,cAAc,CAAC;AAAA,IACf,YAAY,CAAC,YAAY;AACvB,YAAM,UAAU,QAAQ,QAAQ,EAAE,KAAK,OAAO;AACvC,aAAA,UAAW,aAAa,KAAK,OAAO;AAC3C,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAEM,aAAA,QAAQ,KAAK,MAAM;AAAA,MAAA,CAAE;AAAA,IAC9B;AAAA,IACA,cAAc,CAAC,cAAc;AACpB,aAAA,OAAO,UAAW,WAAW,YAAY;AACxC,cAAA,SAAS,MAAM,UAAU;AAC/B,eAAO,wBAAwB,iBAAkB,CAAA,GAAG,MAAM;AAAA,MAAA,CAC3D;AAAA,IACH;AAAA,IACA,WAAW,YAAY;;AACX,gBAAA,CAAC,aAAa,+BAA+B;AACvD,YAAM,UAAU,OAAO,MAAM,QAAQ,IAAI,cAAc;AAEvD,YAAM,mBAAqC;AAAA,QACzC,UAAU,OAAO,IAAK;AAAA,QACtB;AAAA,MACF;AACM,YAAA,eACJ,YAAO,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS,CAAC,MAApD,mBAAuD;AACzD,UAAI,aAAa;AACf,yBAAiB,cAAc;AAAA,MAAA;AAEjC,uBAAiB,iBAAiB,QAAM,kBAAO,SAAQ,cAAf;AAC1B,oBAAA;AAEd,YAAM,IAAI,wBAAgC;AAC1C,2BAAqB,kBAAkB;AAAA,QACrC,MAAM;AAAA;AAAA,QAEN,SAAS,CAAC,sBAAsB,kBAAkB;AAAA,QAClD,aAAa,CAAC,MAAM,YAAY;AAC9B,gBAAM,aAAa,UAAU,GAAG,UAAU,gBAAgB,OAAO;AAC1D,iBAAA,UAAW,aAAa,MAAM,UAAU;AAAA,QACjD;AAAA,QACA,SAAS;AAAA,QACT,QAAQ,MAAM,EAAE,QAAQ,EAAE;AAAA,QAC1B,SAAS,CAAC,QAAQ,EAAE,OAAO,GAAG;AAAA,MAAA,CAC/B;AAEM,aAAA,UAAW,WAAW,MAAM,CAAC;AAAA,IACtC;AAAA,IACA,eAAe;AACN,aAAA;AAAA,IACT;AAAA,IACA,kBAAkB,CAAC,aAAa,UAAU,KAAK,QAAQ;AAAA,IACvD,mBAAmB,MAAM;AACvB,gBAAU,QAAQ,CAAC,MAAM,EAAA,CAAG;AAAA,IAAA;AAAA,EAEhC;AACF;"}
+{"version":3,"file":"ssr-server.js","sources":["../../../src/ssr/ssr-server.ts"],"sourcesContent":["import { crossSerializeStream, getCrossReferenceHeader } from 'seroval'\nimport { ReadableStreamPlugin } from 'seroval-plugins/web'\nimport invariant from 'tiny-invariant'\nimport { createControlledPromise } from '../utils'\nimport minifiedTsrBootStrapScript from './tsrScript?script-string'\nimport { ShallowErrorPlugin } from './seroval-plugins'\nimport type { AnyRouter } from '../router'\nimport type { DehydratedMatch } from './ssr-client'\nimport type { DehydratedRouter } from './client'\nimport type { AnyRouteMatch } from '../Matches'\nimport type { Manifest } from '../manifest'\n\ndeclare module '../router' {\n  interface ServerSsr {\n    setRenderFinished: () => void\n  }\n  interface RouterEvents {\n    onInjectedHtml: {\n      type: 'onInjectedHtml'\n      promise: Promise<string>\n    }\n  }\n}\n\nexport const GLOBAL_TSR = '$_TSR'\nconst SCOPE_ID = 'tsr'\n\nexport function dehydrateMatch(match: AnyRouteMatch): DehydratedMatch {\n  const dehydratedMatch: DehydratedMatch = {\n    i: match.id,\n    u: match.updatedAt,\n    s: match.status,\n  }\n\n  const properties = [\n    ['__beforeLoadContext', 'b'],\n    ['loaderData', 'l'],\n    ['error', 'e'],\n    ['ssr', 'ssr'],\n  ] as const\n\n  for (const [key, shorthand] of properties) {\n    if (match[key] !== undefined) {\n      dehydratedMatch[shorthand] = match[key]\n    }\n  }\n  return dehydratedMatch\n}\n\nexport function attachRouterServerSsrUtils(\n  router: AnyRouter,\n  manifest: Manifest | undefined,\n) {\n  router.ssr = {\n    manifest,\n  }\n  const serializationRefs = new Map<unknown, number>()\n\n  let initialScriptSent = false\n  const getInitialScript = () => {\n    if (initialScriptSent) {\n      return ''\n    }\n    initialScriptSent = true\n    return `${getCrossReferenceHeader(SCOPE_ID)};${minifiedTsrBootStrapScript};`\n  }\n  let _dehydrated = false\n  const listeners: Array<() => void> = []\n\n  router.serverSsr = {\n    injectedHtml: [],\n    injectHtml: (getHtml) => {\n      const promise = Promise.resolve().then(getHtml)\n      router.serverSsr!.injectedHtml.push(promise)\n      router.emit({\n        type: 'onInjectedHtml',\n        promise,\n      })\n\n      return promise.then(() => {})\n    },\n    injectScript: (getScript) => {\n      return router.serverSsr!.injectHtml(async () => {\n        const script = await getScript()\n        return `<script class='$tsr'>${getInitialScript()}${script};if (typeof $_TSR !== 'undefined') $_TSR.c()</script>`\n      })\n    },\n    dehydrate: async () => {\n      invariant(!_dehydrated, 'router is already dehydrated!')\n      let matchesToDehydrate = router.state.matches\n      if (router.isShell()) {\n        // In SPA mode we only want to dehydrate the root match\n        matchesToDehydrate = matchesToDehydrate.slice(0, 1)\n      }\n      const matches = matchesToDehydrate.map(dehydrateMatch)\n\n      const dehydratedRouter: DehydratedRouter = {\n        manifest: router.ssr!.manifest,\n        matches,\n      }\n      const lastMatchId = matchesToDehydrate[matchesToDehydrate.length - 1]?.id\n      if (lastMatchId) {\n        dehydratedRouter.lastMatchId = lastMatchId\n      }\n      dehydratedRouter.dehydratedData = await router.options.dehydrate?.()\n      _dehydrated = true\n\n      const p = createControlledPromise<string>()\n      crossSerializeStream(dehydratedRouter, {\n        refs: serializationRefs,\n        // TODO make plugins configurable\n        plugins: [ReadableStreamPlugin, ShallowErrorPlugin],\n        onSerialize: (data, initial) => {\n          const serialized = initial ? `${GLOBAL_TSR}[\"router\"]=` + data : data\n          router.serverSsr!.injectScript(() => serialized)\n        },\n        scopeId: SCOPE_ID,\n        onDone: () => p.resolve(''),\n        onError: (err) => p.reject(err),\n      })\n      // make sure the stream is kept open until the promise is resolved\n      router.serverSsr!.injectHtml(() => p)\n    },\n    isDehydrated() {\n      return _dehydrated\n    },\n    onRenderFinished: (listener) => listeners.push(listener),\n    setRenderFinished: () => {\n      listeners.forEach((l) => l())\n    },\n  }\n}\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,aAAa;AAC1B,MAAM,WAAW;AAEV,SAAS,eAAe,OAAuC;AACpE,QAAM,kBAAmC;AAAA,IACvC,GAAG,MAAM;AAAA,IACT,GAAG,MAAM;AAAA,IACT,GAAG,MAAM;AAAA,EACX;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,uBAAuB,GAAG;AAAA,IAC3B,CAAC,cAAc,GAAG;AAAA,IAClB,CAAC,SAAS,GAAG;AAAA,IACb,CAAC,OAAO,KAAK;AAAA,EACf;AAEA,aAAW,CAAC,KAAK,SAAS,KAAK,YAAY;AACrC,QAAA,MAAM,GAAG,MAAM,QAAW;AACZ,sBAAA,SAAS,IAAI,MAAM,GAAG;AAAA,IAAA;AAAA,EACxC;AAEK,SAAA;AACT;AAEgB,SAAA,2BACd,QACA,UACA;AACA,SAAO,MAAM;AAAA,IACX;AAAA,EACF;AACM,QAAA,wCAAwB,IAAqB;AAEnD,MAAI,oBAAoB;AACxB,QAAM,mBAAmB,MAAM;AAC7B,QAAI,mBAAmB;AACd,aAAA;AAAA,IAAA;AAEW,wBAAA;AACpB,WAAO,GAAG,wBAAwB,QAAQ,CAAC,IAAI,0BAA0B;AAAA,EAC3E;AACA,MAAI,cAAc;AAClB,QAAM,YAA+B,CAAC;AAEtC,SAAO,YAAY;AAAA,IACjB,cAAc,CAAC;AAAA,IACf,YAAY,CAAC,YAAY;AACvB,YAAM,UAAU,QAAQ,QAAQ,EAAE,KAAK,OAAO;AACvC,aAAA,UAAW,aAAa,KAAK,OAAO;AAC3C,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAEM,aAAA,QAAQ,KAAK,MAAM;AAAA,MAAA,CAAE;AAAA,IAC9B;AAAA,IACA,cAAc,CAAC,cAAc;AACpB,aAAA,OAAO,UAAW,WAAW,YAAY;AACxC,cAAA,SAAS,MAAM,UAAU;AAC/B,eAAO,wBAAwB,iBAAkB,CAAA,GAAG,MAAM;AAAA,MAAA,CAC3D;AAAA,IACH;AAAA,IACA,WAAW,YAAY;;AACX,gBAAA,CAAC,aAAa,+BAA+B;AACnD,UAAA,qBAAqB,OAAO,MAAM;AAClC,UAAA,OAAO,WAAW;AAEC,6BAAA,mBAAmB,MAAM,GAAG,CAAC;AAAA,MAAA;AAE9C,YAAA,UAAU,mBAAmB,IAAI,cAAc;AAErD,YAAM,mBAAqC;AAAA,QACzC,UAAU,OAAO,IAAK;AAAA,QACtB;AAAA,MACF;AACA,YAAM,eAAc,wBAAmB,mBAAmB,SAAS,CAAC,MAAhD,mBAAmD;AACvE,UAAI,aAAa;AACf,yBAAiB,cAAc;AAAA,MAAA;AAEjC,uBAAiB,iBAAiB,QAAM,kBAAO,SAAQ,cAAf;AAC1B,oBAAA;AAEd,YAAM,IAAI,wBAAgC;AAC1C,2BAAqB,kBAAkB;AAAA,QACrC,MAAM;AAAA;AAAA,QAEN,SAAS,CAAC,sBAAsB,kBAAkB;AAAA,QAClD,aAAa,CAAC,MAAM,YAAY;AAC9B,gBAAM,aAAa,UAAU,GAAG,UAAU,gBAAgB,OAAO;AAC1D,iBAAA,UAAW,aAAa,MAAM,UAAU;AAAA,QACjD;AAAA,QACA,SAAS;AAAA,QACT,QAAQ,MAAM,EAAE,QAAQ,EAAE;AAAA,QAC1B,SAAS,CAAC,QAAQ,EAAE,OAAO,GAAG;AAAA,MAAA,CAC/B;AAEM,aAAA,UAAW,WAAW,MAAM,CAAC;AAAA,IACtC;AAAA,IACA,eAAe;AACN,aAAA;AAAA,IACT;AAAA,IACA,kBAAkB,CAAC,aAAa,UAAU,KAAK,QAAQ;AAAA,IACvD,mBAAmB,MAAM;AACvB,gBAAU,QAAQ,CAAC,MAAM,EAAA,CAAG;AAAA,IAAA;AAAA,EAEhC;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-core",
-  "version": "1.127.0",
+  "version": "1.127.3",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -66,7 +66,6 @@
   "dependencies": {
     "@tanstack/store": "^0.7.0",
     "cookie-es": "^1.2.2",
-    "jsesc": "^3.1.0",
     "seroval": "^1.3.2",
     "seroval-plugins": "^1.3.2",
     "tiny-invariant": "^1.3.3",
@@ -74,7 +73,6 @@
     "@tanstack/history": "1.121.34"
   },
   "devDependencies": {
-    "@types/jsesc": "^3.0.3",
     "esbuild": "^0.25.0"
   },
   "scripts": {}

package/src/router.ts

@@ -341,6 +341,11 @@ export interface RouterOptions<
    */
   isServer?: boolean
 
+  /**
+   * @default false
+   */
+  isShell?: boolean
+
   /**
    * The default `ssr` a route should use if no `ssr` is provided.
    *
@@ -813,7 +818,9 @@ export class RouterCore<
   // router can be used in a non-react environment if necessary
   startTransition: StartTransitionFn = (fn) => fn()
 
-  isShell = false
+  isShell() {
+    return this.options.isShell
+  }
 
   update: UpdateFn<
     TRouteTree,
@@ -903,10 +910,6 @@ export class RouterCore<
         'selector(:active-view-transition-type(a)',
       )
     }
-
-    if ((this.latestLocation.search as any).__TSS_SHELL) {
-      this.isShell = true
-    }
   }
 
   get state() {
@@ -1787,11 +1790,7 @@ export class RouterCore<
       }
     }
     // Match the routes
-    let pendingMatches = this.matchRoutes(this.latestLocation)
-    // in SPA mode we only want to load the root route
-    if (this.isShell) {
-      pendingMatches = pendingMatches.slice(0, 1)
-    }
+    const pendingMatches = this.matchRoutes(this.latestLocation)
 
     // Ingest the new matches
     this.__store.setState((s) => ({
@@ -2064,40 +2063,6 @@ export class RouterCore<
     const triggerOnReady = async () => {
       if (!rendered) {
         rendered = true
-
-        // create a minPendingPromise for matches that have forcePending set to true
-        // usually the minPendingPromise is created in the Match component if a pending match is rendered
-        // however, this might be too late if the match synchronously resolves
-        if (!allPreload && !this.isServer) {
-          matches.forEach((match) => {
-            const {
-              id: matchId,
-              routeId,
-              _forcePending,
-              minPendingPromise,
-            } = match
-            const route = this.looseRoutesById[routeId]!
-            const pendingMinMs =
-              route.options.pendingMinMs ?? this.options.defaultPendingMinMs
-            if (_forcePending && pendingMinMs && !minPendingPromise) {
-              const minPendingPromise = createControlledPromise<void>()
-              updateMatch(matchId, (prev) => ({
-                ...prev,
-                minPendingPromise,
-              }))
-
-              setTimeout(() => {
-                minPendingPromise.resolve()
-                // We've handled the minPendingPromise, so we can delete it
-                updateMatch(matchId, (prev) => ({
-                  ...prev,
-                  minPendingPromise: undefined,
-                }))
-              }, pendingMinMs)
-            }
-          })
-        }
-
         await onReady?.()
       }
     }
@@ -2234,50 +2199,55 @@ export class RouterCore<
 
               // on the server, determine whether SSR the current match or not
               if (this.isServer) {
-                const defaultSsr = this.options.defaultSsr ?? true
                 let ssr: boolean | 'data-only'
-                if (parentMatch?.ssr === false) {
-                  ssr = false
+                // in SPA mode, only SSR the root route
+                if (this.isShell()) {
+                  ssr = matchId === rootRouteId
                 } else {
-                  let tempSsr: boolean | 'data-only'
-                  if (route.options.ssr === undefined) {
-                    tempSsr = defaultSsr
-                  } else if (typeof route.options.ssr === 'function') {
-                    const { search, params } = this.getMatch(matchId)!
-
-                    function makeMaybe(value: any, error: any) {
-                      if (error) {
-                        return { status: 'error' as const, error }
+                  const defaultSsr = this.options.defaultSsr ?? true
+                  if (parentMatch?.ssr === false) {
+                    ssr = false
+                  } else {
+                    let tempSsr: boolean | 'data-only'
+                    if (route.options.ssr === undefined) {
+                      tempSsr = defaultSsr
+                    } else if (typeof route.options.ssr === 'function') {
+                      const { search, params } = this.getMatch(matchId)!
+
+                      function makeMaybe(value: any, error: any) {
+                        if (error) {
+                          return { status: 'error' as const, error }
+                        }
+                        return { status: 'success' as const, value }
                       }
-                      return { status: 'success' as const, value }
-                    }
 
-                    const ssrFnContext: SsrContextOptions<any, any, any> = {
-                      search: makeMaybe(search, existingMatch.searchError),
-                      params: makeMaybe(params, existingMatch.paramsError),
-                      location,
-                      matches: matches.map((match) => ({
-                        index: match.index,
-                        pathname: match.pathname,
-                        fullPath: match.fullPath,
-                        staticData: match.staticData,
-                        id: match.id,
-                        routeId: match.routeId,
-                        search: makeMaybe(match.search, match.searchError),
-                        params: makeMaybe(match.params, match.paramsError),
-                        ssr: match.ssr,
-                      })),
+                      const ssrFnContext: SsrContextOptions<any, any, any> = {
+                        search: makeMaybe(search, existingMatch.searchError),
+                        params: makeMaybe(params, existingMatch.paramsError),
+                        location,
+                        matches: matches.map((match) => ({
+                          index: match.index,
+                          pathname: match.pathname,
+                          fullPath: match.fullPath,
+                          staticData: match.staticData,
+                          id: match.id,
+                          routeId: match.routeId,
+                          search: makeMaybe(match.search, match.searchError),
+                          params: makeMaybe(match.params, match.paramsError),
+                          ssr: match.ssr,
+                        })),
+                      }
+                      tempSsr =
+                        (await route.options.ssr(ssrFnContext)) ?? defaultSsr
+                    } else {
+                      tempSsr = route.options.ssr
                     }
-                    tempSsr =
-                      (await route.options.ssr(ssrFnContext)) ?? defaultSsr
-                  } else {
-                    tempSsr = route.options.ssr
-                  }
 
-                  if (tempSsr === true && parentMatch?.ssr === 'data-only') {
-                    ssr = 'data-only'
-                  } else {
-                    ssr = tempSsr
+                    if (tempSsr === true && parentMatch?.ssr === 'data-only') {
+                      ssr = 'data-only'
+                    } else {
+                      ssr = tempSsr
+                    }
                   }
                 }
                 updateMatch(matchId, (prev) => ({
@@ -2505,8 +2475,6 @@ export class RouterCore<
                         ...head,
                       }))
                       return this.getMatch(matchId)!
-                    } else {
-                      await potentialPendingMinPromise()
                     }
                   }
                   // there is a loaderPromise, so we are in the middle of a load
@@ -2678,18 +2646,13 @@ export class RouterCore<
                     }
 
                     // If the route is successful and still fresh, just resolve
-                    const { status, invalid, _forcePending } =
-                      this.getMatch(matchId)!
+                    const { status, invalid } = this.getMatch(matchId)!
                     loaderShouldRunAsync =
                       status === 'success' &&
                       (invalid || (shouldReload ?? age > staleAge))
                     if (preload && route.options.preload === false) {
                       // Do nothing
-                    } else if (
-                      loaderShouldRunAsync &&
-                      !sync &&
-                      !_forcePending
-                    ) {
+                    } else if (loaderShouldRunAsync && !sync) {
                       loaderIsRunningAsync = true
                       ;(async () => {
                         try {
@@ -2714,9 +2677,6 @@ export class RouterCore<
                     ) {
                       await runLoader()
                     } else {
-                      if (_forcePending) {
-                        await potentialPendingMinPromise()
-                      }
                       // if the loader did not run, still update head.
                       // reason: parent's beforeLoad may have changed the route context
                       // and only now do we know the route context (and that the loader would not run)
@@ -2747,7 +2707,6 @@ export class RouterCore<
                       invalid: false,
                       pendingTimeout: undefined,
                       _dehydrated: undefined,
-                      _forcePending: undefined,
                     }
                   })
                   return this.getMatch(matchId)!

package/src/ssr/ssr-client.ts

@@ -1,5 +1,7 @@
 import invariant from 'tiny-invariant'
-import type { MakeRouteMatch } from '../Matches'
+import { batch } from '@tanstack/store'
+import { createControlledPromise } from '../utils'
+import type { AnyRouteMatch, MakeRouteMatch } from '../Matches'
 import type { AnyRouter } from '../router'
 import type { Manifest } from '../manifest'
 import type { RouteContextOptions } from '../route'
@@ -70,6 +72,29 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     }),
   )
 
+  function setMatchForcePending(match: AnyRouteMatch) {
+    // usually the minPendingPromise is created in the Match component if a pending match is rendered
+    // however, this might be too late if the match synchronously resolves
+    const route = router.looseRoutesById[match.routeId]!
+    const pendingMinMs =
+      route.options.pendingMinMs ?? router.options.defaultPendingMinMs
+    if (pendingMinMs) {
+      const minPendingPromise = createControlledPromise<void>()
+      match.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,
+        }))
+      }, pendingMinMs)
+    }
+  }
+
   // Right after hydration and before the first render, we need to rehydrate each match
   // First step is to reyhdrate loaderData and __beforeLoadContext
   let firstNonSsrMatchIndex: number | undefined = undefined
@@ -93,13 +118,9 @@ export async function hydrate(router: AnyRouter): Promise<any> {
     if (match.ssr === 'data-only' || match.ssr === false) {
       if (firstNonSsrMatchIndex === undefined) {
         firstNonSsrMatchIndex = match.index
-        match._forcePending = true
+        setMatchForcePending(match)
       }
     }
-
-    if (match.ssr === false) {
-      return
-    }
   })
 
   router.__store.setState((s) => {
@@ -163,6 +184,17 @@ 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()
+  if (!hasSsrFalseMatches && !isSpaMode) {
+    matches.forEach((match) => {
+      // remove the _dehydrate flag since we won't run router.load() which would remove it
+      match._dehydrated = undefined
+    })
+    return routeChunkPromise
+  }
+
   // schedule router.load() to run after the next tick so we can store the promise in the match before loading starts
   const loadPromise = Promise.resolve()
     .then(() => router.load())
@@ -170,27 +202,39 @@ export async function hydrate(router: AnyRouter): Promise<any> {
       console.error('Error during router hydration:', err)
     })
 
-  // in SPA mode we need to keep the outermost match  pending until router.load() is finished
+  // in SPA mode we need to keep the first match below the root route pending until router.load() is finished
   // this will prevent that other pending components are rendered but hydration is not blocked
-  if (matches[matches.length - 1]!.id !== lastMatchId) {
-    const matchId = matches[0]!.id
-    router.updateMatch(matchId, (prev) => {
-      return {
-        ...prev,
-        _displayPending: true,
-        displayPendingPromise: loadPromise,
-        // make sure that the pending component is displayed for at least pendingMinMs
-        _forcePending: true,
-      }
-    })
-    // hide the pending component once the load is finished
+  if (isSpaMode) {
+    const match = matches[1]
+    invariant(
+      match,
+      'Expected to find a match below the root match in SPA mode.',
+    )
+    setMatchForcePending(match)
+
+    match._displayPending = true
+    match.displayPendingPromise = loadPromise
+
     loadPromise.then(() => {
-      router.updateMatch(matchId, (prev) => {
-        return {
-          ...prev,
-          _displayPending: undefined,
-          displayPendingPromise: undefined,
+      batch(() => {
+        // ensure router is not in status 'pending' anymore
+        // this usually happens in Transitioner but if loading synchronously resolves,
+        // Transitioner won't be rendered while loading so it cannot track the change from loading:true to loading:false
+        if (router.__store.state.status === 'pending') {
+          router.__store.setState((s) => ({
+            ...s,
+            status: 'idle',
+            resolvedLocation: s.location,
+          }))
         }
+        // hide the pending component once the load is finished
+        router.updateMatch(match.id, (prev) => {
+          return {
+            ...prev,
+            _displayPending: undefined,
+            displayPendingPromise: undefined,
+          }
+        })
       })
     })
   }

package/src/ssr/ssr-server.ts

@@ -87,14 +87,18 @@ export function attachRouterServerSsrUtils(
     },
     dehydrate: async () => {
       invariant(!_dehydrated, 'router is already dehydrated!')
-      const matches = router.state.matches.map(dehydrateMatch)
+      let matchesToDehydrate = router.state.matches
+      if (router.isShell()) {
+        // In SPA mode we only want to dehydrate the root match
+        matchesToDehydrate = matchesToDehydrate.slice(0, 1)
+      }
+      const matches = matchesToDehydrate.map(dehydrateMatch)
 
       const dehydratedRouter: DehydratedRouter = {
         manifest: router.ssr!.manifest,
         matches,
       }
-      const lastMatchId =
-        router.state.matches[router.state.matches.length - 1]?.id
+      const lastMatchId = matchesToDehydrate[matchesToDehydrate.length - 1]?.id
       if (lastMatchId) {
         dehydratedRouter.lastMatchId = lastMatchId
       }