vinext 0.1.8 → 0.2.0

package/dist/server/app-browser-entry.js

@@ -17,29 +17,30 @@ import { VINEXT_RSC_COMPATIBILITY_ID_HEADER, VINEXT_RSC_CONTENT_TYPE, createRscR
 import { getNavigationRuntime, registerNavigationRuntimeBootstrap, registerNavigationRuntimeFunctions } from "../client/navigation-runtime.js";
 import { notifyAppRouterTransitionStart } from "../client/instrumentation-client-state.js";
 import "../client/instrumentation-client.js";
+import { createBfcacheSegmentStateKeyMap, createInitialBfcacheIdMap } from "./app-bfcache-identity.js";
+import { createDiscardedServerActionRefreshScheduler, createServerActionInitiationSnapshot, resolveServerActionOperationLane } from "./app-browser-action-result.js";
+import { createClientReuseManifestHeaderFromVisibleAppState } from "./app-browser-client-reuse-manifest.js";
 import { resolveManifestNavigationInterceptionContext, resolveMiddlewareRewriteNavigationInterceptionContext } from "./app-browser-interception-context.js";
 import { readHistoryStatePreviousNextUrl } from "./app-history-state.js";
 import { AppBrowserMpaNavigationScheduler } from "./app-browser-mpa-navigation.js";
 import { blockDangerousStreamedRscRedirect } from "./app-browser-rsc-redirect.js";
 import { navigationPlanner } from "./navigation-planner.js";
-import { __basePath, appRouterInstance, commitClientNavigationState, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, getClientNavigationRenderContext, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidatePrefetchCache, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, setClientParams, setMountedSlotsHeader, setPendingPathname, useRouter } from "../shims/navigation.js";
-import { createBfcacheSegmentStateKeyMap, createInitialBfcacheIdMap } from "./app-bfcache-identity.js";
-import { createDiscardedServerActionRefreshScheduler, createServerActionInitiationSnapshot } from "./app-browser-action-result.js";
-import { createClientReuseManifestHeaderFromVisibleAppState } from "./app-browser-client-reuse-manifest.js";
+import { DYNAMIC_NAVIGATION_CACHE_TTL, PREFETCH_CACHE_TTL, __basePath, appRouterInstance, commitClientNavigationState, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, deletePrefetchResponseSnapshot, getClientNavigationRenderContext, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidatePrefetchCache, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, seedPrefetchResponseSnapshot, setClientParams, setMountedSlotsHeader, setPendingPathname, useRouter } from "../shims/navigation.js";
 import { chunksToReadableStream, createProgressiveRscStream, getVinextBrowserGlobal } from "./app-browser-stream.js";
-import { FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, isCacheRestorableAppPayloadMetadata, resolveInterceptionContextFromPreviousNextUrl } from "./app-browser-state.js";
+import { COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, isCacheRestorableAppPayloadMetadata, isCompleteAppPayloadMetadata, resolveInterceptionContextFromPreviousNextUrl } from "./app-browser-state.js";
 import { clearHardNavigationLoopGuard, createAppBrowserNavigationController, createBasePathStrippedPathAndSearch } from "./app-browser-navigation-controller.js";
 import { consumeInitialFormState, createVinextHydrateRootOptions, hydrateRootInTransition } from "./app-browser-hydration.js";
 import { AppBrowserHistoryController } from "./app-browser-history-controller.js";
 import { createVisitedResponseCacheEntry, isVisitedResponseCacheEntryFresh } from "./app-visited-response-cache.js";
 import { createPopstateRestoreHandler, restoreSynchronousPopstateScrollPosition } from "./app-browser-popstate.js";
 import { createDevOnCaughtError, createOnUncaughtError, createProdOnCaughtError, prodOnRecoverableError } from "./app-browser-error.js";
+import { createHydrationCachePublication } from "./app-hydration-cache-publication.js";
 import { createOptimisticRouteTemplate, getOptimisticPrefetchSourceKey, getOptimisticRouteTemplateKey, resolveOptimisticNavigationPayload } from "./app-optimistic-routing.js";
 import { removeStylesheetLinksCoveredByInlineCss } from "./app-inline-css-client.js";
 import { createElement, startTransition, use, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { createFromFetch, createFromReadableStream, setServerCallback } from "@vitejs/plugin-rsc/browser";
 import { createRoot, hydrateRoot } from "react-dom/client";
+import { createFromFetch, createFromReadableStream, setServerCallback } from "@vitejs/plugin-rsc/browser";
 import { hasServerActions, loadServerActionClient } from "virtual:vinext-app-capabilities";
 //#region src/server/app-browser-entry.ts
 function toActionType(kind) {
@@ -123,6 +124,7 @@ function isRouterStatePromise(value) {
 }
 let latestClientParams = {};
 const visitedResponseCache = /* @__PURE__ */ new Map();
+let clientNavigationCacheGeneration = 0;
 let browserRouterStateHasEverCommitted = false;
 const mpaNavigationScheduler = new AppBrowserMpaNavigationScheduler();
 const unresolvedMpaNavigation = new Promise(() => {});
@@ -135,15 +137,17 @@ function waitForRscHmrSettle(delayMs = RSC_HMR_SETTLE_DELAY_MS) {
 		window.setTimeout(resolve, delayMs);
 	});
 }
-function restoreHistoryStateSnapshot(historyState) {
-	const navId = browserNavigationController.getActiveNavigationId();
+function restoreHistoryStateSnapshot(historyState, navId, onApprovedBeforeCommit) {
 	let restored = false;
 	flushSync(() => {
 		restored = historyController.restoreHistorySnapshot({
 			historyState,
 			stageClientParams,
 			approveVisibleRestore: ({ state, beforeCommit }) => browserNavigationController.restoreHistorySnapshotVisibleState({
-				beforeCommit,
+				beforeCommit: () => {
+					onApprovedBeforeCommit?.();
+					beforeCommit();
+				},
 				navId,
 				state,
 				targetHref: window.location.href
@@ -151,7 +155,7 @@ function restoreHistoryStateSnapshot(historyState) {
 		});
 	});
 	if (!restored) return false;
-	commitClientNavigationState();
+	commitClientNavigationState(navId, { releaseSnapshot: false });
 	return true;
 }
 function getBrowserRouterState() {
@@ -184,6 +188,7 @@ function clearPrefetchState() {
 	optimisticRouteTemplateLearning.clear();
 }
 function clearClientNavigationCaches() {
+	clientNavigationCacheGeneration += 1;
 	clearVisitedResponseCache();
 	clearPrefetchState();
 	historyController.invalidateRestorableClientState();
@@ -281,7 +286,7 @@ function createNavigationCommitEffect(options) {
 		commitClientNavigationState(navId);
 	};
 }
-async function renderNavigationPayload(payload, navigationSnapshot, targetHref, navId, historyUpdateMode, params, previousNextUrl, pendingRouterState, payloadOrigin, actionType = "navigate", operationLane = "navigation", traversalIntent = null, scrollIntent = null, restoredBfcacheIds = null, reuseCurrentBfcacheIds = true, visibleCommitMode = "transition") {
+async function renderNavigationPayload(payload, navigationSnapshot, targetHref, navId, historyUpdateMode, params, previousNextUrl, pendingRouterState, payloadOrigin, actionType = "navigate", operationLane = "navigation", traversalIntent = null, scrollIntent = null, restoredBfcacheIds = null, reuseCurrentBfcacheIds = true, visibleCommitMode = "transition", onCommittedState, navigationCommitKind) {
 	syncServerActionHttpFallbackHead(null);
 	return browserNavigationController.renderNavigationPayload({
 		actionType,
@@ -300,7 +305,9 @@ async function renderNavigationPayload(payload, navigationSnapshot, targetHref,
 		targetHistoryIndex: traversalIntent === null ? void 0 : traversalIntent.targetHistoryIndex,
 		targetHref,
 		navId,
-		visibleCommitMode
+		navigationCommitKind,
+		visibleCommitMode,
+		onCommittedState
 	});
 }
 async function commitSameUrlNavigatePayload(nextElements, actionInitiation, returnValue, revalidation = "none") {
@@ -341,7 +348,7 @@ function readVisitedResponseCacheCandidate(rscUrl, interceptionContext, mountedS
 				navigationKind,
 				now: Date.now()
 			}),
-			mountedSlotsMatch: (cached.response.mountedSlotsHeader ?? null) === mountedSlotsHeader,
+			mountedSlotsMatch: cached.mountedSlotsHeader === mountedSlotsHeader,
 			navigationKind
 		}
 	};
@@ -359,20 +366,32 @@ function applyVisitedResponseCacheCandidateDecision(candidate, decision) {
 function deleteVisitedResponse(rscUrl, interceptionContext) {
 	visitedResponseCache.delete(AppElementsWire.encodeCacheKey(rscUrl, interceptionContext));
 }
-function storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, params) {
+function storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, params, prefetchFallbackTtlMs = DYNAMIC_NAVIGATION_CACHE_TTL, requestMountedSlotsHeader = snapshot.mountedSlotsHeader ?? null, elements) {
 	const cacheKey = AppElementsWire.encodeCacheKey(rscUrl, interceptionContext);
 	visitedResponseCache.delete(cacheKey);
 	evictVisitedResponseCacheIfNeeded();
-	const now = Date.now();
-	visitedResponseCache.set(cacheKey, createVisitedResponseCacheEntry({
-		now,
+	const entry = createVisitedResponseCacheEntry({
+		fallbackTtlMs: prefetchFallbackTtlMs,
+		elements,
+		now: Date.now(),
+		mountedSlotsHeader: requestMountedSlotsHeader,
 		params,
 		response: snapshot
-	}));
+	});
+	visitedResponseCache.set(cacheKey, entry);
+	seedPrefetchResponseSnapshot(rscUrl, snapshot, interceptionContext, requestMountedSlotsHeader, prefetchFallbackTtlMs);
+	return () => {
+		if (visitedResponseCache.get(cacheKey) === entry) visitedResponseCache.delete(cacheKey);
+		deletePrefetchResponseSnapshot(rscUrl, snapshot, interceptionContext);
+	};
 }
 function clientNavigationSnapshotHref(snapshot) {
 	return `${window.location.origin}${createSnapshotPathAndSearch(snapshot)}`;
 }
+function getCurrentMatchedRoutePathname() {
+	const routeKey = AppElementsWire.parseElementKey(getBrowserRouterState().routeId);
+	return routeKey?.kind === "route" ? routeKey.path : null;
+}
 function getRequestState(navigationKind, targetPathname, previousNextUrlOverride, traverseHistoryState) {
 	if (previousNextUrlOverride !== void 0) return {
 		interceptionContext: resolveInterceptionContextFromPreviousNextUrl(previousNextUrlOverride, __basePath),
@@ -397,6 +416,7 @@ function getRequestState(navigationKind, targetPathname, previousNextUrlOverride
 			};
 			const middlewareRewriteInterceptionContext = resolveMiddlewareRewriteNavigationInterceptionContext({
 				basePath: __basePath,
+				currentMatchedPathname: getCurrentMatchedRoutePathname(),
 				currentPathname: window.location.pathname,
 				routeManifest: getBrowserRouteManifest(),
 				targetPathname
@@ -462,7 +482,7 @@ function AppRouterRedirectBridge({ children }) {
 function decodeAppElementsPromise(payload) {
 	return Promise.resolve(payload).then((elements) => AppElementsWire.decode(elements));
 }
-function BrowserRoot({ initialElements, initialNavigationSnapshot }) {
+function BrowserRoot({ hydrationCachePublication, initialElements, initialNavigationSnapshot }) {
 	const resolvedElements = use(initialElements);
 	const initialMetadata = AppElementsWire.readMetadata(resolvedElements);
 	const [treeStateValue, setTreeStateValue] = useState(() => ({
@@ -502,19 +522,22 @@ function BrowserRoot({ initialElements, initialNavigationSnapshot }) {
 			return new Promise(() => {});
 		} });
 		browserRouterStateHasEverCommitted = true;
+		hydrationCachePublication.commit();
 		return () => {
+			hydrationCachePublication.invalidate();
 			registerNavigationRuntimeFunctions({ navigateExternal: void 0 });
 			detach();
 			setMountedSlotsHeader(null);
 		};
-	}, [setTreeStateValue]);
+	}, [hydrationCachePublication, setTreeStateValue]);
 	useEffect(() => {
+		hydrationCachePublication.complete();
 		const hydratedAt = performance.now();
 		window.__VINEXT_HYDRATED_AT = hydratedAt;
 		window.__NEXT_HYDRATED = true;
 		window.__NEXT_HYDRATED_AT = hydratedAt;
 		window.__NEXT_HYDRATED_CB?.();
-	}, []);
+	}, [hydrationCachePublication]);
 	useLayoutEffect(() => {
 		historyController.rememberHistoryStateSnapshot(treeState);
 	}, [treeState]);
@@ -673,11 +696,11 @@ function registerServerActionCallback() {
 			commitSameUrlNavigatePayload,
 			navigationPlanner,
 			performHardNavigation: (url, historyMode) => browserNavigationController.performHardNavigation(url, historyMode),
-			renderRedirectPayload(elements, target, actionInitiation) {
+			renderRedirectPayload(elements, target, actionInitiation, revalidation) {
 				const hashIdx = target.href.indexOf("#");
 				const actionScrollIntent = beginAppRouterScrollIntent((hashIdx !== -1 ? target.href.slice(hashIdx) : "") || null);
 				if (target.type === "push") saveScrollPosition();
-				renderNavigationPayload(Promise.resolve(elements), createClientNavigationRenderSnapshot(target.href, actionInitiation.routerState.navigationSnapshot.params), target.href, actionInitiation.navigationId, target.type === "push" ? "push" : "replace", {}, null, null, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, target.type === "push" ? "navigate" : "replace", "server-action", null, actionScrollIntent).catch(() => {
+				renderNavigationPayload(Promise.resolve(elements), createClientNavigationRenderSnapshot(target.href, actionInitiation.routerState.navigationSnapshot.params), target.href, actionInitiation.navigationId, target.type === "push" ? "push" : "replace", {}, null, null, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, target.type === "push" ? "navigate" : "replace", resolveServerActionOperationLane(revalidation), null, actionScrollIntent).catch(() => {
 					browserNavigationController.performHardNavigation(target.href);
 				});
 			},
@@ -692,32 +715,76 @@ async function main() {
 	installAppNavigationFailureListeners();
 	let devErrorOverlay = null;
 	if (import.meta.env.DEV) {
-		devErrorOverlay = await import("./dev-error-overlay.js");
+		devErrorOverlay = await import("../client/dev-error-overlay.js");
 		devErrorOverlay.installDevErrorOverlay();
 		devErrorOverlay.installViteHmrErrorHandler(import.meta.hot);
 		devErrorOverlay.reportInitialDevServerErrors();
 	}
+	const initialRscBootstrap = getNavigationRuntime()?.bootstrap.rsc;
 	const rscStream = await readInitialRscStream();
 	if (rscStream === null) return;
-	bootstrapHydration(rscStream, devErrorOverlay);
+	bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap);
 }
-function bootstrapHydration(rscStream, devErrorOverlay) {
-	const root = decodeAppElementsPromise(createFromReadableStream(rscStream));
+function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
+	const hydrationCachePublication = createHydrationCachePublication();
+	const cacheGeneration = clientNavigationCacheGeneration;
+	const [reactBranch, cacheBranch] = rscStream.tee();
+	const root = decodeAppElementsPromise(createFromReadableStream(reactBranch));
 	const initialNavigationSnapshot = createClientNavigationRenderSnapshot(window.location.href, latestClientParams);
+	const initialParams = initialNavigationSnapshot.params;
+	const initialPathAndSearch = createSnapshotPathAndSearch(initialNavigationSnapshot);
+	const initialCacheBuffer = new Response(cacheBranch).arrayBuffer();
+	Promise.all([root, initialCacheBuffer]).then(async ([elements, buffer]) => {
+		if (cacheGeneration !== clientNavigationCacheGeneration) return;
+		const metadata = AppElementsWire.readMetadata(elements);
+		if (!isCompleteAppPayloadMetadata(metadata)) return;
+		const mountedSlotsHeader = getMountedSlotIdsHeader(elements);
+		const rscUrl = await createRscRequestUrl(initialPathAndSearch, createRscRequestHeaders({ mountedSlotsHeader }));
+		if (cacheGeneration !== clientNavigationCacheGeneration) return;
+		const snapshot = {
+			compatibilityIdHeader: CLIENT_RSC_COMPATIBILITY_ID,
+			buffer,
+			contentType: VINEXT_RSC_CONTENT_TYPE,
+			...initialRscBootstrap?.dynamicStaleTimeSeconds !== void 0 ? { dynamicStaleTimeSeconds: initialRscBootstrap.dynamicStaleTimeSeconds } : {},
+			mountedSlotsHeader,
+			paramsHeader: encodeURIComponent(JSON.stringify(initialParams)),
+			url: rscUrl
+		};
+		const fallbackTtlMs = initialRscBootstrap?.initialCacheKind === "static" ? PREFETCH_CACHE_TTL : DYNAMIC_NAVIGATION_CACHE_TTL;
+		hydrationCachePublication.publish(() => {
+			if (cacheGeneration !== clientNavigationCacheGeneration) return () => {};
+			if (isCacheRestorableAppPayloadMetadata(metadata)) return storeVisitedResponseSnapshot(rscUrl, metadata.interceptionContext, snapshot, initialParams, fallbackTtlMs, mountedSlotsHeader);
+			seedPrefetchResponseSnapshot(rscUrl, snapshot, metadata.interceptionContext, mountedSlotsHeader, fallbackTtlMs);
+			return () => deletePrefetchResponseSnapshot(rscUrl, snapshot, metadata.interceptionContext);
+		});
+	}).catch(() => {});
 	historyController.writeBootstrapHistoryMetadata();
-	const onUncaughtError = createOnUncaughtError();
+	const reportUncaughtError = createOnUncaughtError();
+	const onUncaughtError = (...args) => {
+		hydrationCachePublication.fail();
+		reportUncaughtError(...args);
+	};
+	const onRecoverableError = (...args) => {
+		hydrationCachePublication.fail();
+		prodOnRecoverableError(...args);
+	};
+	const invalidateOnCaughtError = (handler) => ((...args) => {
+		hydrationCachePublication.fail();
+		handler(...args);
+	});
 	const formState = consumeInitialFormState(getVinextBrowserGlobal());
 	const hydrateRootOptions = import.meta.env.DEV && devErrorOverlay ? createVinextHydrateRootOptions({
 		formState,
-		onCaughtError: createDevOnCaughtError(devErrorOverlay.devOnCaughtError, onUncaughtError),
+		onCaughtError: invalidateOnCaughtError(createDevOnCaughtError(devErrorOverlay.devOnCaughtError, onUncaughtError)),
 		onUncaughtError
 	}) : createVinextHydrateRootOptions({
 		formState,
-		onCaughtError: createProdOnCaughtError(onUncaughtError),
-		onRecoverableError: prodOnRecoverableError,
+		onCaughtError: invalidateOnCaughtError(createProdOnCaughtError(onUncaughtError)),
+		onRecoverableError,
 		onUncaughtError
 	});
 	const children = createElement(BrowserRoot, {
+		hydrationCachePublication,
 		initialElements: root,
 		initialNavigationSnapshot
 	});
@@ -739,15 +806,20 @@ function bootstrapHydration(rscStream, devErrorOverlay) {
 	});
 	markInitialAppRouterBootstrapHydrated();
 	let activeNavigationAbortController = null;
+	function abortSupersededNavigation() {
+		activeNavigationAbortController?.abort();
+		activeNavigationAbortController = null;
+	}
 	registerNavigationRuntimeFunctions({
 		clearNavigationCaches: clearClientNavigationCaches,
 		commitHashNavigation: (href, historyUpdateMode, scroll) => historyController.commitHashOnlyNavigation(href, historyUpdateMode, scroll),
 		navigate: async function navigateRsc(href, redirectDepth = 0, navigationKind = "navigate", historyUpdateMode, previousNextUrlOverride, programmaticTransition = false, traversalIntent, scrollIntent, visibleCommitMode = "transition") {
-			activeNavigationAbortController?.abort();
+			abortSupersededNavigation();
 			const navigationAbortController = new AbortController();
 			activeNavigationAbortController = navigationAbortController;
 			let pendingRouterState = null;
 			const navId = browserNavigationController.beginNavigation();
+			const navigationCacheGeneration = clientNavigationCacheGeneration;
 			discardedServerActionRefreshScheduler.markNavigationStart();
 			let currentHref = href;
 			let currentHistoryMode = historyUpdateMode;
@@ -855,9 +927,10 @@ function bootstrapHydration(rscStream, devErrorOverlay) {
 						if (!browserNavigationController.isCurrentNavigation(navId)) return;
 						const cachedParams = cachedRoute.params;
 						const cachedNavigationSnapshot = createClientNavigationRenderSnapshot(currentHref, cachedParams);
-						const cachedPayload = decodeAppElementsPromise(createFromFetch(Promise.resolve(restoreRscResponse(cachedRoute.response))));
+						const cachedPayload = cachedRoute.elements ? Promise.resolve(cachedRoute.elements) : decodeAppElementsPromise(createFromFetch(Promise.resolve(restoreRscResponse(cachedRoute.response))));
 						if (!browserNavigationController.isCurrentNavigation(navId)) return;
-						if (await renderNavigationPayload(cachedPayload, cachedNavigationSnapshot, currentHref, navId, currentHistoryMode, cachedParams, requestPreviousNextUrl, detachedNavigationCommits ? null : pendingRouterState, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, toActionType(navigationKind), toOperationLane(navigationKind), activeTraversalIntent, scrollIntent, restoredBfcacheIds, reuseCurrentBfcacheIds, visibleCommitMode) === "no-commit") {
+						if (await renderNavigationPayload(cachedPayload, cachedNavigationSnapshot, currentHref, navId, currentHistoryMode, cachedParams, requestPreviousNextUrl, detachedNavigationCommits ? null : pendingRouterState, cachedRoute.elements ? COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN : VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, toActionType(navigationKind), toOperationLane(navigationKind), activeTraversalIntent, scrollIntent, restoredBfcacheIds, reuseCurrentBfcacheIds, visibleCommitMode) === "no-commit") {
+							if (!browserNavigationController.isCurrentNavigation(navId)) return;
 							deleteVisitedResponse(rscUrl, requestInterceptionContext);
 							continue;
 						}
@@ -909,7 +982,7 @@ function bootstrapHydration(rscStream, devErrorOverlay) {
 							if (optimisticPayload !== null) {
 								detachedNavigationCommits = true;
 								const optimisticNavigationSnapshot = createClientNavigationRenderSnapshot(currentHref, optimisticPayload.params);
-								renderNavigationPayload(Promise.resolve(optimisticPayload.elements), optimisticNavigationSnapshot, currentHref, navId, currentHistoryMode, optimisticPayload.params, requestPreviousNextUrl, null, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, toActionType(navigationKind), toOperationLane(navigationKind), activeTraversalIntent, scrollIntent, restoredBfcacheIds, reuseCurrentBfcacheIds, visibleCommitMode).catch((error) => {
+								renderNavigationPayload(Promise.resolve(optimisticPayload.elements), optimisticNavigationSnapshot, currentHref, navId, currentHistoryMode, optimisticPayload.params, requestPreviousNextUrl, null, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, toActionType(navigationKind), toOperationLane(navigationKind), activeTraversalIntent, scrollIntent, restoredBfcacheIds, reuseCurrentBfcacheIds, visibleCommitMode, void 0, "detached").catch((error) => {
 									if (browserNavigationController.isCurrentNavigation(navId)) console.error("[vinext] Optimistic RSC navigation error:", error);
 								});
 							}
@@ -975,21 +1048,47 @@ function bootstrapHydration(rscStream, devErrorOverlay) {
 					if (!browserNavigationController.isCurrentNavigation(navId)) return;
 					const rscPayload = decodeAppElementsPromise(createFromFetch(Promise.resolve(reactResponse)));
 					if (!browserNavigationController.isCurrentNavigation(navId)) return;
-					if (await renderNavigationPayload(rscPayload, navigationSnapshot, currentHref, navId, currentHistoryMode, navParams, requestPreviousNextUrl, detachedNavigationCommits ? null : pendingRouterState, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, toActionType(navigationKind), toOperationLane(navigationKind), activeTraversalIntent, scrollIntent, restoredBfcacheIds, reuseCurrentBfcacheIds, visibleCommitMode) !== "committed") return;
+					let committedState = null;
+					if (await renderNavigationPayload(rscPayload, navigationSnapshot, currentHref, navId, currentHistoryMode, navParams, requestPreviousNextUrl, detachedNavigationCommits ? null : pendingRouterState, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, toActionType(navigationKind), toOperationLane(navigationKind), activeTraversalIntent, scrollIntent, restoredBfcacheIds, reuseCurrentBfcacheIds, visibleCommitMode, (state) => {
+						committedState = state;
+						if (activeNavigationAbortController === navigationAbortController) activeNavigationAbortController = null;
+					}, detachedNavigationCommits ? "authoritative" : void 0) !== "committed") return;
 					if (!browserNavigationController.isCurrentNavigation(navId)) return;
 					try {
 						const renderedElements = await rscPayload;
+						if (navigationCacheGeneration !== clientNavigationCacheGeneration) return;
 						const metadata = AppElementsWire.readMetadata(renderedElements);
-						if (!isCacheRestorableAppPayloadMetadata(metadata)) {
-							cacheBufferPromise.catch(() => {});
-							return;
-						}
 						const cacheBuffer = await cacheBufferPromise;
-						storeVisitedResponseSnapshot(rscUrl, resolveVisitedResponseInterceptionContext(requestInterceptionContext, metadata.interceptionContext), {
-							...createCachedRscResponseSnapshot(navResponse, cacheBuffer, navResponseUrl),
+						if (navigationCacheGeneration !== clientNavigationCacheGeneration) return;
+						const responseSnapshot = createCachedRscResponseSnapshot(navResponse, cacheBuffer, navResponseUrl);
+						const { dynamicStaleTimeSeconds: _staticDynamicStaleTime, ...staticResponseSnapshot } = responseSnapshot;
+						const snapshot = {
+							...isCacheRestorableAppPayloadMetadata(metadata) ? staticResponseSnapshot : {
+								...responseSnapshot,
+								...responseSnapshot.dynamicStaleTimeSeconds === void 0 && metadata.dynamicStaleTimeSeconds !== void 0 ? { dynamicStaleTimeSeconds: metadata.dynamicStaleTimeSeconds } : {}
+							},
 							...navResponseExpiresAt !== void 0 ? { expiresAt: navResponseExpiresAt } : {},
 							mountedSlotsHeader: getMountedSlotIdsHeader(renderedElements)
-						}, navParams);
+						};
+						const interceptionContext = resolveVisitedResponseInterceptionContext(requestInterceptionContext, metadata.interceptionContext);
+						if (isCacheRestorableAppPayloadMetadata(metadata)) {
+							if (navigationCacheGeneration !== clientNavigationCacheGeneration) return;
+							storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, navParams, PREFETCH_CACHE_TTL, mountedSlotsHeader);
+						} else if (committedState !== null && getMountedSlotIdsHeader(committedState.elements) === null) {
+							const state = committedState;
+							const committedElements = {
+								...state.elements,
+								[AppElementsWire.keys.layoutFlags]: state.layoutFlags,
+								[AppElementsWire.keys.layoutIds]: state.layoutIds,
+								[AppElementsWire.keys.skippedLayoutIds]: [],
+								[AppElementsWire.keys.slotBindings]: state.slotBindings
+							};
+							if (navigationCacheGeneration !== clientNavigationCacheGeneration) return;
+							storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, navParams, DYNAMIC_NAVIGATION_CACHE_TTL, mountedSlotsHeader, committedElements);
+						} else {
+							if (navigationCacheGeneration !== clientNavigationCacheGeneration) return;
+							seedPrefetchResponseSnapshot(rscUrl, snapshot, interceptionContext, mountedSlotsHeader, DYNAMIC_NAVIGATION_CACHE_TTL);
+						}
 					} catch {}
 					return;
 				}
@@ -1026,15 +1125,25 @@ function bootstrapHydration(rscStream, devErrorOverlay) {
 			restorePopstateScrollPosition(event.state);
 			return;
 		}
+		const snapshotNavigationId = browserNavigationController.beginNavigation();
+		if (restoreHistoryStateSnapshot(event.state, snapshotNavigationId, () => {
+			abortSupersededNavigation();
+			notifyAppRouterTransitionStart(href, "traverse");
+		})) {
+			window.__VINEXT_RSC_PENDING__ = null;
+			restoreSynchronousPopstateScrollPosition({
+				getActiveNavigationId: () => browserNavigationController.getActiveNavigationId(),
+				isCurrentNavigation: (navId) => browserNavigationController.isCurrentNavigation(navId),
+				markScrollRestoreConsumed: (navId) => {
+					synchronousPopstateScrollRestoreNavigationId = navId;
+				},
+				restorePopstateScrollPosition
+			}, event.state);
+			browserNavigationController.finalizeNavigation(snapshotNavigationId, null);
+			return;
+		}
+		browserNavigationController.finalizeNavigation(snapshotNavigationId, null);
 		handlePopstate(event);
-		if (restoreHistoryStateSnapshot(event.state)) restoreSynchronousPopstateScrollPosition({
-			getActiveNavigationId: () => browserNavigationController.getActiveNavigationId(),
-			isCurrentNavigation: (navId) => browserNavigationController.isCurrentNavigation(navId),
-			markScrollRestoreConsumed: (navId) => {
-				synchronousPopstateScrollRestoreNavigationId = navId;
-			},
-			restorePopstateScrollPosition
-		}, event.state);
 	});
 	if (import.meta.env.DEV && import.meta.hot) {
 		const applyRscHmrUpdate = async (updateId) => {
@@ -1053,7 +1162,7 @@ function bootstrapHydration(rscStream, devErrorOverlay) {
 			clearClientNavigationCaches();
 			const navigationSnapshot = createClientNavigationRenderSnapshot(window.location.href, latestClientParams);
 			devErrorOverlay?.dismissOverlay();
-			const hmrHeaders = createRscRequestHeaders();
+			const hmrHeaders = createRscRequestHeaders({ mountedSlotsHeader: getMountedSlotIdsHeader(browserNavigationController.getBrowserRouterState().elements) });
 			await browserNavigationController.hmrReplaceTree(decodeAppElementsPromise(createFromFetch(fetch(await createRscRequestUrl(window.location.pathname + window.location.search, hmrHeaders), { headers: hmrHeaders }))), navigationSnapshot);
 		};
 		const handleRscUpdate = async (updateId) => {

package/dist/server/app-browser-interception-context.d.ts

@@ -3,6 +3,7 @@ import { RouteManifest } from "../routing/app-route-graph.js";
 //#region src/server/app-browser-interception-context.d.ts
 type ResolveManifestNavigationInterceptionContextOptions = {
   basePath: string;
+  currentMatchedPathname?: string | null;
   currentPathname: string;
   routeManifest: RouteManifest | null;
   targetPathname: string;

package/dist/server/app-browser-interception-context.js

@@ -29,13 +29,15 @@ function resolveManifestNavigationInterceptionContext(options) {
 function resolveMiddlewareRewriteNavigationInterceptionContext(options) {
 	if (options.routeManifest === null) return null;
 	const currentPathname = stripBasePath(options.currentPathname, options.basePath);
+	const currentMatchedPathname = options.currentMatchedPathname ? stripBasePath(options.currentMatchedPathname, options.basePath) : null;
 	const targetPathname = stripBasePath(options.targetPathname, options.basePath);
 	const sourceParts = splitPathnameForRouteMatch(currentPathname);
+	const matchedSourceParts = currentMatchedPathname ? splitPathnameForRouteMatch(currentMatchedPathname) : null;
 	const targetParts = splitPathnameForRouteMatch(targetPathname);
 	for (const interception of options.routeManifest.segmentGraph.interceptions.values()) {
-		if (!matchRoutePatternPrefix(sourceParts, interception.sourcePatternParts)) continue;
 		if (!matchRoutePatternWithOptionalDynamicSegments(targetParts, interception.targetPatternParts)) continue;
-		return currentPathname;
+		if (matchRoutePatternPrefix(sourceParts, interception.sourcePatternParts)) return currentPathname;
+		if (currentMatchedPathname !== null && matchedSourceParts !== null && matchRoutePatternPrefix(matchedSourceParts, interception.sourcePatternParts)) return currentMatchedPathname;
 	}
 	return null;
 }

package/dist/server/app-browser-navigation-controller.d.ts

@@ -77,7 +77,9 @@ type BrowserNavigationController = {
     targetHistoryIndex?: number | null;
     targetHref: string;
     navId: number;
+    navigationCommitKind?: "authoritative" | "detached";
     visibleCommitMode?: NavigationRuntimeVisibleCommitMode;
+    onCommittedState?: (state: AppRouterState) => void;
   }): Promise<NavigationPayloadOutcome>;
   commitSameUrlNavigatePayload(nextElements: Promise<AppElements>, navigationSnapshot: ClientNavigationRenderSnapshot, returnValue?: {
     ok: boolean;