vinext 1.3.0 → 1.4.0

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

@@ -1,35 +1,33 @@
 import { addBasePathToPathname, stripBasePath } from "../utils/base-path.js";
-import { VINEXT_CLIENT_REUSE_MANIFEST_HEADER, VINEXT_PARAMS_HEADER, VINEXT_RENDERED_PATH_AND_SEARCH_HEADER, VINEXT_RSC_REDIRECT_HEADER, VINEXT_RSC_REDIRECT_TYPE_HEADER } from "./headers.js";
+import { VINEXT_MOUNTED_LAYOUTS_HEADER, VINEXT_PARAMS_HEADER, VINEXT_RENDERED_PATH_AND_SEARCH_HEADER, VINEXT_RSC_REDIRECT_HEADER, VINEXT_RSC_REDIRECT_TYPE_HEADER } from "./headers.js";
 import { splitPathnameForRouteMatch } from "../routing/utils.js";
 import { AppRouterContext } from "../shims/internal/app-router-context.js";
 import { matchRoutePattern } from "../routing/route-pattern.js";
 import { installWindowNext, setWindowNextInternalSourcePage } from "../client/window-next.js";
 import { retryScrollTo, scrollToHashTargetOnNextFrame } from "../shims/hash-scroll.js";
-import { AppElementsWire } from "./app-elements-wire.js";
-import { getMountedSlotIdsHeader, resolveVisitedResponseInterceptionContext } from "./app-elements.js";
-import { getBfcacheIdMapContext, getNavigationContext, setNavigationContext } from "../shims/navigation-context-state.js";
-import { decodeRedirectError, isRedirectError } from "../shims/navigation-errors.js";
-import DefaultGlobalError from "../shims/default-global-error.js";
+import { VINEXT_RSC_COMPATIBILITY_ID_HEADER, VINEXT_RSC_CONTENT_TYPE, createRscRequestHeaders, createRscRequestUrl, formatRscRequestPath, isRscCompatibilityIdCompatible } from "./app-rsc-cache-busting.js";
 import { clearAppNavigationFailureTarget, installAppNavigationFailureListeners } from "../client/app-nav-failure-handler.js";
-import { DevRecoveryBoundary, GlobalErrorBoundary, RedirectBoundary } from "../shims/error-boundary.js";
-import { beginAppRouterScrollIntent, consumeAppRouterScrollIntent } from "../shims/app-router-scroll-state.js";
-import { AppRouterScrollCommitProvider } from "../shims/app-router-scroll.js";
-import { BfcacheIdentityMapContext, bindAppElementsRenderedSearch, setAppElementsRenderedSearch } from "../shims/slot.js";
-import { VINEXT_RSC_COMPATIBILITY_ID_HEADER, VINEXT_RSC_CONTENT_TYPE, createRscRequestHeaders, createRscRequestUrl, formatRscRequestPath } from "./app-rsc-cache-busting.js";
 import { notifyAppRouterTransitionStart } from "../client/instrumentation-client-state.js";
 import "../client/instrumentation-client.js";
 import { createNavigationRuntimeRouteManifestLoader, getNavigationRuntime, loadNavigationRuntimeRouteManifest, registerNavigationRuntimeBootstrap, registerNavigationRuntimeFunctions } from "../client/navigation-runtime.js";
+import { AppElementsWire } from "./app-elements-wire.js";
+import { getMountedSlotIdsHeader, resolveVisitedResponseInterceptionContext } from "./app-elements.js";
 import { createBfcacheSegmentIdentityMap, 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 { isExternalHistoryState, readHistoryStateActiveRoutePaths, readHistoryStatePreviousNextUrl, resolveActiveRoutePaths } from "./app-history-state.js";
 import { AppBrowserMpaNavigationScheduler } from "./app-browser-mpa-navigation.js";
 import { stripRscCompletionMetadataResponse } from "./rsc-completion-metadata.js";
 import { blockDangerousStreamedRscRedirect } from "./app-browser-rsc-redirect.js";
 import { navigationPlanner } from "./navigation-planner.js";
-import { DYNAMIC_NAVIGATION_CACHE_TTL, PREFETCH_CACHE_TTL, __basePath, appRouterInstance, commitClientNavigationState, consumePrefetchResponse, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, deletePrefetchResponseSnapshot, disableNavigationResponsePrefetchCacheReuse, getClientNavigationRenderContext, getMountedSlotsHeader, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidatePrefetchCache, parseRenderedPathAndSearchHeader, preloadHybridClientRouteOwner, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolveLoadedHybridClientRewriteHref, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, seedPrefetchResponseSnapshot, setClientParams, setMountedSlotsHeader, setPendingPathname, useRouter } from "../shims/navigation.js";
+import { decodeRedirectError, isRedirectError } from "../shims/navigation-errors.js";
+import { beginAppRouterScrollIntent, consumeAppRouterScrollIntent } from "../shims/app-router-scroll-state.js";
+import { getBfcacheIdMapContext, getNavigationContext, setNavigationContext } from "../shims/navigation-context-state.js";
+import { DYNAMIC_NAVIGATION_CACHE_TTL, PREFETCH_CACHE_TTL, __basePath, appRouterInstance, commitClientNavigationState, consumePrefetchResponse, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, deletePrefetchResponseSnapshot, disableNavigationResponsePrefetchCacheReuse, getClientNavigationRenderContext, getMountedSlotsHeader, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidateDynamicPrefetchCache, invalidatePrefetchCache, invalidateVisitedResponsePrefetches, parseRenderedPathAndSearchHeader, preloadHybridClientRouteOwner, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolveLoadedHybridClientRewriteHref, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, seedPrefetchResponseSnapshot, setClientParams, setMountedSlotsHeader, setPendingPathname, trackAppRouterNavigationInFlight, useRouter } from "../shims/navigation.js";
+import { AppRouterScrollCommitProvider } from "../shims/app-router-scroll.js";
 import { chunksToReadableStream, createProgressiveRscStream, getVinextBrowserGlobal } from "./app-browser-stream.js";
+import { createMountedLayoutsHeader, holdsSkippedLayouts } from "./app-mounted-layouts.js";
+import { BfcacheIdentityMapContext, bindAppElementsRenderedSearch, setAppElementsRenderedSearch } from "../shims/slot.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, navigateDocumentDirectly } from "./app-browser-navigation-controller.js";
 import { createAppRouteTree } from "./app-route-tree.js";
@@ -38,17 +36,19 @@ import { createSupplementalRefreshCoordinator, mergeRefreshedParallelSlot, requi
 import { createAppBrowserNavigationAbortCoordinator } from "./app-browser-navigation-abort.js";
 import { consumeInitialFormState, createVinextHydrateRootOptions, hydrateRootInTransition, resolveFetchedHydrationLocation } from "./app-browser-hydration.js";
 import { AppBrowserHistoryController } from "./app-browser-history-controller.js";
-import { createVisitedResponseCacheEntry, deleteAllVisitedResponseCacheEntries, deleteInvalidatedHistoryRestoreEntries, deleteVisitedResponseCacheEntry, findVisitedResponseCacheEntry, hasNavigationResponseHistoryLifetime, isVisitedResponseCacheEntryFresh } from "./app-visited-response-cache.js";
+import { createVisitedResponseCacheEntry, deleteAllVisitedResponseCacheEntries, deleteVisitedResponseCacheEntry, findVisitedResponseCacheEntry, findVisitedResponseForFullPrefetch, hasNavigationResponseHistoryLifetime, isVisitedResponseCacheEntryFresh, revokeHistoryRestoreNavigationReuse } from "./app-visited-response-cache.js";
 import { createPopstateRestoreHandler, restoreSynchronousPopstateScrollPosition, shouldCommitPopstateUrlWithoutNavigation } from "./app-browser-popstate.js";
+import DefaultGlobalError from "../shims/default-global-error.js";
+import { DevRecoveryBoundary, GlobalErrorBoundary, RedirectBoundary } from "../shims/error-boundary.js";
 import { createDevOnCaughtError, createOnUncaughtError, createProdOnCaughtError, createProdOnRecoverableError } from "./app-browser-error.js";
 import { createHydrationCachePublication } from "./app-hydration-cache-publication.js";
 import { peekSettledPrefetchResponseForNavigation, prepareConsumedPrefetchResponseForPublication, preserveCommittedPrefetchExpiry, resolvePrefetchNavigationResponseUrl } from "./app-browser-prefetch-response.js";
-import { canCommitOptimisticRouteTemplate, createOptimisticRouteTemplate, getOptimisticPrefetchSourceKey, getOptimisticRouteTemplateKey, resolveOptimisticNavigationParamsForHref, resolveOptimisticNavigationPayload } from "./app-optimistic-routing.js";
+import { canCommitOptimisticRouteTemplate, createOptimisticRouteTemplate, createOptimisticRouteTemplateStore, getOptimisticPrefetchSourceKey, getOptimisticRouteTemplateKey, keepOptimisticStreamingMetadata, resolveOptimisticNavigationParamsForHref, 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 { createRoot, hydrateRoot } from "react-dom/client";
 import { createFromFetch, createFromReadableStream, setServerCallback } from "@vitejs/plugin-rsc/browser";
+import { flushSync } from "react-dom";
 import { hasServerActions, loadServerActionClient } from "virtual:vinext-app-capabilities";
 //#region src/server/app-browser-entry.ts
 const HAS_CLIENT_REWRITES = process.env.__VINEXT_HAS_CLIENT_REWRITES !== "false";
@@ -67,13 +67,20 @@ const MAX_VISITED_RESPONSE_CACHE_SIZE = 50;
 const IS_STATIC_EXPORT = process.env.NODE_ENV === "production" && process.env.__NEXT_CONFIG_OUTPUT === "export";
 let clientDeploymentVersion = null;
 let clientRscCompatibilityId = IS_STATIC_EXPORT ? null : "vinext:missing";
+/**
+* Decoding a payload loads the chunks its client references name, so a
+* payload this page can't navigate to is only decoded by the navigation that
+* hard-navigates. Otherwise a prefetch after a deploy would load the new
+* deployment's code and stylesheets into this page.
+*/
+function isRscResponseCompatible(compatibilityIdHeader) {
+	return isRscCompatibilityIdCompatible(compatibilityIdHeader, clientRscCompatibilityId);
+}
 function setClientRscCompatibilityId(compatibilityId) {
 	if (IS_STATIC_EXPORT || !compatibilityId) return;
 	clientRscCompatibilityId = compatibilityId;
 }
-const optimisticRouteTemplates = /* @__PURE__ */ new Map();
-const optimisticRouteTemplateSources = /* @__PURE__ */ new Set();
-const optimisticRouteTemplateLearning = /* @__PURE__ */ new Map();
+const optimisticRouteTemplates = createOptimisticRouteTemplateStore();
 function claimInitialAppRouterBootstrap() {
 	if (window.__VINEXT_RSC_ROOT__ || window.__VINEXT_RSC_BOOTSTRAP_STATE__) return false;
 	window.__VINEXT_RSC_BOOTSTRAP_STATE__ = "starting";
@@ -105,8 +112,8 @@ const historyController = new AppBrowserHistoryController({
 	maxHistoryStateSnapshots: 50,
 	readHistoryState: () => window.history.state,
 	readCurrentHref: () => window.location.href,
-	pushHistoryState: (state, href) => pushHistoryStateWithoutNotify(state, "", href),
-	replaceHistoryState: (state, href) => replaceHistoryStateWithoutNotify(state, "", href),
+	pushHistoryState: (state, href, land) => pushHistoryStateWithoutNotify(state, "", href, land),
+	replaceHistoryState: (state, href, land) => replaceHistoryStateWithoutNotify(state, "", href, land),
 	readVisibleNavigationMetadata: () => {
 		if (!hasBrowserRouterState()) return null;
 		const routerState = getBrowserRouterState();
@@ -214,7 +221,7 @@ function restoreHistoryStateSnapshot(historyState, navId, onApprovedBeforeCommit
 	});
 	if (!restored) return false;
 	clientNavigationCacheGeneration += 1;
-	deleteInvalidatedHistoryRestoreEntries(visitedResponseCache);
+	revokeHistoryRestoreNavigationReuse(visitedResponseCache);
 	disableNavigationResponsePrefetchCacheReuse();
 	commitClientNavigationState(navId, { releaseSnapshot: false });
 	return true;
@@ -241,17 +248,23 @@ function stageClientParams(params) {
 }
 function clearVisitedResponseCache() {
 	visitedResponseCache.clear();
+	invalidateVisitedResponsePrefetches();
 }
-function clearPrefetchState() {
-	invalidatePrefetchCache();
+function clearPrefetchState(options) {
+	invalidatePrefetchCache(options);
 	optimisticRouteTemplates.clear();
-	optimisticRouteTemplateSources.clear();
-	optimisticRouteTemplateLearning.clear();
 }
-function clearClientNavigationCaches() {
+function clearClientNavigationCaches(options) {
+	clientNavigationCacheGeneration += 1;
+	clearVisitedResponseCache();
+	clearPrefetchState(options);
+	historyController.invalidateRestorableClientState();
+}
+function clearDynamicClientNavigationCaches() {
 	clientNavigationCacheGeneration += 1;
 	clearVisitedResponseCache();
-	clearPrefetchState();
+	invalidateDynamicPrefetchCache();
+	optimisticRouteTemplates.clear();
 	historyController.invalidateRestorableClientState();
 }
 function getMatchedUrlPathname(matchedUrl) {
@@ -309,6 +322,10 @@ async function fetchPersistedSourcePageRefresh(options) {
 * read the query the server rendered it with, not the navigation's.
 */
 async function decodeSupplementalRefresh(response, targetPathname) {
+	if (!isRscResponseCompatible(response.headers.get("X-Vinext-RSC-Compatibility-Id"))) {
+		response.body?.cancel().catch(() => {});
+		throw new Error("[vinext] Refreshed another deployment's payload");
+	}
 	const elements = await decodeAppElementsPromise(createFromFetch(Promise.resolve(response)));
 	const renderedPathAndSearch = parseRenderedPathAndSearchHeader(response.headers.get(VINEXT_RENDERED_PATH_AND_SEARCH_HEADER));
 	setAppElementsRenderedSearch(elements, new URL(renderedPathAndSearch ?? targetPathname, window.location.origin).search);
@@ -330,9 +347,10 @@ function parsePrefetchCacheKey(cacheKey) {
 }
 async function learnOptimisticRouteTemplateFromPrefetch(options) {
 	const source = parsePrefetchCacheKey(options.cacheKey);
-	if (source.interceptionContext !== options.interceptionContext) return false;
-	if (resolvePrefetchCacheEntryMountedSlotsHeader(options.entry) !== options.mountedSlotsHeader) return false;
-	if (options.interceptionContext !== null) return false;
+	if (source.interceptionContext !== options.interceptionContext) return null;
+	if (resolvePrefetchCacheEntryMountedSlotsHeader(options.entry) !== options.mountedSlotsHeader) return null;
+	if (options.interceptionContext !== null) return null;
+	if (!isRscResponseCompatible(options.entry.snapshot.compatibilityIdHeader)) return null;
 	const elements = await decodeAppElementsPromise(createFromFetch(Promise.resolve(restoreRscResponse(options.entry.snapshot))));
 	const template = createOptimisticRouteTemplate({
 		allowLoadingShell: options.entry.optimisticRouteShell === true,
@@ -343,40 +361,36 @@ async function learnOptimisticRouteTemplateFromPrefetch(options) {
 		mountedSlotsHeader: options.mountedSlotsHeader,
 		routeManifest: options.routeManifest
 	});
-	if (template === null) return false;
-	optimisticRouteTemplates.set(getOptimisticRouteTemplateKey({
-		interceptionContext: options.interceptionContext,
-		mountedSlotsHeader: options.mountedSlotsHeader,
-		routeId: template.routeId
-	}), template);
-	return true;
+	if (template === null) return null;
+	return {
+		key: getOptimisticRouteTemplateKey({
+			interceptionContext: options.interceptionContext,
+			mountedSlotsHeader: options.mountedSlotsHeader,
+			routeId: template.routeId
+		}),
+		template
+	};
 }
 async function learnOptimisticRouteTemplatesFromPrefetchCache(options) {
-	if (options.routeManifest === null) return;
-	const learning = [...optimisticRouteTemplateLearning.values()];
+	const { routeManifest } = options;
+	if (routeManifest === null) return;
+	const learning = optimisticRouteTemplates.pendingLearning();
 	for (const [cacheKey, entry] of getPrefetchCache()) {
 		const sourceKey = getOptimisticPrefetchSourceKey({
 			cacheKey,
 			interceptionContext: options.interceptionContext,
 			mountedSlotsHeader: options.mountedSlotsHeader
 		});
-		if (optimisticRouteTemplateSources.has(sourceKey)) continue;
-		if (optimisticRouteTemplateLearning.has(sourceKey)) continue;
+		if (optimisticRouteTemplates.hasSource(sourceKey)) continue;
 		if (!isSettledPrefetchCacheEntry(entry)) continue;
 		if (entry.prefetchKind === "route-tree") continue;
-		const promise = learnOptimisticRouteTemplateFromPrefetch({
+		learning.push(optimisticRouteTemplates.learn(sourceKey, () => learnOptimisticRouteTemplateFromPrefetch({
 			cacheKey,
 			entry,
 			interceptionContext: options.interceptionContext,
 			mountedSlotsHeader: options.mountedSlotsHeader,
-			routeManifest: options.routeManifest
-		}).then((learned) => {
-			if (learned) optimisticRouteTemplateSources.add(sourceKey);
-		}).finally(() => {
-			optimisticRouteTemplateLearning.delete(sourceKey);
-		});
-		optimisticRouteTemplateLearning.set(sourceKey, promise);
-		learning.push(promise);
+			routeManifest
+		})));
 	}
 	if (learning.length === 0) return;
 	await Promise.allSettled(learning);
@@ -519,7 +533,7 @@ function evictVisitedResponseCacheIfNeeded() {
 function readVisitedResponseCacheCandidate(rscUrl, interceptionContext, mountedSlotsHeader, navigationKind) {
 	const cacheKey = AppElementsWire.encodeCacheKey(rscUrl, interceptionContext);
 	const match = findVisitedResponseCacheEntry(visitedResponseCache, rscUrl, interceptionContext);
-	if (!match) return {
+	if (!match || match.entry.navigationReuseRevoked) return {
 		cacheKey,
 		entry: null,
 		facts: {
@@ -554,13 +568,14 @@ function applyVisitedResponseCacheCandidateDecision(candidate, decision) {
 function deleteVisitedResponse(rscUrl, interceptionContext) {
 	deleteVisitedResponseCacheEntry(visitedResponseCache, rscUrl, interceptionContext);
 }
-function storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, params, prefetchFallbackTtlMs = DYNAMIC_NAVIGATION_CACHE_TTL, requestMountedSlotsHeader = snapshot.mountedSlotsHeader ?? null, elements, seedPrefetchCache = true, prefetchSnapshot = snapshot, reuseAfterHistoryRestore = false) {
+function storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, params, prefetchFallbackTtlMs = DYNAMIC_NAVIGATION_CACHE_TTL, requestMountedSlotsHeader = snapshot.mountedSlotsHeader ?? null, elements, seedPrefetchCache = true, prefetchSnapshot = snapshot, reuseAfterHistoryRestore = false, fromHydration = false) {
 	const cacheKey = AppElementsWire.encodeCacheKey(rscUrl, interceptionContext);
 	deleteAllVisitedResponseCacheEntries(visitedResponseCache, rscUrl, interceptionContext);
 	evictVisitedResponseCacheIfNeeded();
 	const entry = createVisitedResponseCacheEntry({
 		fallbackTtlMs: prefetchFallbackTtlMs,
 		elements,
+		fromHydration,
 		now: Date.now(),
 		mountedSlotsHeader: requestMountedSlotsHeader,
 		params,
@@ -685,7 +700,6 @@ function BrowserRoot({ hydrationCachePublication, initialElements, initialNaviga
 		interception: initialMetadata.interception,
 		interceptionContext: initialMetadata.interceptionContext,
 		layoutIds: initialMetadata.layoutIds,
-		layoutFlags: initialMetadata.layoutFlags,
 		navigationSnapshot: initialNavigationSnapshot,
 		previousNextUrl: null,
 		renderId: 0,
@@ -952,6 +966,7 @@ function registerServerActionCallback() {
 		return loadServerActionClient().then(({ invokeClientServerAction }) => invokeClientServerAction(id, args, actionInitiation, {
 			basePath: __basePath,
 			clearClientNavigationCaches,
+			clearDynamicClientNavigationCaches,
 			clientRscCompatibilityId,
 			commitSameUrlNavigatePayload,
 			navigationPlanner,
@@ -1045,7 +1060,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 		const fallbackTtlMs = initialRscBootstrap?.initialCacheKind === "static" ? PREFETCH_CACHE_TTL : DYNAMIC_NAVIGATION_CACHE_TTL;
 		hydrationCachePublication.publish(() => {
 			if (cacheGeneration !== clientNavigationCacheGeneration) return () => {};
-			return storeVisitedResponseSnapshot(rscUrl, metadata.interceptionContext, snapshot, initialParams, fallbackTtlMs, mountedSlotsHeader, elements, false, snapshot, initialRscBootstrap?.initialCacheKind === "static" || metadata.interceptionContext !== null);
+			return storeVisitedResponseSnapshot(rscUrl, metadata.interceptionContext, snapshot, initialParams, fallbackTtlMs, mountedSlotsHeader, elements, false, snapshot, initialRscBootstrap?.initialCacheKind === "static" || metadata.interceptionContext !== null, true);
 		});
 	}).catch(() => {});
 	historyController.writeBootstrapHistoryMetadata();
@@ -1118,6 +1133,12 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 			let currentPrevNextUrl = previousNextUrlOverride;
 			let redirectCount = redirectDepth;
 			let detachedNavigationCommits = false;
+			let optimisticShellElements = null;
+			const keepOptimisticShellMetadata = (payload) => {
+				const shellElements = optimisticShellElements;
+				if (shellElements === null) return payload;
+				return payload instanceof Promise ? payload.then((elements) => keepOptimisticStreamingMetadata(elements, shellElements, String(navId))) : keepOptimisticStreamingMetadata(payload, shellElements, String(navId));
+			};
 			const activeTraversalIntent = navigationKind === "traverse" ? traversalIntent ?? historyController.resolveTraversalIntent(window.history.state) : null;
 			let startedHardNavigation = false;
 			const performHardNavigationForScrollIntent = (targetHref, mode) => {
@@ -1131,6 +1152,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 			};
 			let restoredBfcacheIds = navigationKind === "traverse" ? historyController.readCurrentBfcacheVersionHistoryIds(activeTraversalIntent?.historyState ?? window.history.state) : null;
 			const reuseCurrentBfcacheIds = navigationKind !== "traverse" || !historyController.isCacheInvalidationGuarded() && historyController.isCurrentBfcacheVersion(activeTraversalIntent?.historyState ?? window.history.state);
+			const releaseNavigationInFlight = trackAppRouterNavigationInFlight();
 			try {
 				const shouldUsePendingRouterState = programmaticTransition;
 				if (hasBrowserRouterState()) {
@@ -1151,6 +1173,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 				}
 				const navigationInitiationState = getBrowserRouterState();
 				const mountedSlotsHeader = getMountedSlotIdsHeader(navigationInitiationState.elements);
+				let mountedLayoutsHeader = navigationKind === "navigate" ? createMountedLayoutsHeader(navigationInitiationState.elements, navigationInitiationState.layoutIds) : null;
 				while (true) {
 					const url = new URL(currentHref, window.location.origin);
 					const requestState = getRequestState(navigationKind, url.pathname, currentPrevNextUrl, activeTraversalIntent?.historyState);
@@ -1284,7 +1307,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 							navId,
 							operationLane: toOperationLane(navigationKind),
 							params: cachedParams,
-							payload: cachedPayload,
+							payload: keepOptimisticShellMetadata(cachedPayload),
 							payloadOrigin: cachedRoute.elements ? COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN : VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN,
 							pendingRouterState: detachedNavigationCommits ? null : pendingRouterState,
 							previousNextUrl: requestPreviousNextUrl,
@@ -1360,7 +1383,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 								interceptionContext: requestInterceptionContext,
 								mountedSlotsHeader,
 								routeManifest,
-								templates: optimisticRouteTemplates
+								templates: optimisticRouteTemplates.templates
 							});
 							if (optimisticPayload !== null && canCommitOptimisticRouteTemplate({
 								currentElements: navigationInitiationState.elements,
@@ -1372,6 +1395,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 								template: optimisticPayload.template
 							})) {
 								detachedNavigationCommits = true;
+								optimisticShellElements = optimisticPayload.elements;
 								const optimisticNavigationSnapshot = createClientNavigationRenderSnapshot(currentHref, optimisticPayload.params);
 								renderNavigationPayload({
 									actionType: toActionType(navigationKind),
@@ -1398,13 +1422,16 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 							}
 						}
 					}
+					let sentMountedLayouts = false;
 					if (!navResponse) {
-						if (navigationKind === "navigate") {
-							const clientReuseManifestHeader = createClientReuseManifestHeaderFromVisibleAppState(navigationInitiationState);
-							if (clientReuseManifestHeader !== null) requestHeaders.set(VINEXT_CLIENT_REUSE_MANIFEST_HEADER, clientReuseManifestHeader);
+						let liveRequestHeaders = requestHeaders;
+						if (mountedLayoutsHeader !== null && requestInterceptionContext === null) {
+							liveRequestHeaders = new Headers(requestHeaders);
+							liveRequestHeaders.set(VINEXT_MOUNTED_LAYOUTS_HEADER, mountedLayoutsHeader);
+							sentMountedLayouts = true;
 						}
 						navResponse = await fetch(rscUrl, {
-							headers: requestHeaders,
+							headers: liveRequestHeaders,
 							credentials: "include",
 							priority: "auto",
 							signal: navigationAbortHandle.signal
@@ -1487,6 +1514,15 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 							navigationAbortHandle.release();
 						}).then(requireCompleteSupplementalRefresh);
 					}
+					if (sentMountedLayouts) {
+						const elements = await rscPayload;
+						if (!browserNavigationController.isCurrentNavigation(navId)) return;
+						if (!holdsSkippedLayouts(navigationInitiationState, elements) || !holdsSkippedLayouts(getBrowserRouterState(), elements)) {
+							mountedLayoutsHeader = null;
+							continue;
+						}
+						rscPayload = Promise.resolve(elements);
+					}
 					if (IS_STATIC_EXPORT) {
 						const staticExportElements = await rscPayload;
 						if (!browserNavigationController.isCurrentNavigation(navId)) return;
@@ -1518,7 +1554,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 						},
 						operationLane: toOperationLane(navigationKind),
 						params: navParams,
-						payload: rscPayload,
+						payload: keepOptimisticShellMetadata(rscPayload),
 						payloadOrigin: FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN,
 						pendingRouterState: detachedNavigationCommits ? null : pendingRouterState,
 						previousNextUrl: requestPreviousNextUrl,
@@ -1527,7 +1563,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 						scrollIntent,
 						targetHref: currentHref,
 						traversalIntent: activeTraversalIntent,
-						visibleCommitMode: prefetchedElements ? "synchronous" : visibleCommitMode
+						visibleCommitMode
 					});
 					if (renderOutcome === "hard-navigate") {
 						startedHardNavigation = true;
@@ -1563,13 +1599,12 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 							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, true, prefetchSnapshot, interceptionContext !== null || hasNavigationResponseHistoryLifetime(snapshot));
+							storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, navParams, DYNAMIC_NAVIGATION_CACHE_TTL, mountedSlotsHeader, committedElements, isCompleteAppPayloadMetadata(metadata), prefetchSnapshot, interceptionContext !== null || hasNavigationResponseHistoryLifetime(snapshot));
 						}
 					} catch {}
 					return;
@@ -1582,10 +1617,15 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 				navigationAbortHandle.release();
 				browserNavigationController.finalizeNavigation(navId, pendingRouterState);
 				discardedServerActionRefreshScheduler.markNavigationSettled();
+				releaseNavigationInFlight();
 				if (startedHardNavigation) await waitForMpaNavigationRestore();
 			}
 		},
-		preparePrefetchResponse: (response) => decodeAppElementsPromise(createFromFetch(Promise.resolve(response))),
+		readVisitedResponseForFullPrefetch: (rscUrls, interceptionContext, mountedSlotsHeader) => findVisitedResponseForFullPrefetch(visitedResponseCache, rscUrls, interceptionContext, mountedSlotsHeader),
+		preparePrefetchResponse: (response) => {
+			if (!isRscResponseCompatible(response.headers.get("X-Vinext-RSC-Compatibility-Id"))) return Promise.reject(/* @__PURE__ */ new Error("[vinext] Prefetched another deployment's payload"));
+			return decodeAppElementsPromise(createFromFetch(Promise.resolve(response)));
+		},
 		claimCurrentHistoryTreeSnapshot: (historyUpdateMode, previousHistoryState) => historyController.claimCurrentHistoryTreeSnapshot(historyUpdateMode, previousHistoryState),
 		commitAppOwnedHistoryStateWrite: (historyUpdateMode, previousHistoryState) => historyController.commitAppOwnedHistoryStateWrite(historyUpdateMode, previousHistoryState),
 		discardPendingNavigation: () => {

package/dist/server/app-browser-error.d.ts

@@ -10,4 +10,5 @@ export declare function createOnUncaughtError(options?: {
 export declare function createProdOnCaughtError(onImplicitRootError: HydrateRootErrorHandler): HydrateRootErrorHandler;
 export declare function createDevOnCaughtError(onCaughtError: HydrateRootErrorHandler, onImplicitRootError: HydrateRootErrorHandler): HydrateRootErrorHandler;
 export declare function createProdOnRecoverableError(onReportedError: () => void): (error: unknown) => void;
-//#endregion
+//#endregion
+export {};

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

@@ -1,3 +1,4 @@
+import { RouterHistoryWriteLanding } from "../shims/navigation.js";
 import { BfcacheIdMap, HistoryTraversalIntent } from "./app-history-state.js";
 import { AppRouterState } from "./app-browser-state.js";
 import { HistoryUpdateMode } from "./app-browser-navigation-controller.js";
@@ -19,10 +20,10 @@ type AppBrowserHistoryControllerDeps = {
   readHistoryState: () => unknown;
   /** Reads `window.location.href`. Injected so the controller stays unit-testable. */
   readCurrentHref: () => string;
-  /** Wraps `pushHistoryStateWithoutNotify(state, "", href)`. */
-  pushHistoryState: (state: unknown, href: string) => void;
-  /** Wraps `replaceHistoryStateWithoutNotify(state, "", href)`. */
-  replaceHistoryState: (state: unknown, href?: string) => void;
+  /** Wraps `pushHistoryStateWithoutNotify(state, "", href, land)`. */
+  pushHistoryState: (state: unknown, href: string, land?: RouterHistoryWriteLanding) => void;
+  /** Wraps `replaceHistoryStateWithoutNotify(state, "", href, land)`. */
+  replaceHistoryState: (state: unknown, href?: string, land?: RouterHistoryWriteLanding) => void;
   readVisibleNavigationMetadata: () => VisibleNavigationMetadata | null;
 };
 /**
@@ -121,4 +122,5 @@ export declare class AppBrowserHistoryController {
    */
   restoreHistorySnapshot(options: RestoreHistorySnapshotOptions): boolean;
 }
-//#endregion
+//#endregion
+export {};

package/dist/server/app-browser-history-controller.js

@@ -31,6 +31,7 @@ var AppBrowserHistoryController = class {
 	#treeSnapshots = /* @__PURE__ */ new Map();
 	#treeSnapshotClaimCounts = /* @__PURE__ */ new Map();
 	#treeSnapshotClaimByHistoryIndex = /* @__PURE__ */ new Map();
+	#treeSnapshotIdPrefix = createDocumentTreeSnapshotIdPrefix();
 	#readHistoryState;
 	#readCurrentHref;
 	#pushHistoryState;
@@ -41,6 +42,9 @@ var AppBrowserHistoryController = class {
 	#currentTreeSnapshotId = null;
 	#nextTreeSnapshotId = 0;
 	#treeSnapshotIdPendingFreshState = null;
+	#historyIndicesAwaitingTreeSnapshot = /* @__PURE__ */ new Set();
+	#treeSnapshotPending = true;
+	#historyIndexAwaitingTreeClaim = null;
 	constructor(deps) {
 		this.#readHistoryState = deps.readHistoryState;
 		this.#readCurrentHref = deps.readCurrentHref;
@@ -99,18 +103,29 @@ var AppBrowserHistoryController = class {
 		const previousState = this.readCurrentTreeSnapshot();
 		const previousOperation = previousState?.activeOperation;
 		if (previousState && previousOperation?.navigationCommitKind === "detached" && state.activeOperation?.navigationCommitKind === "authoritative" && state.activeOperation.navigationId === previousOperation.navigationId) this.#restorableClientState.replaceHistoryStateSnapshots(previousState, state);
+		for (const historyIndex of this.#historyIndicesAwaitingTreeSnapshot) this.#restorableClientState.rememberHistoryStateSnapshot({
+			historyIndex,
+			state
+		});
+		this.#historyIndicesAwaitingTreeSnapshot.clear();
 		this.#restorableClientState.rememberHistoryStateSnapshot({
 			historyIndex: this.#currentHistoryTraversalIndex,
 			state
 		});
+		this.#treeSnapshotPending = false;
 		const historyTreeSnapshotId = readHistoryStateTreeSnapshotId(this.#readHistoryState());
-		const treeSnapshotId = historyTreeSnapshotId !== null && this.#treeSnapshots.has(historyTreeSnapshotId) && (historyTreeSnapshotId === this.#treeSnapshotIdPendingFreshState || this.#treeSnapshotClaimCounts.has(historyTreeSnapshotId)) ? historyTreeSnapshotId : this.#nextTreeSnapshotId++;
+		const treeSnapshotId = historyTreeSnapshotId !== null && this.#treeSnapshots.has(historyTreeSnapshotId) && (historyTreeSnapshotId === this.#treeSnapshotIdPendingFreshState || this.#treeSnapshotClaimCounts.has(historyTreeSnapshotId)) ? historyTreeSnapshotId : `${this.#treeSnapshotIdPrefix}:${this.#nextTreeSnapshotId++}`;
 		this.#treeSnapshotIdPendingFreshState = null;
 		const previousTreeSnapshotId = this.#currentTreeSnapshotId;
 		this.#currentTreeSnapshotId = treeSnapshotId;
 		this.#treeSnapshots.set(treeSnapshotId, state);
+		const claimingHistoryIndex = this.#historyIndexAwaitingTreeClaim;
+		this.#historyIndexAwaitingTreeClaim = null;
+		const claimsTree = claimingHistoryIndex !== null && claimingHistoryIndex === this.#currentHistoryTraversalIndex && claimingHistoryIndex === readHistoryStateTraversalIndex(this.#readHistoryState());
+		if (claimsTree) this.#claimTreeSnapshotAtHistoryIndex(claimingHistoryIndex, treeSnapshotId);
 		if (previousTreeSnapshotId !== null && previousTreeSnapshotId !== treeSnapshotId && !this.#treeSnapshotClaimCounts.has(previousTreeSnapshotId)) this.#treeSnapshots.delete(previousTreeSnapshotId);
-		if (historyTreeSnapshotId !== treeSnapshotId) this.#replaceHistoryState(createHistoryStateWithTreeSnapshotId(this.#readHistoryState(), treeSnapshotId));
+		if (claimsTree) this.#replaceHistoryState(createHistoryStateWithTreeSnapshotClaim(createHistoryStateWithTreeSnapshotId(this.#readHistoryState(), treeSnapshotId), true));
+		else if (historyTreeSnapshotId !== treeSnapshotId) this.#replaceHistoryState(createHistoryStateWithTreeSnapshotId(this.#readHistoryState(), treeSnapshotId));
 	}
 	/** The router state of the most recently committed render, if any. */
 	readCurrentTreeSnapshot() {
@@ -125,7 +140,21 @@ var AppBrowserHistoryController = class {
 	claimCurrentHistoryTreeSnapshot(historyUpdateMode, previousHistoryState) {
 		let historyState = this.#readHistoryState();
 		const treeSnapshotId = readHistoryStateTreeSnapshotId(historyState);
-		if (treeSnapshotId === null || !this.#treeSnapshots.has(treeSnapshotId)) return;
+		if (treeSnapshotId === null || !this.#treeSnapshots.has(treeSnapshotId)) {
+			if (historyUpdateMode === "push") {
+				const previousHistoryIndex = readHistoryStateTraversalIndex(previousHistoryState);
+				if (previousHistoryIndex !== null && this.#treeSnapshotPending) this.#historyIndicesAwaitingTreeSnapshot.add(previousHistoryIndex);
+				this.#releaseForwardTreeSnapshotClaims();
+				const historyIndex = this.#nextHistoryTraversalIndex + 1;
+				this.#replaceHistoryState(createHistoryStateWithNavigationMetadata(historyState, {
+					previousNextUrl: readHistoryStatePreviousNextUrl(historyState),
+					traversalIndex: historyIndex
+				}));
+				this.commitHistoryTraversalIndex(historyIndex);
+				this.#historyIndexAwaitingTreeClaim = this.#treeSnapshotPending ? historyIndex : null;
+			}
+			return;
+		}
 		let historyIndex;
 		if (historyUpdateMode === "push") {
 			this.#releaseForwardTreeSnapshotClaims();
@@ -185,7 +214,6 @@ var AppBrowserHistoryController = class {
 		if (treeSnapshotId !== this.#currentTreeSnapshotId) this.#treeSnapshots.delete(treeSnapshotId);
 	}
 	commitHashOnlyNavigation(href, historyUpdateMode, scroll) {
-		if (historyUpdateMode === "push") this.#releaseForwardTreeSnapshotClaims();
 		const navigationHistoryIndex = this.allocateNavigationHistoryTraversalIndex(historyUpdateMode);
 		const historyState = this.#readHistoryState();
 		const visible = this.#readVisibleNavigationMetadata();
@@ -199,11 +227,59 @@ var AppBrowserHistoryController = class {
 			previousNextUrl,
 			traversalIndex: navigationHistoryIndex
 		}), true);
-		if (historyUpdateMode === "replace") this.#replaceHistoryState(nextHistoryState, href);
-		else this.#pushHistoryState(nextHistoryState, href);
+		const historyIndex = this.#writeNavigationHistoryState(historyUpdateMode, nextHistoryState, href, navigationHistoryIndex, false);
 		const treeSnapshotId = readHistoryStateTreeSnapshotId(nextHistoryState);
-		if (navigationHistoryIndex !== null && treeSnapshotId !== null) this.#claimTreeSnapshotAtHistoryIndex(navigationHistoryIndex, treeSnapshotId);
-		this.commitHistoryTraversalIndex(navigationHistoryIndex);
+		if (historyIndex !== null && treeSnapshotId !== null) this.#claimTreeSnapshotAtHistoryIndex(historyIndex, treeSnapshotId);
+	}
+	/**
+	* Writes an app-owned push or replace entry and returns the traversal index
+	* it landed at. A history wrapper installed after boot can make its own
+	* writes before forwarding this one. When those moved the indices, the index
+	* is assigned as the write lands: a push goes after them, and a replace takes
+	* the index of the entry it actually overwrites. The index is committed as
+	* soon as the write succeeds, so a push the wrapper makes after forwarding
+	* goes after it.
+	*/
+	#writeNavigationHistoryState(historyUpdateMode, state, href, allocatedIndex, rendersTree) {
+		const allocatedCurrentIndex = this.#currentHistoryTraversalIndex;
+		const allocatedNextIndex = this.#nextHistoryTraversalIndex;
+		const releaseClaims = (overwrittenHistoryState) => {
+			if (historyUpdateMode === "push") {
+				this.#releaseForwardTreeSnapshotClaims();
+				return;
+			}
+			if (!rendersTree) return;
+			const overwrittenIndex = readHistoryStateTraversalIndex(overwrittenHistoryState) ?? this.#currentHistoryTraversalIndex;
+			if (overwrittenIndex !== null) this.#releaseTreeSnapshotClaimAtHistoryIndex(overwrittenIndex);
+		};
+		let landedIndex;
+		let landingStarted = false;
+		const land = (data) => {
+			landingStarted = true;
+			const index = this.#currentHistoryTraversalIndex !== allocatedCurrentIndex || this.#nextHistoryTraversalIndex !== allocatedNextIndex ? this.allocateNavigationHistoryTraversalIndex(historyUpdateMode) : allocatedIndex;
+			const overwrittenHistoryState = this.#readHistoryState();
+			return {
+				data: index === allocatedIndex ? data : createHistoryStateWithNavigationMetadata(data, {
+					previousNextUrl: readHistoryStatePreviousNextUrl(data),
+					traversalIndex: index
+				}),
+				commit: () => {
+					releaseClaims(overwrittenHistoryState);
+					if (rendersTree) this.#treeSnapshotPending = true;
+					landedIndex = index;
+					this.commitHistoryTraversalIndex(index);
+				}
+			};
+		};
+		const historyStateBeforeWrite = this.#readHistoryState();
+		if (historyUpdateMode === "push") this.#pushHistoryState(state, href, land);
+		else this.#replaceHistoryState(state, href, land);
+		if (landedIndex !== void 0) return landedIndex;
+		if (landingStarted) return null;
+		releaseClaims(historyStateBeforeWrite);
+		if (rendersTree) this.#treeSnapshotPending = true;
+		this.commitHistoryTraversalIndex(allocatedIndex);
+		return allocatedIndex;
 	}
 	#createHashOnlyNavigationBaseHistoryState(historyUpdateMode, scroll) {
 		const historyState = this.#readHistoryState();
@@ -238,19 +314,15 @@ var AppBrowserHistoryController = class {
 		let wroteHistoryState = false;
 		if (options.historyUpdateMode === "replace" && (currentHref !== targetHref || replacesClaimedOrExternalTree)) {
 			options.stageClientParams();
-			const currentHistoryIndex = readHistoryStateTraversalIndex(currentHistoryState) ?? this.#currentHistoryTraversalIndex;
-			if (currentHistoryIndex !== null) this.#releaseTreeSnapshotClaimAtHistoryIndex(currentHistoryIndex);
-			this.#replaceHistoryState(historyState, options.href);
+			this.#writeNavigationHistoryState("replace", historyState, options.href, navigationHistoryIndex, true);
 			wroteHistoryState = true;
-			this.commitHistoryTraversalIndex(navigationHistoryIndex);
 		} else if (options.historyUpdateMode === "push" && currentHref !== targetHref) {
 			options.stageClientParams();
-			this.#releaseForwardTreeSnapshotClaims();
-			this.#pushHistoryState(historyState, options.href);
+			this.#writeNavigationHistoryState("push", historyState, options.href, navigationHistoryIndex, true);
 			wroteHistoryState = true;
-			this.commitHistoryTraversalIndex(navigationHistoryIndex);
 		}
 		if (!wroteHistoryState) {
+			this.#treeSnapshotPending = true;
 			this.syncCurrentHistoryStatePreviousNextUrl(options.previousNextUrl, options.bfcacheIds, options.activeRoutePaths);
 			options.stageClientParams();
 			if (options.targetHistoryIndex !== void 0) this.commitHistoryTraversalIndex(options.targetHistoryIndex);
@@ -306,6 +378,7 @@ var AppBrowserHistoryController = class {
 				state,
 				beforeCommit: () => {
 					this.commitTraversalIndexFromHistoryState(options.historyState);
+					this.#treeSnapshotPending = true;
 					options.stageClientParams(state.navigationSnapshot.params);
 				}
 			});
@@ -317,11 +390,16 @@ var AppBrowserHistoryController = class {
 			state: decision.state,
 			beforeCommit: () => {
 				this.commitHistoryTraversalIndex(decision.targetHistoryIndex);
+				this.#treeSnapshotPending = true;
 				options.stageClientParams(decision.state.navigationSnapshot.params);
 			}
 		});
 	}
 };
+function createDocumentTreeSnapshotIdPrefix() {
+	const bytes = crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(8));
+	return Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
 function areStringArraysEqual(a, b) {
 	if (a === b) return true;
 	if (a === null || b === null || a.length !== b.length) return false;