@nifrajs/web 2.14.1 → 3.2.0

package/src/router.ts

@@ -7,7 +7,9 @@
 import { decodeRouteParams } from "@nifrajs/core/pattern"
 import { Router as CoreRouter } from "@nifrajs/core/router"
 import type { StandardSchemaV1 } from "@nifrajs/core/server"
+import type { BoundaryDescriptor, BoundaryStates } from "./boundary.ts"
 import { parseNdjsonData } from "./deferred.ts"
+import type { ClientActionResult, ClientRequestBody, ClientRouteHooks } from "./manifest.ts"
 import { isClientOnlySearchChange } from "./search.ts"
 
 /**
@@ -89,6 +91,8 @@ export interface RouteDataEnvelope {
   /** Indices whose loader was SKIPPED because the layout's own params did not change. The client
    * keeps its existing value at each of these, so an unchanged layout is neither refetched nor lost. */
   readonly retained?: readonly number[]
+  /** Dynamic-boundary states returned alongside loader/layout data. */
+  readonly boundaries?: BoundaryStates
   /** Terminal status signalled by a loader. Added by the browser transport after reading
    * `X-Nifra-Status`; old servers and static data files simply omit it. */
   readonly status?: number
@@ -128,6 +132,8 @@ export interface RouterState {
   /** Per-layout loader data, aligned with the matched chain's leading layout prefix. Absent when no
    * layout in that chain has a loader. */
   readonly layoutData?: readonly unknown[] | undefined
+  /** Neutral named-boundary states for the active route. */
+  readonly boundaries?: BoundaryStates
   /** An action's data return after a client-side submit (cleared on navigation). */
   readonly actionData?: unknown
   /** True while a navigation or submit is in flight (drives loading UI). */
@@ -209,7 +215,7 @@ export interface FetcherState {
 /**
  * An independent load/submit state machine, retrieved by `router.fetcher(key)`. Runs **concurrently**
  * with the main router and with other fetchers - each is single-flight against *itself* (its own
- * monotonic token), so N row-level mutations / side-channel loads can be in flight at once without
+ * monotonic generation), so N row-level mutations / side-channel loads can be in flight at once without
  * disturbing the active view. Loads/submits write the shared cache and honor `X-Nifra-Revalidate`.
  */
 export interface Fetcher {
@@ -247,6 +253,8 @@ export interface ClientRouter {
     body: NonNullable<RequestInit["body"]>,
     opts?: SubmitOptions,
   ) => Promise<void>
+  /** Run the initial route's client loader after the adapter has hydrated the SSR markup. */
+  hydrate: () => Promise<void>
   /**
    * Mark cached route data stale and refresh the active view. With `paths`, target exactly those
    * (e.g. the routes a mutation changed); without, invalidate the whole cache. The active route
@@ -295,6 +303,8 @@ export interface ClientRouterOptions {
    * entry's `loadModule` (so a route's keys are present once it has been visited, which is exactly when a
    * same-route nav can consult them). Omit ⇒ every search change revalidates (the safe default). */
   readonly searchClientKeys?: Readonly<Record<string, readonly string[]>>
+  /** routeId → client-only loader/action hooks, populated by the generated route entry. */
+  readonly routeHooks?: Readonly<Record<string, ClientRouteHooks | undefined>>
 }
 
 /** Options for a per-adapter `mountRouter` (the Router binding that hydrates + re-renders). */
@@ -378,7 +388,7 @@ const defaultFetchData: FetchRouteData = async (path, _match, signal, navigation
 }
 
 /**
- * Create the agnostic router store. `navigate` is guarded by a monotonic token so that when
+ * Create the agnostic router store. `navigate` is guarded by a monotonic generation so that when
  * navigations overlap, only the latest result is applied (rapid clicks don't flash stale data).
  * A failed fetch clears `pending` and rethrows so the caller can fall back to a full-page load.
  */
@@ -393,12 +403,58 @@ const rawSearchOf = (path: string): string => {
   return q === -1 ? "" : path.slice(q)
 }
 
+/** Validate the client-action envelope before reading it. Its `body` is deliberately not treated as
+ * trusted data: it is an opaque RequestInit body that the server action must parse and authorize. */
+const isClientActionResult = (value: unknown): value is ClientActionResult =>
+  typeof value === "object" && value !== null && !Array.isArray(value)
+
 export function createClientRouter(options: ClientRouterOptions): ClientRouter {
   const match = createMatcher(options.patterns)
   const fetchData = options.fetchData ?? defaultFetchData
   // routeId → the route's client-only search keys. Read by reference (the generated entry keeps writing
   // to it as routes load), so a same-route nav always sees the current route's keys.
   const searchClientKeys = options.searchClientKeys ?? {}
+  // routeId → client hooks. The generated entry mutates this object only while loading a route module;
+  // route navigation reads it after `loadModule` resolves, so an app without hooks pays only a map
+  // lookup and keeps the existing route-chunk split.
+  const routeHooks = options.routeHooks ?? {}
+  // Intercept patterns are compiled lazily from the already-loaded source route descriptor. Invalid
+  // client metadata is ignored (the server's register-time boundary validation remains authoritative),
+  // so a hand-built client manifest fails closed into an ordinary navigation.
+  const interceptMatchers = new Map<string, ReturnType<typeof createMatcher> | null>()
+  const interceptionFor = (
+    sourceRouteId: string,
+    path: string,
+    target: RouteMatch,
+  ): BoundaryDescriptor | undefined => {
+    const boundaries = routeHooks[sourceRouteId]?.boundaries ?? []
+    const pathname = pathnameOf(path)
+    for (const boundary of boundaries) {
+      if (typeof boundary.mode === "string") continue
+      const pattern = boundary.mode.intercept
+      if (
+        pattern.length === 0 ||
+        pattern.length > 2048 ||
+        !pattern.startsWith("/") ||
+        pattern.startsWith("//")
+      )
+        continue
+      let matcher = interceptMatchers.get(pattern)
+      if (matcher === undefined) {
+        try {
+          matcher = createMatcher([{ routeId: "__nifra_intercept__", pattern }])
+        } catch {
+          matcher = null
+        }
+        interceptMatchers.set(pattern, matcher)
+      }
+      if (matcher?.(pathname)?.routeId === "__nifra_intercept__") return boundary
+    }
+    // Keep `target` in the signature so the caller cannot accidentally install an interceptor for an
+    // unmatched route; the match is intentionally performed before this helper is called.
+    void target
+    return undefined
+  }
   /**
    * Fetch a route's data and normalise it.
    *
@@ -411,6 +467,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
     readonly data: unknown
     readonly layoutData?: readonly unknown[] | undefined
     readonly terminalRouteId?: string | undefined
+    readonly boundaries?: BoundaryStates
   }
   const loadRouteData = async (
     path: string,
@@ -436,7 +493,11 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
       return { data: null, terminalRouteId }
     }
     if (retainFrom === undefined || payload.retained === undefined) {
-      return { data: payload.data, layoutData: payload.layoutData }
+      return {
+        data: payload.data,
+        layoutData: payload.layoutData,
+        ...(payload.boundaries !== undefined ? { boundaries: payload.boundaries } : {}),
+      }
     }
     const retained = new Set(
       payload.retained.filter(
@@ -446,12 +507,113 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
     const layoutData = payload.layoutData?.map((value, index) =>
       retained.has(index) ? retainFrom.layoutData[index] : value,
     )
-    return { data: payload.data, layoutData }
+    return {
+      data: payload.data,
+      layoutData,
+      ...(payload.boundaries !== undefined ? { boundaries: payload.boundaries } : {}),
+    }
+  }
+  /**
+   * Apply a client loader without making the server loader eager. The thunk is memoized per navigation
+   * (or per hydration), so a hook can call it repeatedly without duplicate requests. The returned
+   * client value is never sent back to the server.
+   */
+  const applyClientLoader = async (
+    path: string,
+    route: { routeId: string; params: Record<string, string> },
+    signal: AbortSignal | undefined,
+    serverLoad: () => Promise<LoadedRouteData>,
+    initial?: LoadedRouteData,
+  ): Promise<LoadedRouteData> => {
+    const hook = routeHooks[route.routeId]?.clientLoader
+    if (hook === undefined) return initial ?? serverLoad()
+    let serverResult: Promise<LoadedRouteData> | undefined =
+      initial === undefined ? undefined : Promise.resolve(initial)
+    const serverLoader = async (): Promise<unknown> => {
+      if (signal?.aborted === true)
+        throw new DOMException("The operation was aborted", "AbortError")
+      serverResult ??= serverLoad()
+      return (await serverResult).data
+    }
+    const clientData = await hook({
+      url: path,
+      params: route.params,
+      signal: signal ?? new AbortController().signal,
+      serverLoader,
+    })
+    const loaded = await serverResult
+    if (loaded === undefined) return { data: clientData }
+    // A server terminal status always wins over client-derived data. The client hook can enrich a
+    // normal response, but it cannot turn a server 404/410 into a rendered success route.
+    if (loaded.terminalRouteId !== undefined) return loaded
+    return { ...loaded, data: clientData }
   }
   const loadModule = options.loadModule
+  const prepareClientAction = async (
+    action: string,
+    body: ClientRequestBody,
+    signal: AbortSignal,
+  ): Promise<{ readonly body: ClientRequestBody; readonly optimisticData?: unknown }> => {
+    const target = match(action)
+    if (target === null) return { body }
+    await loadModule?.(target.routeId)
+    const hook = routeHooks[target.routeId]?.clientAction
+    if (hook === undefined) return { body }
+    const result = await hook({
+      url: action,
+      params: target.params,
+      signal,
+      body,
+      serverLoader: async () => state.data,
+    })
+    if (result === undefined) return { body }
+    if (!isClientActionResult(result)) {
+      throw new TypeError("[nifra/web] clientAction must return an object or undefined")
+    }
+    return {
+      body: result.body ?? body,
+      ...(Object.hasOwn(result, "optimisticData") ? { optimisticData: result.optimisticData } : {}),
+    }
+  }
+  let hydrated = false
+  const hydrate = async (): Promise<void> => {
+    if (hydrated) return
+    hydrated = true
+    const route = { routeId: state.routeId, params: state.params }
+    if (routeHooks[route.routeId]?.clientLoader === undefined) return
+    const mine = ++generation
+    navAbort?.abort()
+    const ac = new AbortController()
+    navAbort = ac
+    const initial = {
+      data: state.data,
+      layoutData: state.layoutData,
+      ...(state.boundaries !== undefined ? { boundaries: state.boundaries } : {}),
+    }
+    const loaded = await applyClientLoader(
+      state.path,
+      route,
+      ac.signal,
+      () => Promise.resolve(initial),
+      initial,
+    )
+    if (mine !== generation) return
+    if (loaded.terminalRouteId !== undefined) {
+      await loadModule?.(loaded.terminalRouteId)
+      state = { ...state, routeId: loaded.terminalRouteId, params: {}, data: null }
+    } else {
+      state = {
+        ...state,
+        data: loaded.data,
+        layoutData: loaded.layoutData,
+        ...(loaded.boundaries !== undefined ? { boundaries: loaded.boundaries } : {}),
+      }
+    }
+    emit()
+  }
   let state = options.initial
   const listeners = new Set<() => void>()
-  let token = 0
+  let generation = 0
   // Snapshot listeners to defend against accidental un/subscribe during notification. The adapters
   // don't do this (un/subscribe runs in effect/cleanup ticks), so the overhead is negligible
   // (5-20 listeners typically), and the defensiveness is valuable.
@@ -472,7 +634,12 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
   const MAX_CACHE = 50
   const cache = new Map<
     string,
-    { data: unknown; layoutData?: readonly unknown[] | undefined; status: "fresh" | "stale" }
+    {
+      data: unknown
+      layoutData?: readonly unknown[] | undefined
+      boundaries?: BoundaryStates
+      status: "fresh" | "stale"
+    }
   >()
   const cachePut = (path: string, loaded: LoadedRouteData): void => {
     if (!cache.has(path) && cache.size >= MAX_CACHE) {
@@ -481,14 +648,26 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
     }
     // The PAIR, not just the value: navigating back to a cached route must restore its layouts' data
     // too, or they would render empty on a hit and populated on a miss.
-    cache.set(path, { data: loaded.data, layoutData: loaded.layoutData, status: "fresh" })
+    cache.set(path, {
+      data: loaded.data,
+      layoutData: loaded.layoutData,
+      ...(loaded.boundaries !== undefined ? { boundaries: loaded.boundaries } : {}),
+      status: "fresh",
+    })
   }
   // Flip cached entries to stale (a no-op for paths not in the cache). Shared by `invalidate` and the
   // `X-Nifra-Revalidate` handling in `submit`.
   const markStale = (paths: readonly string[]): void => {
     for (const p of paths) {
       const entry = cache.get(p)
-      if (entry !== undefined) cache.set(p, { data: entry.data, status: "stale" })
+      if (entry !== undefined) {
+        cache.set(p, {
+          data: entry.data,
+          layoutData: entry.layoutData,
+          ...(entry.boundaries !== undefined ? { boundaries: entry.boundaries } : {}),
+          status: "stale",
+        })
+      }
     }
   }
   // Parse the `X-Nifra-Revalidate` response header into validated paths. The header is response data
@@ -505,27 +684,32 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
   // (so a superseded route's NDJSON stream stops reading instead of draining in the background).
   let navAbort: AbortController | undefined
 
-  // Refetch the active route + republish, single-flight via the shared `token`. Shared by `invalidate`
+  // Refetch the active route + republish, single-flight via the shared `generation`. Shared by `invalidate`
   // and targeted revalidation. Rejects if the fetch fails (clearing its own `pending` first).
   const refetchActive = async (): Promise<void> => {
-    const mine = ++token
+    const mine = ++generation
     navAbort?.abort()
     const ac = new AbortController()
     navAbort = ac
     state = { ...state, pending: true }
     emit()
     try {
-      const loaded = await loadRouteData(
-        state.path,
-        { routeId: state.routeId, params: state.params },
-        ac.signal,
+      const active = { routeId: state.routeId, params: state.params }
+      const loaded = await applyClientLoader(state.path, active, ac.signal, () =>
+        loadRouteData(state.path, active, ac.signal),
       )
-      if (mine !== token) return // superseded - drop the stale result
+      if (mine !== generation) return // superseded - drop the stale result
       cachePut(state.path, loaded)
-      state = { ...state, data: loaded.data, layoutData: loaded.layoutData, pending: false }
+      state = {
+        ...state,
+        data: loaded.data,
+        layoutData: loaded.layoutData,
+        ...(loaded.boundaries !== undefined ? { boundaries: loaded.boundaries } : {}),
+        pending: false,
+      }
       emit()
     } catch (err) {
-      if (mine === token) {
+      if (mine === generation) {
         state = { ...state, pending: false }
         emit()
       }
@@ -564,7 +748,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
 
   const createFetcher = (): FetcherEntry => {
     let fState: FetcherState = { pending: false, data: undefined }
-    let fToken = 0
+    let fGeneration = 0
     let fAbort: AbortController | undefined
     let loadedPath: string | undefined
     const fListeners = new Set<() => void>()
@@ -575,7 +759,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
     const runLoad = async (path: string): Promise<void> => {
       const matched = match(path)
       if (matched === null) return // unmatched path → no-op
-      const mine = ++fToken
+      const mine = ++fGeneration
       fAbort?.abort()
       const ac = new AbortController()
       fAbort = ac
@@ -586,7 +770,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
           loadModule?.(matched.routeId),
           loadRouteData(path, matched, ac.signal),
         ])
-        if (mine !== fToken) return // a newer load/submit on THIS fetcher superseded us
+        if (mine !== fGeneration) return // a newer load/submit on THIS fetcher superseded us
         // Record the loaded path only on SUCCESS - a thrown or superseded load must not
         // leave `loadedPath` pointing at a path this fetcher never actually showed, or a later
         // `X-Nifra-Revalidate` for it would spuriously refetch onto unexpected data.
@@ -595,7 +779,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         fState = { ...fState, data: loaded.data, pending: false }
         fEmit()
       } catch (err) {
-        if (mine === fToken) {
+        if (mine === fGeneration) {
           fState = { ...fState, pending: false }
           fEmit()
         }
@@ -612,7 +796,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
       },
       load: runLoad,
       submit: async (action, body) => {
-        const mine = ++fToken
+        const mine = ++fGeneration
         // Abort any prior in-flight load/submit on THIS fetcher (its fetch + NDJSON drain) - like
         // `runLoad` does for a superseding load. The mutation POST is left to complete; the
         // signal cancels the follow-up data drain if a newer op supersedes this one.
@@ -633,7 +817,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
             throw new Error(`[nifra/web] fetcher action failed (${res.status}): ${action}`)
           const actionData = res.status === 204 ? undefined : await readResponseData(res, ac.signal)
           const changed = parseRevalidate(res.headers.get(REVALIDATE_HEADER))
-          if (mine !== fToken) return
+          if (mine !== fGeneration) return
           // Publish the fetcher's actionData; clear `submission` (the optimistic window is over).
           fState = { pending: false, data: fState.data, actionData }
           fEmit()
@@ -644,7 +828,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
             await refreshMounted(changed, false)
           }
         } catch (err) {
-          if (mine === fToken) {
+          if (mine === fGeneration) {
             fState = { pending: false, data: fState.data }
             fEmit()
           }
@@ -688,44 +872,86 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
           searchClientKeys[state.routeId] ?? [],
         )
       ) {
-        ++token // supersede any in-flight navigation so its late result is dropped
+        ++generation // supersede any in-flight navigation so its late result is dropped
         navAbort?.abort()
-        cachePut(path, { data: state.data, layoutData: state.layoutData })
+        cachePut(path, {
+          data: state.data,
+          layoutData: state.layoutData,
+          ...(state.boundaries !== undefined ? { boundaries: state.boundaries } : {}),
+        })
         state = { ...state, path, pending: false, pendingPath: undefined }
         emit()
         return
       }
-      const mine = ++token
+      const mine = ++generation
       navAbort?.abort() // abandon any in-flight navigation's stream
       const ac = new AbortController()
       navAbort = ac
       state = { ...state, pending: true, pendingPath: path }
       emit()
       try {
-        // Use prefetched data when present (one-shot - drop it); else fetch. The chunk is loaded
-        // either way (cached + instant after a prefetch), so pending covers both.
+        // Load the route chunk before invoking a client loader. A route without a client loader still
+        // uses the same server-data path; a route with one gets a lazy `serverLoader()` thunk.
+        await loadModule?.(matched.routeId)
+        // Use prefetched server data when present (one-shot - drop it); clientLoader still runs over
+        // that cached result without causing another network request.
         const hit = prefetched.has(path)
-        const dataPromise = hit
-          ? Promise.resolve(prefetched.get(path) as LoadedRouteData)
-          : loadRouteData(
+        const prefetchedData = hit ? (prefetched.get(path) as LoadedRouteData) : undefined
+        if (hit) prefetched.delete(path)
+        const loaded = await applyClientLoader(
+          path,
+          matched,
+          ac.signal,
+          () =>
+            loadRouteData(
               path,
               matched,
               ac.signal,
               state.layoutData === undefined
                 ? undefined
                 : { path: state.path, layoutData: state.layoutData },
-            )
-        if (hit) prefetched.delete(path)
-        const [, loaded] = await Promise.all([loadModule?.(matched.routeId), dataPromise])
+            ),
+          prefetchedData,
+        )
         if (loaded.terminalRouteId !== undefined) await loadModule?.(loaded.terminalRouteId)
-        if (mine !== token) return // a newer navigation superseded this one - drop the stale result
+        if (mine !== generation) return // a newer navigation superseded this one - drop the stale result
         cachePut(path, loaded) // keep the keyed cache coherent with what we publish
+        const interception =
+          loaded.terminalRouteId === undefined
+            ? interceptionFor(state.routeId, path, matched)
+            : undefined
+        if (interception !== undefined) {
+          // The target's ordinary data request has already completed (including its server authz and
+          // optional client wrapper). Only the presentation route is retained; the current page stays
+          // mounted underneath the named slot. A target that returned a terminal status never reaches
+          // this branch, so an unauthorized/missing target cannot become a modal.
+          state = {
+            ...state,
+            path,
+            boundaries: {
+              ...(state.boundaries ?? {}),
+              [interception.name]: {
+                name: interception.name,
+                mode: interception.mode,
+                status: "ready",
+                data: loaded.data,
+                ...(interception.errorId === undefined ? {} : { errorId: interception.errorId }),
+              },
+            },
+            actionData: undefined,
+            pending: false,
+            pendingPath: undefined,
+          }
+          emit()
+          return
+        }
         state = {
           routeId: loaded.terminalRouteId ?? matched.routeId,
           params: loaded.terminalRouteId === undefined ? matched.params : {},
           path,
           data: loaded.data,
           layoutData: loaded.layoutData,
+          ...(loaded.boundaries !== undefined ? { boundaries: loaded.boundaries } : {}),
           actionData: undefined, // a fresh navigation has no action result
           pending: false,
         }
@@ -733,7 +959,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
       } catch (err) {
         // Clear our pending flag + target (only if still current) and rethrow - the caller decides how
         // to recover (the history layer falls back to a full-page navigation).
-        if (mine === token) {
+        if (mine === generation) {
           state = { ...state, pending: false, pendingPath: undefined }
           emit()
         }
@@ -741,7 +967,8 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
       }
     },
     submit: async (action, body, opts) => {
-      const mine = ++token
+      const mine = ++generation
+      const previousActionData = state.actionData
       // A superseding navigation/submit aborts this submit's FOLLOW-UP reads (revalidation / redirect
       // fetch + their NDJSON drains) - not the mutation POST itself, which should complete.
       // Wire into `navAbort` like `navigate`/`refetchActive`, so a later nav cancels the in-flight read.
@@ -757,7 +984,16 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
       }
       emit()
       try {
-        const res = await fetch(action, { method: "POST", body, headers: { [DATA_HEADER]: "1" } })
+        const prepared = await prepareClientAction(action, body, ac.signal)
+        if (Object.hasOwn(prepared, "optimisticData")) {
+          state = { ...state, actionData: prepared.optimisticData }
+          emit()
+        }
+        const res = await fetch(action, {
+          method: "POST",
+          body: prepared.body,
+          headers: { [DATA_HEADER]: "1" },
+        })
         if (!res.ok) throw new Error(`[nifra/web] action failed (${res.status}): ${action}`)
         const redirectTo = res.headers.get(REDIRECT_HEADER)
         if (redirectTo !== null) {
@@ -765,8 +1001,8 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
           const target = match(redirectTo)
           if (target === null)
             throw new Error(`[nifra/web] action redirect off-route: ${redirectTo}`)
-          const [, loaded] = await Promise.all([
-            loadModule?.(target.routeId),
+          await loadModule?.(target.routeId)
+          const loaded = await applyClientLoader(redirectTo, target, ac.signal, () =>
             loadRouteData(
               redirectTo,
               target,
@@ -775,9 +1011,9 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
                 ? undefined
                 : { path: state.path, layoutData: state.layoutData },
             ),
-          ])
+          )
           if (loaded.terminalRouteId !== undefined) await loadModule?.(loaded.terminalRouteId)
-          if (mine !== token) return
+          if (mine !== generation) return
           cachePut(redirectTo, loaded)
           state = {
             routeId: loaded.terminalRouteId ?? target.routeId,
@@ -785,6 +1021,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
             path: redirectTo,
             data: loaded.data,
             layoutData: loaded.layoutData,
+            ...(loaded.boundaries !== undefined ? { boundaries: loaded.boundaries } : {}),
             actionData: undefined,
             pending: false,
           }
@@ -802,14 +1039,17 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         // out (`revalidate: false`). A server-declared revalidate of the active path overrides the
         // opt-out (the server says it changed, so stale data would be wrong). Default is to revalidate.
         const skipActive = opts?.revalidate === false && !changed.includes(state.path)
+        const active = { routeId: state.routeId, params: state.params }
         const loaded = skipActive
-          ? { data: state.data, layoutData: state.layoutData }
-          : await loadRouteData(
-              state.path,
-              { routeId: state.routeId, params: state.params },
-              ac.signal,
+          ? {
+              data: state.data,
+              layoutData: state.layoutData,
+              ...(state.boundaries !== undefined ? { boundaries: state.boundaries } : {}),
+            }
+          : await applyClientLoader(state.path, active, ac.signal, () =>
+              loadRouteData(state.path, active, ac.signal),
             )
-        if (mine !== token) return
+        if (mine !== generation) return
         cachePut(state.path, loaded) // the revalidated (or kept) data is now the cache's truth
         // Mark the OTHER changed routes stale so the next access refetches.
         markStale(changed.filter((p) => p !== state.path))
@@ -821,6 +1061,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
           path: state.path,
           data: loaded.data,
           layoutData: loaded.layoutData,
+          ...(loaded.boundaries !== undefined ? { boundaries: loaded.boundaries } : {}),
           actionData,
           pending: false,
         }
@@ -829,7 +1070,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         // revalidated inline above, so skip it here). Best-effort - never rejects the submit.
         await refreshMounted(changed, true)
       } catch (err) {
-        if (mine === token) {
+        if (mine === generation) {
           // Revert: clear `submission` (the optimistic view vanishes) leaving `data` untouched, so the
           // pre-submit data shows through.
           state = {
@@ -837,7 +1078,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
             params: state.params,
             path: state.path,
             data: state.data,
-            actionData: state.actionData,
+            actionData: previousActionData,
             pending: false,
           }
           emit()
@@ -845,6 +1086,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         throw err
       }
     },
+    hydrate,
     invalidate: async (paths) => {
       // Mark targeted cache entries stale (all entries when no `paths`) - unmounted ones refetch
       // lazily on next access.