vinext 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -133,11 +133,10 @@ declare function resolvePendingNavigationCommitDispositionDecision(options: {
   startedNavigationId: number;
   targetHref?: string;
 }): PendingNavigationCommitDispositionDecision;
-declare function createPendingNavigationCommit(options: {
+type CreatePendingNavigationCommitOptions = {
   currentState: AppRouterState;
   navigationCommitKind?: "authoritative" | "detached";
   navigationId?: number;
-  nextElements: Promise<AppElements>;
   navigationSnapshot: ClientNavigationRenderSnapshot;
   operationLane: OperationLane;
   payloadOrigin: AppNavigationPayloadOrigin;
@@ -146,6 +145,12 @@ declare function createPendingNavigationCommit(options: {
   restoredBfcacheIds?: BfcacheIdMap | null;
   reuseCurrentBfcacheIds?: boolean;
   type: "navigate" | "replace" | "traverse";
+};
+declare function createPendingNavigationCommitFromElements(options: CreatePendingNavigationCommitOptions & {
+  nextElements: AppElements;
+}): PendingNavigationCommit;
+declare function createPendingNavigationCommit(options: CreatePendingNavigationCommitOptions & {
+  nextElements: Promise<AppElements>;
 }): Promise<PendingNavigationCommit>;
 //#endregion
-export { AppNavigationPayloadOrigin, AppRouterAction, AppRouterState, type BfcacheIdMap, COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, CommittedOperationRecord, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, type HistoryTraversalIntent, type OperationLane, PendingNavigationCommit, PendingOperationRecord, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, createBfcacheSegmentStateKeyMap, createHistoryStateWithNavigationMetadata, createHistoryStateWithPreviousNextUrl, createInitialBfcacheIdMap, createNextBfcacheIdMap, createPendingNavigationCommit, isCacheRestorableAppPayloadMetadata, isCompleteAppPayloadMetadata, isHistoryStateBfcacheVersionCurrent, preserveBfcacheIdsForMergedElements, readHistoryStateBfcacheIds, readHistoryStateBfcacheVersion, readHistoryStatePreviousNextUrl, readHistoryStateTraversalIndex, resolveHistoryTraversalIntent, resolveInterceptionContextFromPreviousNextUrl, resolvePendingNavigationCommitDispositionDecision, resolveServerActionRequestState };
+export { AppNavigationPayloadOrigin, AppRouterAction, AppRouterState, COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, CommittedOperationRecord, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, type HistoryTraversalIntent, type OperationLane, PendingNavigationCommit, PendingOperationRecord, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, createBfcacheSegmentStateKeyMap, createHistoryStateWithNavigationMetadata, createHistoryStateWithPreviousNextUrl, createInitialBfcacheIdMap, createNextBfcacheIdMap, createPendingNavigationCommit, createPendingNavigationCommitFromElements, isCacheRestorableAppPayloadMetadata, isCompleteAppPayloadMetadata, isHistoryStateBfcacheVersionCurrent, preserveBfcacheIdsForMergedElements, readHistoryStateBfcacheIds, readHistoryStateBfcacheVersion, readHistoryStatePreviousNextUrl, readHistoryStateTraversalIndex, resolveHistoryTraversalIntent, resolveInterceptionContextFromPreviousNextUrl, resolvePendingNavigationCommitDispositionDecision, resolveServerActionRequestState };

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

@@ -279,8 +279,8 @@ function mergeSkippedLayoutSlotPreservation(options) {
 	}
 	return preservePreviousSlotIds;
 }
-async function createPendingNavigationCommit(options) {
-	const elements = await options.nextElements;
+function createPendingNavigationCommitFromElements(options) {
+	const elements = options.nextElements;
 	const metadata = AppElementsWire.readMetadata(elements);
 	const cacheEntryReuseProof = metadata.cacheEntryReuseProof ?? (requiresCacheEntryReuseProof(options.payloadOrigin) ? createCacheEntryReuseProof(null) : void 0);
 	const requestedPreviousNextUrl = options.previousNextUrl !== void 0 ? options.previousNextUrl : options.currentState.previousNextUrl;
@@ -328,5 +328,11 @@ async function createPendingNavigationCommit(options) {
 		skippedLayoutIds: metadata.skippedLayoutIds
 	};
 }
+async function createPendingNavigationCommit(options) {
+	return createPendingNavigationCommitFromElements({
+		...options,
+		nextElements: await options.nextElements
+	});
+}
 //#endregion
-export { COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, createBfcacheSegmentStateKeyMap, createHistoryStateWithNavigationMetadata, createHistoryStateWithPreviousNextUrl, createInitialBfcacheIdMap, createNextBfcacheIdMap, createPendingNavigationCommit, isCacheRestorableAppPayloadMetadata, isCompleteAppPayloadMetadata, isHistoryStateBfcacheVersionCurrent, preserveBfcacheIdsForMergedElements, readHistoryStateBfcacheIds, readHistoryStateBfcacheVersion, readHistoryStatePreviousNextUrl, readHistoryStateTraversalIndex, resolveHistoryTraversalIntent, resolveInterceptionContextFromPreviousNextUrl, resolvePendingNavigationCommitDispositionDecision, resolveServerActionRequestState };
+export { COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, createBfcacheSegmentStateKeyMap, createHistoryStateWithNavigationMetadata, createHistoryStateWithPreviousNextUrl, createInitialBfcacheIdMap, createNextBfcacheIdMap, createPendingNavigationCommit, createPendingNavigationCommitFromElements, isCacheRestorableAppPayloadMetadata, isCompleteAppPayloadMetadata, isHistoryStateBfcacheVersionCurrent, preserveBfcacheIdsForMergedElements, readHistoryStateBfcacheIds, readHistoryStateBfcacheVersion, readHistoryStatePreviousNextUrl, readHistoryStateTraversalIndex, resolveHistoryTraversalIntent, resolveInterceptionContextFromPreviousNextUrl, resolvePendingNavigationCommitDispositionDecision, resolveServerActionRequestState };

package/dist/server/app-page-cache-finalizer.js

@@ -1,7 +1,7 @@
 import { NEXTJS_CACHE_HEADER, VINEXT_CACHE_HEADER } from "./headers.js";
-import { setCacheStateHeaders } from "./cache-headers.js";
 import { applyCdnResponseHeaders } from "./cache-control.js";
 import { buildAppPageCacheValue } from "./isr-cache.js";
+import { setCacheStateHeaders } from "./cache-headers.js";
 import { readStreamAsText } from "../utils/text-stream.js";
 import { createEmptyAppPageRenderObservationState } from "./app-page-render-observation.js";
 //#region src/server/app-page-cache-finalizer.ts

package/dist/server/app-page-cache.d.ts

@@ -18,7 +18,7 @@ type AppPageCacheOutcomeMetric = Readonly<{
    */
   cacheKey: string;
   outcome: "hit" | "miss" | "stale";
-  reason: "empty-entry" | "no-entry" | "non-app-page-entry" | "query-variant-unproven" | "read-error" | "served" | "stale-empty-entry";
+  reason: "empty-entry" | "expired" | "no-entry" | "non-app-page-entry" | "query-variant-unproven" | "read-error" | "served" | "stale-empty-entry";
 }>;
 type AppPageCacheOutcomeRecorder = (metric: AppPageCacheOutcomeMetric) => void;
 type AppPageCacheRenderResult = {

package/dist/server/app-page-cache.js

@@ -1,9 +1,9 @@
 import { VINEXT_MOUNTED_SLOTS_HEADER } from "./headers.js";
-import { setCacheStateHeaders } from "./cache-headers.js";
 import { applyCdnResponseHeaders } from "./cache-control.js";
 import { decideIsr } from "./isr-decision.js";
 import { buildAppPageCacheValue } from "./isr-cache.js";
 import { encodeCacheTag } from "../utils/encode-cache-tag.js";
+import { setCacheStateHeaders } from "./cache-headers.js";
 import { VINEXT_RSC_CONTENT_TYPE, VINEXT_RSC_VARY_HEADER, applyRscCompatibilityIdHeader, applyRscDeploymentIdHeader } from "./app-rsc-cache-busting.js";
 import { mergeMiddlewareResponseHeaders } from "./middleware-response-headers.js";
 import { applyEdgeRuntimeHeader } from "./app-page-response.js";
@@ -58,7 +58,7 @@ function hasQueryInvariantAppPageProof(cachedValue) {
 function resolveRegeneratedAppPageCachePolicy(options) {
 	let revalidateSeconds = options.routeRevalidateSeconds;
 	const renderRevalidateSeconds = options.renderCacheControl?.revalidate;
-	if (renderRevalidateSeconds !== void 0) revalidateSeconds = revalidateSeconds > 0 ? Math.min(revalidateSeconds, renderRevalidateSeconds) : renderRevalidateSeconds;
+	if (typeof renderRevalidateSeconds === "number") revalidateSeconds = revalidateSeconds > 0 ? Math.min(revalidateSeconds, renderRevalidateSeconds) : renderRevalidateSeconds;
 	return {
 		expireSeconds: options.renderCacheControl?.expire ?? options.expireSeconds,
 		revalidateSeconds
@@ -105,6 +105,10 @@ function buildAppPageCachedResponse(cachedValue, options) {
 	});
 }
 async function serveAppPageCachedHtml(options, transformValue) {
+	if (options.cached?.isExpired) {
+		options.isrDebug?.("MISS (expired)", options.pathname);
+		return null;
+	}
 	if (typeof options.cachedValue.html !== "string" || options.cachedValue.html.length === 0) {
 		if (options.cached?.isStale) options.scheduleRegeneration();
 		options.isrDebug?.(options.emptyDebugMessage, options.pathname);
@@ -137,6 +141,16 @@ async function readAppPageCacheResponse(options) {
 	try {
 		const cached = await options.isrGet(isrKey);
 		const cachedValue = getCachedAppPageValue(cached);
+		if (cached?.isExpired) {
+			recordAppPageCacheOutcome(options.recordCacheOutcome, {
+				artifact,
+				cacheKey: isrKey,
+				outcome: "miss",
+				reason: "expired"
+			});
+			options.isrDebug?.("MISS (expired)", options.cleanPathname);
+			return null;
+		}
 		if (cached && !cachedValue) {
 			recordAppPageCacheOutcome(options.recordCacheOutcome, {
 				artifact,

package/dist/server/app-page-dispatch.d.ts

@@ -1,11 +1,11 @@
 import { ClassificationReason } from "../build/layout-classification-types.js";
 import { ClientReuseManifestParseResult } from "./client-reuse-manifest.js";
 import { AppOutgoingElements } from "./app-elements-wire.js";
+import { AppRscRenderMode } from "./app-rsc-render-mode.js";
 import { NavigationContext } from "../shims/navigation-context-state.js";
 import { AppPageFontPreload, LayoutClassificationOptions } from "./app-page-execution.js";
 import { AppPageMiddlewareContext } from "./app-page-response.js";
 import { AppLayoutParamAccessTracker } from "./app-layout-param-observation.js";
-import { AppRscRenderMode } from "./app-rsc-render-mode.js";
 import { RootParams } from "../shims/root-params.js";
 import { AppPageSsrHandler } from "./app-page-stream.js";
 import { CachedAppPageValue } from "../shims/cache-handler.js";
@@ -36,6 +36,8 @@ type AppPageDispatchIntercept<TPage = unknown> = {
   interceptLayouts?: readonly unknown[] | null;
   interceptLayoutSegments?: readonly (readonly string[])[] | null;
   interceptBranchSegments?: readonly string[] | null;
+  interceptLoadings?: readonly unknown[] | null;
+  interceptLoadingTreePositions?: readonly number[] | null;
   interceptNotFoundBranchSegments?: readonly string[] | null;
   notFound?: unknown;
   notFoundTreePosition?: number | null;
@@ -52,6 +54,8 @@ type AppPageDispatchInterceptOptions<TPage = unknown> = {
   interceptLayouts?: readonly unknown[] | null;
   interceptLayoutSegments?: readonly (readonly string[])[] | null;
   interceptBranchSegments?: readonly string[] | null;
+  interceptLoadings?: readonly unknown[] | null;
+  interceptLoadingTreePositions?: readonly number[] | null;
   interceptNotFoundBranchSegments?: readonly string[] | null;
   interceptNotFound?: unknown;
   interceptNotFoundTreePosition?: number | null;
@@ -69,6 +73,8 @@ type AppPageModule = {
 };
 type AppPageDispatchSlot = {
   default?: AppPageModule | null;
+  loading?: AppPageModule | null;
+  loadings?: readonly (AppPageModule | null | undefined)[] | null;
   page?: AppPageModule | null;
   slotPatternParts?: readonly string[] | null;
   slotParamNames?: readonly string[] | null;
@@ -85,6 +91,8 @@ type AppPageDispatchRoute = {
   layouts: readonly AppPageModule[];
   layoutTreePositions?: readonly number[];
   loading?: AppPageModule | null;
+  loadings?: readonly (AppPageModule | null | undefined)[];
+  loadingTreePositions?: readonly number[];
   notFound?: AppPageModule | null;
   notFounds?: readonly (AppPageModule | null | undefined)[];
   params: readonly string[];

package/dist/server/app-page-dispatch.js

@@ -1,4 +1,4 @@
-import { createRequestContext, runWithRequestContext } from "../shims/unified-request-context.js";
+import { closeAfterResponse, createRequestContext, runWithRequestContext } from "../shims/unified-request-context.js";
 import { getRequestExecutionContext } from "../shims/request-context.js";
 import "../utils/protocol-headers.js";
 import { AppElementsWire } from "./app-elements-wire.js";
@@ -23,6 +23,22 @@ import { resolveAppPageMethodResponse } from "./app-page-method.js";
 import { buildAppPageElement, resolveAppPageIntercept, resolveAppPageInterceptionRerenderTarget, validateAppPageDynamicParams } from "./app-page-request.js";
 import { renderAppPageLifecycle } from "./app-page-render.js";
 //#region src/server/app-page-dispatch.ts
+function getActiveLoadingTreePositions(route) {
+	const positions = [];
+	for (const [index, loadingModule] of (route.loadings ?? []).entries()) {
+		if (!loadingModule?.default) continue;
+		const treePosition = route.loadingTreePositions?.[index];
+		if (treePosition !== void 0) positions.push(treePosition);
+	}
+	if (positions.length === 0 && route.loading?.default) positions.push(route.routeSegments.length);
+	return positions;
+}
+function getAppPageLayoutProbeCount(route, loadingTreePositions) {
+	const firstLoadingTreePosition = loadingTreePositions.reduce((first, position) => first === null || position < first ? position : first, null);
+	if (firstLoadingTreePosition === null) return route.layouts.length;
+	const firstSuspendedLayoutIndex = (route.layoutTreePositions ?? []).findIndex((position) => position > firstLoadingTreePosition);
+	return firstSuspendedLayoutIndex === -1 ? route.layouts.length : firstSuspendedLayoutIndex;
+}
 function resolveAppPageRouteBoundaryModule(route, statusCode) {
 	if (statusCode === 403) return route.forbidden ?? null;
 	if (statusCode === 401) return route.unauthorized ?? null;
@@ -110,7 +126,7 @@ function hasSearchParams(searchParams) {
 }
 async function runAppPageRevalidationContext(options, renderFn) {
 	const { createStaticGenerationHeadersContext } = await import("./app-static-generation.js");
-	return runWithRequestContext(createRequestContext({
+	const requestContext = createRequestContext({
 		headersContext: createStaticGenerationHeadersContext({
 			draftModeEnabled: false,
 			draftModeSecret: options.draftModeSecret,
@@ -122,7 +138,8 @@ async function runAppPageRevalidationContext(options, renderFn) {
 		currentForceDynamicFetchDefault: options.dynamicConfig === "force-dynamic",
 		executionContext: getRequestExecutionContext(),
 		unstableCacheRevalidation: "foreground"
-	}), async () => {
+	});
+	const revalidation = runWithRequestContext(requestContext, async () => {
 		ensureFetchPatch();
 		setRefreshStaleFetchesInForeground(process.env.VINEXT_PRERENDER === "1");
 		setCurrentFetchSoftTags(buildAppPageTags(options.cleanPathname, [], options.routeSegments));
@@ -133,6 +150,11 @@ async function runAppPageRevalidationContext(options, renderFn) {
 		});
 		return await runWithFetchDedupe(renderFn);
 	});
+	try {
+		return await revalidation;
+	} finally {
+		await closeAfterResponse(requestContext);
+	}
 }
 function toInterceptOptions(interceptionContext, intercept) {
 	return {
@@ -140,6 +162,8 @@ function toInterceptOptions(interceptionContext, intercept) {
 		interceptLayouts: intercept.interceptLayouts,
 		interceptLayoutSegments: intercept.interceptLayoutSegments,
 		interceptBranchSegments: intercept.interceptBranchSegments,
+		interceptLoadings: intercept.interceptLoadings,
+		interceptLoadingTreePositions: intercept.interceptLoadingTreePositions,
 		interceptNotFoundBranchSegments: intercept.interceptNotFoundBranchSegments,
 		interceptNotFound: intercept.notFound,
 		interceptNotFoundTreePosition: intercept.notFoundTreePosition,
@@ -173,7 +197,8 @@ async function dispatchAppPageInner(options) {
 	const hasRequestSearchParams = !shouldUseEmptySearchParams && hasSearchParams(options.searchParams);
 	const pageSearchParams = shouldUseEmptySearchParams ? new URLSearchParams() : options.searchParams;
 	const layoutParamAccess = createAppLayoutParamAccessTracker();
-	const hasActiveLoadingBoundary = Boolean(route.loading?.default);
+	const activeLoadingTreePositions = getActiveLoadingTreePositions(route);
+	const hasActiveLoadingBoundary = activeLoadingTreePositions.length > 0;
 	setCurrentFetchSoftTags(buildAppPageTags(options.cleanPathname, [], route.routeSegments));
 	setCurrentFetchCacheMode(options.fetchCache ?? null);
 	setCurrentForceDynamicFetchDefault(isForceDynamic);
@@ -323,13 +348,17 @@ async function dispatchAppPageInner(options) {
 	}
 	if (options.skipStaticParamsValidation !== true && !(options.isProduction && isForceDynamic)) {
 		const dynamicParamsResponse = await validateAppPageDynamicParams({
-			clearRequestContext: options.clearRequestContext,
 			enforceStaticParamsOnly: options.dynamicParamsConfig === false,
 			generateStaticParams: options.generateStaticParams,
 			isDynamicRoute: route.isDynamic,
 			params: options.staticParamsValidationParams ?? options.params
 		});
-		if (dynamicParamsResponse) return dynamicParamsResponse;
+		if (dynamicParamsResponse) {
+			const renderedNotFound = await options.renderHttpAccessFallbackPage(404, { matchedParams: options.params }, options.middlewareContext);
+			if (renderedNotFound) return renderedNotFound;
+			options.clearRequestContext();
+			return dynamicParamsResponse;
+		}
 	}
 	const fallbackShellResponse = options.pprRuntime ? await options.pprRuntime.tryServe(options, currentRevalidateSeconds, isDraftMode, isForceStatic, isForceDynamic) : null;
 	if (fallbackShellResponse) return fallbackShellResponse;
@@ -410,7 +439,7 @@ async function dispatchAppPageInner(options) {
 			});
 		},
 		async probePageSpecialError() {
-			if (route.loading?.default) return null;
+			if (hasActiveLoadingBoundary) return null;
 			return resolveAppPageSpecialError(await probeAppPageThrownError({
 				probePage: () => options.probePage(pageSearchParams),
 				runWithSuppressedHookWarning(probe) {
@@ -500,7 +529,7 @@ async function dispatchAppPageInner(options) {
 		isrSet: options.isrSet,
 		interceptionContext: options.interceptionContext,
 		expireSeconds: options.expireSeconds,
-		layoutCount: route.layouts.length,
+		layoutCount: getAppPageLayoutProbeCount(route, activeLoadingTreePositions),
 		loadSsrHandler: options.loadSsrHandler,
 		middlewareContext: options.middlewareContext,
 		navigationParams,

package/dist/server/app-page-element-builder.d.ts

@@ -1,9 +1,9 @@
 import { MetadataFileRoute } from "./metadata-routes.js";
 import { AppElements } from "./app-elements-wire.js";
+import { AppRscRenderMode } from "./app-rsc-render-mode.js";
 import { AppPageParams } from "./app-page-boundary.js";
 import { ApplyAppPageFileBasedMetadata } from "./app-page-head.js";
 import { AppLayoutParamAccessTracker } from "./app-layout-param-observation.js";
-import { AppRscRenderMode } from "./app-rsc-render-mode.js";
 import { AppPageErrorModule, AppPageModule, AppPageRouteWiringRoute } from "./app-page-route-wiring.js";
 
 //#region src/server/app-page-element-builder.d.ts
@@ -22,6 +22,8 @@ type AppPageInterceptOptions<TModule extends AppPageModule = AppPageModule> = {
   interceptLayouts?: readonly (TModule | null | undefined)[] | null;
   interceptLayoutSegments?: readonly (readonly string[])[] | null;
   interceptBranchSegments?: readonly string[] | null;
+  interceptLoadings?: readonly (TModule | null | undefined)[] | null;
+  interceptLoadingTreePositions?: readonly number[] | null;
   interceptNotFoundBranchSegments?: readonly string[] | null;
   interceptNotFound?: TModule | null;
   interceptNotFoundTreePosition?: number | null;
@@ -64,6 +66,7 @@ type BuildPageElementsOptions<TModule extends AppPageModule = AppPageModule, TEr
   basePath?: string; /** Configured next.config `trailingSlash`, threaded into canonical URL rendering. */
   trailingSlash?: boolean; /** Serialized next.config `htmlLimitedBots` regexp source. */
   htmlLimitedBots?: string;
+  scriptNonce?: string;
 };
 type AppPageNavigationParamModule = {
   default?: unknown;

package/dist/server/app-page-element-builder.js

@@ -15,7 +15,7 @@ import { resolveAppPageParentHttpAccessBoundary } from "./app-page-boundary.js";
 import { sanitizeErrorForClient } from "./app-rsc-errors.js";
 import { DEFAULT_GLOBAL_ERROR_MODULE } from "./default-global-error-module.js";
 import { shouldServeStreamingMetadata } from "./streaming-metadata.js";
-import { createElement } from "react";
+import { Suspense, createElement } from "react";
 //#region src/server/app-page-element-builder.ts
 function resolveInterceptLayoutParams(branchSegments, layoutSegments, params) {
 	return resolveAppPageBranchParams(branchSegments, layoutSegments.length, params, layoutSegments);
@@ -111,7 +111,7 @@ async function buildPageElements(options) {
 		} : {},
 		ownerTreePosition: route.routeSegments?.length ?? 0
 	} : null;
-	const parallelRoutes = [...activeParallelRouteHeadInputs.map((input) => input.head), ...primaryParallelRouteHeadInput ? [primaryParallelRouteHeadInput.head] : []];
+	const parallelRoutes = [...primaryParallelRouteHeadInput ? [primaryParallelRouteHeadInput.head] : [], ...activeParallelRouteHeadInputs.map((input) => input.head)];
 	const metadataSearchParamsObserver = observeMetadataSearchParamsAccess ? createAppPageSearchParamsObserver() : void 0;
 	const preparedHead = prepareAppPageHead({
 		applyFileBasedMetadata: options.applyFileBasedMetadata,
@@ -210,11 +210,35 @@ async function buildPageElements(options) {
 	const mountedSlotIds = mountedSlotsHeader ? new Set(mountedSlotsHeader.split(" ")) : null;
 	const slotOverrides = buildSlotOverrides(route, params, routePath, opts);
 	let siblingInterceptElement = isSiblingIntercept && EffectivePageComponent ? createPageElement(EffectivePageComponent, pageProps) : null;
-	if (isSiblingIntercept && siblingInterceptElement !== null && opts?.interceptLayouts?.length) for (let i = opts.interceptLayouts.length - 1; i >= 0; i--) {
-		const LayoutComponent = opts.interceptLayouts[i]?.default;
-		if (LayoutComponent) {
-			const interceptLayoutSegments = opts.interceptLayoutSegments?.[i] ?? [];
-			siblingInterceptElement = createElement(LayoutComponent, { params: makeThenableParams(resolveInterceptLayoutParams(opts.interceptBranchSegments ?? interceptLayoutSegments, interceptLayoutSegments, effectiveParams)) }, siblingInterceptElement);
+	if (isSiblingIntercept && siblingInterceptElement !== null) {
+		const layoutIndexesByTreePosition = /* @__PURE__ */ new Map();
+		for (const [index, layoutModule] of (opts?.interceptLayouts ?? []).entries()) {
+			if (!layoutModule?.default) continue;
+			const treePosition = opts?.interceptLayoutSegments?.[index]?.length ?? 0;
+			const indexes = layoutIndexesByTreePosition.get(treePosition) ?? [];
+			indexes.push(index);
+			layoutIndexesByTreePosition.set(treePosition, indexes);
+		}
+		const loadingIndexesByTreePosition = /* @__PURE__ */ new Map();
+		for (const [index, loadingModule] of (opts?.interceptLoadings ?? []).entries()) {
+			if (!loadingModule?.default) continue;
+			const treePosition = opts?.interceptLoadingTreePositions?.[index];
+			if (treePosition !== void 0) loadingIndexesByTreePosition.set(treePosition, index);
+		}
+		const treePositions = Array.from(/* @__PURE__ */ new Set([...layoutIndexesByTreePosition.keys(), ...loadingIndexesByTreePosition.keys()])).sort((left, right) => left - right);
+		for (let index = treePositions.length - 1; index >= 0; index--) {
+			const treePosition = treePositions[index];
+			const loadingIndex = loadingIndexesByTreePosition.get(treePosition);
+			const LoadingComponent = loadingIndex === void 0 ? null : opts?.interceptLoadings?.[loadingIndex]?.default;
+			if (LoadingComponent) siblingInterceptElement = createElement(Suspense, { fallback: createElement(LoadingComponent) }, siblingInterceptElement);
+			const layoutIndexes = layoutIndexesByTreePosition.get(treePosition) ?? [];
+			for (let layoutOffset = layoutIndexes.length - 1; layoutOffset >= 0; layoutOffset--) {
+				const layoutIndex = layoutIndexes[layoutOffset];
+				const LayoutComponent = opts?.interceptLayouts?.[layoutIndex]?.default;
+				if (!LayoutComponent) continue;
+				const interceptLayoutSegments = opts?.interceptLayoutSegments?.[layoutIndex] ?? [];
+				siblingInterceptElement = createElement(LayoutComponent, { params: makeThenableParams(resolveInterceptLayoutParams(opts?.interceptBranchSegments ?? interceptLayoutSegments, interceptLayoutSegments, effectiveParams)) }, siblingInterceptElement);
+			}
 		}
 	}
 	return buildAppPageElements({
@@ -230,6 +254,7 @@ async function buildPageElements(options) {
 		resolvedMetadata,
 		resolvedMetadataPathname: routePath,
 		resolvedViewport,
+		scriptNonce: options.scriptNonce,
 		streamingMetadata,
 		streamingMetadataOutlet,
 		streamingMetadataOutletSuspended: streamGeneratedHead,
@@ -267,6 +292,8 @@ function buildSlotOverrides(route, routeParams, routePath, opts) {
 		branchSegments: opts.interceptBranchSegments ?? null,
 		layoutModules: opts.interceptLayouts || null,
 		layoutSegments: opts.interceptLayoutSegments ?? null,
+		loadingModules: opts.interceptLoadings || null,
+		loadingTreePositions: opts.interceptLoadingTreePositions ?? null,
 		pageModule: opts.interceptPage,
 		params: opts.interceptParams || routeParams,
 		routeSegments: resolveInterceptedSlotSegments(opts.interceptSourcePageSegments, opts.interceptSlotKey)

package/dist/server/app-page-head.d.ts

@@ -1,7 +1,7 @@
 import { MetadataFileRoute } from "./metadata-routes.js";
 import { AppPageParams } from "./app-page-boundary.js";
 import { ThenableParamsObserver } from "../shims/thenable-params.js";
-import { Metadata, Viewport } from "../shims/metadata.js";
+import { Metadata, ResolvedViewport } from "../shims/metadata.js";
 import { applyFileBasedMetadata } from "./file-based-metadata.js";
 
 //#region src/server/app-page-head.d.ts
@@ -96,11 +96,11 @@ type ResolveAppPageHeadResult = {
   hasSearchParams: boolean;
   metadata: Metadata | null;
   pageSearchParams: AppPageSearchParams;
-  viewport: Viewport;
+  viewport: ResolvedViewport;
 };
 type PreparedAppPageHead = Omit<ResolveAppPageHeadResult, "metadata" | "viewport"> & {
   metadata: Promise<Metadata | null>;
-  viewport: Promise<Viewport>;
+  viewport: Promise<ResolvedViewport>;
 };
 type AppPageSearchParamsCollection = {
   hasSearchParams: boolean;

package/dist/server/app-page-head.js

@@ -79,7 +79,7 @@ function resolveActiveParallelRouteHeadInputs(options) {
 			} : {},
 			ownerTreePosition
 		};
-	});
+	}).sort((left, right) => right.ownerTreePosition - left.ownerTreePosition);
 }
 function isPresent(value) {
 	return value !== null && value !== void 0;
@@ -165,11 +165,25 @@ async function resolveLayoutMetadata(layoutInputs, params, routeSegments) {
 	}
 	return Promise.all(layoutMetadataPromises);
 }
-async function resolveLayoutViewport(layoutInputs, params, routeSegments) {
-	return Promise.all(layoutInputs.map((layoutInput) => {
+function resolveLayoutViewport(layoutInputs, params, routeSegments) {
+	const viewportPromises = [];
+	let accumulatedViewport = Promise.resolve(mergeViewport([]));
+	for (const layoutInput of layoutInputs) {
+		const parentForLayout = accumulatedViewport;
 		const layoutParams = resolveAppPageSegmentParams(routeSegments, layoutInput.treePosition, params);
-		return resolveModuleViewport(layoutInput.module, layoutParams);
-	}));
+		const viewportPromise = resolveModuleViewport(layoutInput.module, layoutParams, void 0, parentForLayout);
+		viewportPromises.push(viewportPromise);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = mergeResolvedViewport(parentForLayout, viewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	return {
+		resolvedViewport: accumulatedViewport,
+		viewportResults: Promise.all(viewportPromises)
+	};
+}
+function mergeResolvedViewport(parent, viewport) {
+	return Promise.all([parent, viewport]).then(([resolvedParent, resolvedViewport]) => resolvedViewport ? mergeViewport([resolvedParent, resolvedViewport]) : resolvedParent);
 }
 function getParallelRouteModules(parallelRoute) {
 	return [...parallelRoute.layoutModules ?? [], parallelRoute.layoutModule].filter(isPresent);
@@ -211,16 +225,34 @@ async function resolveParallelRouteMetadata(parallelRoute, fallbackParams, fallb
 		metadataSources
 	};
 }
-async function resolveParallelRouteViewport(parallelRoute, fallbackParams, fallbackRouteSegments, pageSearchParams, searchParamsObserver) {
+function resolveParallelRouteViewport(parallelRoute, fallbackParams, fallbackRouteSegments, pageSearchParams, parent, searchParamsObserver) {
 	const params = parallelRoute.params ?? fallbackParams;
 	const routeSegments = parallelRoute.routeSegments ?? fallbackRouteSegments;
 	const layoutModules = getParallelRouteModules(parallelRoute);
 	const layoutTreePositions = parallelRoute.layoutTreePositions ?? [];
 	const layoutParams = parallelRoute.layoutParams ?? [];
-	const layoutViewportPromise = Promise.all(layoutModules.map((layoutModule, index) => resolveModuleViewport(layoutModule, layoutParams[index] ?? resolveParallelLayoutParams(routeSegments, layoutTreePositions[index] ?? 0, params))));
-	const pageViewportPromise = parallelRoute.pageModule ? resolveModuleViewport(parallelRoute.pageModule, params, pageSearchParams, searchParamsObserver) : Promise.resolve(null);
-	const [layoutViewports, pageViewport] = await Promise.all([layoutViewportPromise, pageViewportPromise]);
-	return parallelRoute.pageModule ? [...layoutViewports, pageViewport] : layoutViewports;
+	const viewportPromises = [];
+	let accumulatedViewport = parent;
+	for (const [index, layoutModule] of layoutModules.entries()) {
+		const parentForLayout = accumulatedViewport;
+		const viewportPromise = resolveModuleViewport(layoutModule, layoutParams[index] ?? resolveParallelLayoutParams(routeSegments, layoutTreePositions[index] ?? 0, params), void 0, parentForLayout);
+		viewportPromises.push(viewportPromise);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = mergeResolvedViewport(parentForLayout, viewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	if (parallelRoute.pageModule) {
+		const parentForPage = accumulatedViewport;
+		const viewportPromise = resolveModuleViewport(parallelRoute.pageModule, params, pageSearchParams, parentForPage, searchParamsObserver);
+		viewportPromises.push(viewportPromise);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = mergeResolvedViewport(parentForPage, viewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	return {
+		resolvedViewport: accumulatedViewport,
+		viewportResults: Promise.all(viewportPromises)
+	};
 }
 /**
 * Resolve an explicit metadata-source sequence.
@@ -279,16 +311,29 @@ function prepareAppPageHeadInner(options) {
 	const primaryHasDynamicMetadata = layoutInputs.some((input) => hasGenerateMetadata(input.module)) || hasGenerateMetadata(options.pageModule);
 	const { hasSearchParams, pageSearchParams } = collectAppPageSearchParams(options.searchParams);
 	const layoutMetadataPromise = resolveLayoutMetadata(layoutInputs, options.params, routeSegments);
-	const layoutViewportPromise = resolveLayoutViewport(layoutInputs, options.params, routeSegments);
+	const layoutViewport = resolveLayoutViewport(layoutInputs, options.params, routeSegments);
+	const layoutViewportPromise = layoutViewport.viewportResults;
 	const layoutMetadataResultsForParent = layoutMetadataPromise.then((metadataResults) => metadataResults.filter(isPresent));
 	layoutMetadataResultsForParent.catch(() => null);
 	const pageParentPromise = layoutMetadataResultsForParent.then((metadataResults) => metadataResults.length > 0 ? mergeMetadataEntries(metadataResults.map((metadata) => ({ metadata }))) : {});
 	pageParentPromise.catch(() => null);
 	const pageMetadataPromise = options.pageModule ? resolveModuleMetadata(options.pageModule, options.params, pageSearchParams, pageParentPromise, options.searchParamsObserver) : Promise.resolve(null);
-	const pageViewportPromise = options.pageModule ? resolveModuleViewport(options.pageModule, options.params, pageSearchParams, options.searchParamsObserver) : Promise.resolve(null);
 	const parallelRoutes = options.parallelRoutes ?? [];
 	const parallelRouteMetadataPromise = Promise.all(parallelRoutes.map((parallelRoute) => resolveParallelRouteMetadata(parallelRoute, options.params, routeSegments, pageSearchParams, pageParentPromise, options.searchParamsObserver)));
-	const parallelRouteViewportPromise = Promise.all(parallelRoutes.map((parallelRoute) => resolveParallelRouteViewport(parallelRoute, options.params, routeSegments, pageSearchParams, options.searchParamsObserver)));
+	const parallelRouteViewportPromises = [];
+	let accumulatedViewport = layoutViewport.resolvedViewport;
+	const pageParentViewport = accumulatedViewport;
+	const pageViewportPromise = options.pageModule ? resolveModuleViewport(options.pageModule, options.params, pageSearchParams, pageParentViewport, options.searchParamsObserver) : Promise.resolve(null);
+	if (options.pageModule) {
+		accumulatedViewport = mergeResolvedViewport(pageParentViewport, pageViewportPromise);
+		accumulatedViewport.catch(() => null);
+	}
+	for (const parallelRoute of parallelRoutes) {
+		const parallelViewport = resolveParallelRouteViewport(parallelRoute, options.params, routeSegments, pageSearchParams, accumulatedViewport, options.searchParamsObserver);
+		parallelRouteViewportPromises.push(parallelViewport.viewportResults);
+		accumulatedViewport = parallelViewport.resolvedViewport;
+	}
+	const parallelRouteViewportPromise = Promise.all(parallelRouteViewportPromises);
 	const hasDynamicMetadata = primaryHasDynamicMetadata || parallelRoutes.some(parallelRouteHasDynamicMetadata);
 	const metadata = Promise.all([
 		layoutMetadataPromise,

package/dist/server/app-page-http-access-fallback-metadata.d.ts

@@ -1,6 +1,6 @@
 import { MetadataFileRoute } from "./metadata-routes.js";
 import { AppPageParams } from "./app-page-boundary.js";
-import { Metadata, Viewport } from "../shims/metadata.js";
+import { Metadata, ResolvedViewport } from "../shims/metadata.js";
 import { ActiveParallelRouteHeadInput, AppPageHeadModule, ApplyAppPageFileBasedMetadata, OrderedAppPageMetadataSource } from "./app-page-head.js";
 
 //#region src/server/app-page-http-access-fallback-metadata.d.ts
@@ -24,6 +24,6 @@ type ResolveHttpAccessFallbackMetadataOptions<TModule extends AppPageHeadModule
 };
 declare function createHttpAccessFallbackMetadataPlan<TModule extends AppPageHeadModule>(options: HttpAccessFallbackMetadataPlanOptions<TModule>): OrderedAppPageMetadataSource<TModule>[];
 declare function resolveHttpAccessFallbackMetadata<TModule extends AppPageHeadModule>(options: ResolveHttpAccessFallbackMetadataOptions<TModule>): Promise<Metadata | null>;
-declare function resolveHttpAccessFallbackViewport<TModule extends AppPageHeadModule>(options: HttpAccessFallbackMetadataPlanOptions<TModule>): Promise<Viewport>;
+declare function resolveHttpAccessFallbackViewport<TModule extends AppPageHeadModule>(options: HttpAccessFallbackMetadataPlanOptions<TModule>): Promise<ResolvedViewport>;
 //#endregion
 export { createHttpAccessFallbackMetadataPlan, resolveHttpAccessFallbackMetadata, resolveHttpAccessFallbackViewport };

package/dist/server/app-page-http-access-fallback-metadata.js

@@ -100,7 +100,15 @@ function resolveHttpAccessFallbackMetadata(options) {
 	});
 }
 async function resolveHttpAccessFallbackViewport(options) {
-	return mergeViewport((await Promise.all(createHttpAccessFallbackPlan(options, "snapshot").map((source) => resolveModuleViewport(source.module, source.params)))).filter(isPresent));
+	let accumulatedViewport = Promise.resolve(mergeViewport([]));
+	for (const source of createHttpAccessFallbackPlan(options, "snapshot")) {
+		const parentForSource = accumulatedViewport;
+		const viewportPromise = resolveModuleViewport(source.module, source.params, void 0, parentForSource);
+		viewportPromise.catch(() => null);
+		accumulatedViewport = Promise.all([parentForSource, viewportPromise]).then(([parent, viewport]) => viewport ? mergeViewport([parent, viewport]) : parent);
+		accumulatedViewport.catch(() => null);
+	}
+	return accumulatedViewport;
 }
 //#endregion
 export { createHttpAccessFallbackMetadataPlan, resolveHttpAccessFallbackMetadata, resolveHttpAccessFallbackViewport };

package/dist/server/app-page-probe.d.ts

@@ -40,12 +40,16 @@ type AppPageProbeModule = Readonly<{
 }> | null | undefined;
 type AppPageProbeSlot = Readonly<{
   page?: AppPageProbeModule;
+  loading?: AppPageProbeModule;
+  loadings?: readonly AppPageProbeModule[] | null;
+  loadingTreePositions?: readonly number[] | null;
 }> | null | undefined;
 type AppPageProbeRoute = Readonly<{
   slots?: Readonly<Record<string, AppPageProbeSlot>> | null;
 }>;
 type AppPageProbeIntercept = Readonly<{
   page?: AppPageProbeModule;
+  interceptLoadings?: readonly AppPageProbeModule[] | null;
   matchedParams?: unknown;
   /**
    * Key of the parallel-route slot this interception overrides. At render

package/dist/server/app-page-probe.js

@@ -1,6 +1,6 @@
-import { markAppPagePropsForUseCache } from "../shims/internal/app-page-props-cache-key.js";
 import { isNextRouterError } from "../shims/navigation-errors.js";
 import "../shims/navigation-server.js";
+import { markAppPagePropsForUseCache } from "../shims/internal/app-page-props-cache-key.js";
 import { isPromiseLike } from "../utils/promise.js";
 import { probeAppPageComponent, probeAppPageLayouts } from "./app-page-execution.js";
 import { collectAppPageSearchParams } from "./app-page-head.js";
@@ -218,13 +218,17 @@ function buildAppPageProbes(options) {
 	const overriddenSlotKey = intercept?.slotKey ?? null;
 	for (const [slotKey, slot] of Object.entries(route.slots ?? {})) {
 		if (overriddenSlotKey !== null && slotKey === overriddenSlotKey) continue;
+		if (slot?.loading?.default || slot?.loadings?.some((loading) => loading?.default)) continue;
 		probes.push(probeAppPage({
 			pageComponent: slot?.page?.default,
 			asyncRouteParams,
 			searchParams
 		}));
 	}
-	if (intercept) probes.push(probeAppPage({
+	const interceptedSlot = intercept?.slotKey ? route.slots?.[intercept.slotKey] : null;
+	const interceptedSlotHasRootLoading = Boolean(interceptedSlot?.loading?.default || interceptedSlot?.loadings?.some((loading, index) => loading?.default && interceptedSlot.loadingTreePositions?.[index] === 0));
+	const interceptHasLoadingBoundary = Boolean(intercept?.interceptLoadings?.some((loading) => loading?.default) || interceptedSlotHasRootLoading);
+	if (intercept && !interceptHasLoadingBoundary) probes.push(probeAppPage({
 		pageComponent: intercept.page?.default,
 		asyncRouteParams: options.makeThenableParams(intercept.matchedParams ?? matchedParams),
 		searchParams

package/dist/server/app-page-render.d.ts

@@ -1,10 +1,10 @@
 import { ClientReuseManifestParseResult, ClientReuseManifestSkipDisposition } from "./client-reuse-manifest.js";
 import { AppOutgoingElements } from "./app-elements-wire.js";
+import { AppRscRenderMode } from "./app-rsc-render-mode.js";
 import { NavigationContext } from "../shims/navigation-context-state.js";
 import { AppPageFontPreload, AppPageSpecialError, LayoutClassificationOptions } from "./app-page-execution.js";
 import { AppPageMiddlewareContext } from "./app-page-response.js";
 import { AppLayoutParamAccessTracker } from "./app-layout-param-observation.js";
-import { AppRscRenderMode } from "./app-rsc-render-mode.js";
 import { RootParams } from "../shims/root-params.js";
 import { AppPageSsrHandler } from "./app-page-stream.js";
 import { CachedAppPageValue } from "../shims/cache-handler.js";