@thomas.f/prnext 0.1.18-alpha → 0.1.20-alpha

package/runtime/app-client.mjs

@@ -26,6 +26,7 @@ const PREFETCH_LIMIT = 8;
 const PREFETCH_LIFETIME = 30_000;
 let application;
 let strictMode = true;
+const navigationStreams = new WeakMap();
 
 function loadClientModule(source) {
   if (typeof source === 'function') return source();
@@ -39,7 +40,9 @@ function loadClientModule(source) {
 // supplies ESM import functions so React and application contexts stay shared.
 export function installFlightModuleLoader(clientModules) {
   const loaded = new Map();
+  const loadedVersions = new Map();
   const pending = new Map();
+  let version = 0;
   const previousRequire = globalThis.__webpack_require__;
   const previousLoad = globalThis.__webpack_chunk_load__;
   globalThis.__webpack_require__ = id => {
@@ -52,32 +55,42 @@ export function installFlightModuleLoader(clientModules) {
     return typeof source === 'string' ? source : source?.browserModule || String(id);
   };
   globalThis.__webpack_get_script_filename__ = id => globalThis.__webpack_require__.u(id);
-  globalThis.__webpack_chunk_load__ = id => {
-    if (loaded.has(id)) return Promise.resolve();
+  function loadChunk(id) {
     if (pending.has(id)) return pending.get(id);
+    if (loaded.has(id) && loadedVersions.get(id) === version) return Promise.resolve();
     if (!Object.hasOwn(clientModules, id)) {
       if (previousLoad) return previousLoad(id);
       return Promise.reject(new Error(`Unknown PRNext client module ${id}`));
     }
     const source = clientModules[id];
+    const requestedVersion = version;
+    const current = () => {
+      if (!Object.hasOwn(clientModules, id)) throw new Error(`Unknown PRNext client module ${id}`);
+      return loadChunk(id);
+    };
     const promise = Promise.resolve().then(() => loadClientModule(source))
-      .then(module => { loaded.set(id, module); pending.delete(id); }, error => {
-        pending.delete(id);
+      .then(module => {
+        if (requestedVersion !== version) return current();
+        loaded.set(id, module); loadedVersions.set(id, version);
+      }, error => {
+        if (requestedVersion !== version) return current();
+        loaded.delete(id); loadedVersions.delete(id);
         throw error;
+      }).finally(() => {
+        if (pending.get(id) === promise) pending.delete(id);
       });
     pending.set(id, promise);
     return promise;
-  };
+  }
+  globalThis.__webpack_chunk_load__ = loadChunk;
   return {
     async updateModules(nextModules) {
-      const ids = [...loaded.keys()].filter(id => Object.hasOwn(nextModules, id));
+      const ids = [...new Set([...loaded.keys(), ...pending.keys()])].filter(id => Object.hasOwn(nextModules, id));
+      version++;
       clientModules = nextModules;
-      await Promise.all(ids.map(async id => {
-        const source = clientModules[id];
-        const module = await loadClientModule(source);
-        loaded.set(id, module);
-      }));
-      for (const id of loaded.keys()) if (!Object.hasOwn(nextModules, id)) loaded.delete(id);
+      pending.clear();
+      for (const id of loaded.keys()) if (!Object.hasOwn(nextModules, id)) { loaded.delete(id); loadedVersions.delete(id); }
+      await Promise.all(ids.map(loadChunk));
     },
   };
 }
@@ -132,10 +145,11 @@ function NormalStyles({ css, fonts }) {
 
 function AppRoot({ model, controller, committed, url, globalErrorComponent, globalErrorCss, retentionEpoch, retentionAuthorizationEpoch }) {
   const [hydrated, setHydrated] = React.useState(false);
+  const flight = navigationStreams.get(model);
   const cache = React.useRef(null);
   if (!cache.current) cache.current = createActivityCache({ limit: controller._navigationCache?.maxEntries, ttl: controller._navigationCache?.ttlMs });
   const activityCache = React.useMemo(() => ({ cache: cache.current, epoch: retentionEpoch, authorizationEpoch: retentionAuthorizationEpoch,
-    authorizationKey: model.authorizationKey, strictAuthorization: controller._navigationCache?.authCookies !== undefined }), [retentionEpoch, retentionAuthorizationEpoch, model.authorizationKey]);
+    authorizationKey: model.authorizationKey, strictAuthorization: controller._navigationCache?.authCookies !== undefined, flight }), [retentionEpoch, retentionAuthorizationEpoch, model.authorizationKey, flight]);
   const previewDynamic = React.useCallback(() => { throw model.partialPreview.suspended; }, [model.partialPreview]);
   useLayoutEffect(() => {
     if (process.env.NODE_ENV === 'development' && model.instantDiagnostics?.length) globalThis.__PRNEXT_DEV__?.reportError(Object.assign(new Error(model.instantDiagnostics.join('\n')), { digest: 'PRNEXT_INSTANT_BLOCKING' }));
@@ -238,12 +252,18 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
   if (initialRewrite) initialModel.rewrite = initialRewrite;
   let currentUrl = new URL(window.location.href);
   let currentRouting = initialModel.routing;
+  // A pending destination may already own the history entry while React still
+  // shows the previous view. Rolling back its render must not rewrite that
+  // entry with the previous view's routing state on the next scroll event.
+  let historyRouting = currentRouting;
   let currentModel = initialModel;
+  let committedView = { model: initialModel, routing: currentRouting, url: currentUrl.href, retentionEpoch: 0, authorizationEpoch: 0 };
+  let pendingView, pendingNavigation;
   const historyFocus = new Map();
   let currentKey = window.history.state?.__prnext?.key || 0;
   let nextKey = currentKey + 1;
   let navigation = 0;
-  let activeRequest, finishNavigation, pageHidden = false, notifyingPrefetch = false;
+  let activeRequest, finishNavigation, finishCommit, documentTimer, pageHidden = false, notifyingPrefetch = false, documentFallback = false;
   const prefetches = new Map(), scheduler = createPrefetchScheduler();
   const partialSegments = (typeof __PRNEXT_CACHE_COMPONENTS__ === 'undefined' ? cacheComponents : __PRNEXT_CACHE_COMPONENTS__) ? new Map() : null;
   let segmentBytes = 0;
@@ -254,12 +274,102 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
   function saveScroll() {
     // popstate has already changed location; never overwrite its destination.
     if (window.location.href === currentUrl.href) {
-      window.history.replaceState(historyState(currentKey, [window.scrollX, window.scrollY], currentRouting), '', currentUrl.href);
+      window.history.replaceState(historyState(currentKey, [window.scrollX, window.scrollY], historyRouting), '', currentUrl.href);
       if (typeof WeakRef !== 'undefined' && document.activeElement && document.activeElement !== document.body) historyFocus.set(currentKey, new WeakRef(document.activeElement));
       while (historyFocus.size > 16) historyFocus.delete(historyFocus.keys().next().value);
     }
   }
 
+  function renderView(model, url, { token = navigation, canonical = true, kind = 'navigation', committed } = {}) {
+    const flight = navigationStreams.get(model), view = { model, token, kind, committed: false };
+    pendingView = view;
+    const promote = () => {
+      if (token !== navigation || pendingView !== view || !view.committed || flight?.complete === false) return;
+      pendingView = undefined;
+      if (flight) flight.committed = undefined;
+      // A committed loading shell can still contain rows owned by a live
+      // fetch. Keep the last fully received view available before aborting it.
+      // Authorized PPR previews likewise never become the canonical model.
+      if (canonical) committedView = { model, routing: model.routing, url, retentionEpoch: controller._retentionEpoch, authorizationEpoch: controller._authorizationEpoch };
+    };
+    if (flight) flight.committed = promote;
+    startTransition(() => root.render(appView({ model, controller, url, globalErrorComponent, globalErrorCss,
+      committed: () => {
+        if (token !== navigation || pendingView !== view) return;
+        view.committed = true;
+        promote();
+        committed?.();
+      },
+    })));
+  }
+
+  function abandonPendingView() {
+    if (!pendingView) return true;
+    const flight = navigationStreams.get(pendingView.model);
+    const strictAuthorization = controller._navigationCache?.authCookies !== undefined;
+    if (flight) flight.committed = undefined;
+    if (pendingView.kind === 'action' && committedView.authorizationEpoch === controller._authorizationEpoch &&
+        (!strictAuthorization || committedView.model.authorizationKey === currentModel.authorizationKey)) {
+      // An action's received result can invoke a returned action before React
+      // commits its UI. This response is never owned/aborted by activeRequest;
+      // adopt its model instead of rolling back the prior mutation's epoch.
+      pendingView = undefined;
+      committedView = { model: currentModel, routing: currentRouting, url: currentUrl.href, retentionEpoch: controller._retentionEpoch, authorizationEpoch: controller._authorizationEpoch };
+      return true;
+    }
+    // A new authorized shell or explicit invalidation can make the last full
+    // model private to an obsolete session. Reauthorize through a document
+    // request instead of briefly restoring that model while C is pending.
+    if ((strictAuthorization && committedView.model.authorizationKey !== currentModel.authorizationKey) ||
+        committedView.retentionEpoch !== controller._retentionEpoch ||
+        committedView.authorizationEpoch !== controller._authorizationEpoch) return false;
+    pendingView = undefined;
+    currentModel = committedView.model;
+    currentRouting = committedView.routing;
+    // React can already be reading a lazy row after createFromFetch resolves
+    // the root model. Replace that suspended render before abort rejects its
+    // remaining rows; it must not poison the retained layout or page cache.
+    root.render(appView({ model: committedView.model, controller, url: committedView.url, globalErrorComponent, globalErrorCss }));
+    return true;
+  }
+
+  function fallbackDocument(url, replace = true, defer = false) {
+    // The invalidated document stays blocked until its replacement arrives.
+    // Repeated synchronous actions must neither dispatch nor start reloads.
+    if (documentFallback) return;
+    documentFallback = true;
+    navigation++;
+    activeRequest?.abort();
+    appStyleManager(document).cancel();
+    finishNavigation?.(); finishNavigation = undefined;
+    invalidatePrefetches();
+    flightTransport.clear();
+    if (controller._navigationCache?.authCookies !== undefined) document.documentElement.style.visibility = 'hidden';
+    const request = () => {
+      documentTimer = undefined;
+      if (pageHidden) return;
+      if (replace) window.location.replace(url);
+      else window.location.assign(url);
+    };
+    // An executed action must settle its promise chain before document
+    // replacement suspends the old realm. Its POST guard is already latched.
+    if (defer) documentTimer = setTimeout(request, 0);
+    else request();
+  }
+
+  function requiresAuthorizedDocument(model) {
+    if (controller._navigationCache?.authCookies === undefined) return false;
+    const identity = model?.authorizationKey;
+    // Activity entries are only part of the retained tree: shared client
+    // layouts and server layout-cache props can also belong to the old user.
+    // An unidentified static model cannot prove that HttpOnly cookies stayed
+    // the same. Cross this boundary before adopting any cached layout state.
+    return typeof identity !== 'string' || !identity || identity !== currentModel.authorizationKey ||
+      committedView.authorizationEpoch !== controller._authorizationEpoch;
+  }
+
+  const actionReloadError = () => new Error('The session changed while this page was loading. Reload before repeating the action.');
+
   const flightTransport = createFlightTransport();
   async function requestFlight(url, signal, routing = currentRouting, onPartial, {skipEnsure=false,fullFlight=false}={}) {
     if(process.env.NODE_ENV==='development'&&!routing?.refresh&&!skipEnsure)await globalThis.__PRNEXT_DEV__?.ensureRoute?.(url.href);
@@ -282,12 +392,14 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
     }
     await onPartial?.(response, destination);
     let model;
-    try { model = assertModel(await createFromFetch(Promise.resolve(exported?response:await flightTransport.response(response,base)), flightOptions)); }
+    const flight = { complete: false };
+    try { model = assertModel(await createFromFetch(Promise.resolve(await flightTransport.response(response,base,{onEnd(){flight.complete = true;flight.committed?.();}})), flightOptions)); }
     catch(error) {
       if(!delta||fullFlight||signal?.aborted)throw error;
       flightTransport.clear();
       return requestFlight(url,signal,routing,onPartial,{skipEnsure:true,fullFlight:true});
     }
+    navigationStreams.set(model, flight);
     model.router.basePath = basePath;
     const rewrite = readRewriteHeader(response);
     if (rewrite) model.rewrite = rewrite;
@@ -364,12 +476,20 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
 
   function callServer(id, args) {
     if (!root) return Promise.reject(new Error('Server Actions cannot run during initial rendering'));
+    if (pageHidden || documentFallback) return Promise.reject(actionReloadError());
     const token = ++navigation;
+    finishCommit?.();
     const target = new URL(window.location.href);
+    saveScroll();
+    const restored = abandonPendingView();
     activeRequest?.abort();
     appStyleManager(document).cancel();
     finishNavigation?.(); finishNavigation = undefined;
     activeRequest = undefined;
+    if (!restored) {
+      fallbackDocument(target.href);
+      return Promise.reject(actionReloadError());
+    }
     purgeRetainedPages();
     // Mutations are dispatched in order, including Set-Cookie effects required
     // by a subsequent action. Capture their route priority when invoked: a
@@ -380,14 +500,29 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
   }
 
   async function dispatchAction(id, args, token, target) {
+    if (pageHidden || documentFallback) throw actionReloadError();
     const release = scheduler.navigation();
     try { return await performAction(id, args, token, target); } finally { release(); }
   }
 
+  async function waitForDevelopmentUpdate() {
+    // A generation updates the Flight loader before React Refresh registers
+    // the replacement component families. An already-running action may finish
+    // in that interval; rendering its model immediately remounts those client
+    // components and loses layout state. Wait only on development bookkeeping,
+    // never replay the mutation or cancel a newer user navigation.
+    let development = globalThis.__PRNEXT_DEV__;
+    while (development?.applying && development.applied) {
+      await development.applied;
+      development = globalThis.__PRNEXT_DEV__;
+    }
+  }
+
   async function performAction(id, args, token, target) {
     invalidatePrefetches();
     const temporaryReferences = createTemporaryReferenceSet();
     const body = await encodeReply(args, { temporaryReferences });
+    if (pageHidden || documentFallback) throw actionReloadError();
     const response = await fetch(target.href, {
       method: 'POST',
       headers: { ...deploymentHeaders(deploymentId), 'Next-Action': id, RSC: '1', Accept: 'text/x-component', ...(currentRouting ? { 'x-prnext-router-state': encodeURIComponent(JSON.stringify({ ...currentRouting, refresh: true })) } : {}) },
@@ -404,15 +539,37 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
       throw new Error(`Server Action request failed (${response.status})`);
     }
     const model = await createFromFetch(Promise.resolve(response), { ...flightOptions, temporaryReferences });
+    const outcome = () => {
+      if (model?.actionError) {
+        const error = new Error(model.actionError.message || 'The Server Action failed');
+        if (model.actionError.digest !== undefined) error.digest = model.actionError.digest;
+        throw error;
+      }
+      return model?.actionResult;
+    };
+    if (process.env.NODE_ENV === 'development') await waitForDevelopmentUpdate();
     controller._retentionEpoch++;
+    const validOutcome = model && typeof model === 'object' && (Object.hasOwn(model, 'tree') || Object.hasOwn(model, 'actionResult') || model.actionError || model.actionRedirect || model.routingInvalid);
+    if (!validOutcome) throw new Error('The Server Action response did not contain a result');
+    if (Object.hasOwn(model, 'tree') && !model.routingInvalid) assertModel(model);
+    if (requiresAuthorizedDocument(model)) {
+      // A queued action or newer navigation can supersede the render token,
+      // but cannot make an observed account change safe to ignore. Complete
+      // this one POST and block the queue before any subsequent mutation.
+      const latest = pendingNavigation?.token === navigation ? pendingNavigation : undefined;
+      const redirected = token === navigation && model.actionRedirect ? navigationUrl(model.actionRedirect.url) : undefined;
+      const destination = latest?.url || redirected?.href || window.location.href;
+      fallbackDocument(destination, latest ? latest.replace : redirected ? model.actionRedirect.type === 'replace' : true, true);
+      return outcome();
+    }
     if (model?.routingInvalid || (model?.rootLayout && currentModel.rootLayout && model.rootLayout !== currentModel.rootLayout)) {
-      if (token === navigation) window.location.replace(target.href);
-      return model.actionResult;
+      if (token === navigation) fallbackDocument(target.href);
+      return outcome();
     }
     if (model?.actionRedirect) {
       const destination = navigationUrl(model.actionRedirect.url);
       if (token === navigation) await navigate(destination, { replace: model.actionRedirect.type === 'replace' });
-      return model.actionResult;
+      return outcome();
     }
     if (model && Object.hasOwn(model, 'tree') && token === navigation) {
       assertModel(model);
@@ -421,42 +578,48 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
       if (rewrite) model.rewrite = rewrite;
       prepareLayoutCache(model, currentModel);
       try { await appStyleManager(document).prepare(model.globalError ? [] : model.css || []); }
-      catch (error) { if (token !== navigation) return model.actionResult; throw error; }
-      if (token !== navigation) return model.actionResult;
+      catch (error) { if (token !== navigation) return outcome(); throw error; }
+      if (process.env.NODE_ENV === 'development') await waitForDevelopmentUpdate();
+      if (token !== navigation) return outcome();
       currentRouting = model.routing;
       currentModel = model;
+      historyRouting = currentRouting;
       appStyleManager(document).handoff(model.globalError ? [] : model.css || []);
-      startTransition(() => root.render(appView({ model, controller, url: target.href, globalErrorComponent, globalErrorCss })));
-    }
-    if (model?.actionError) {
-      const error = new Error(model.actionError.message || 'The Server Action failed');
-      if (model.actionError.digest !== undefined) error.digest = model.actionError.digest;
-      throw error;
+      renderView(model, target.href, { token, kind: 'action' });
     }
+    if (model?.actionError) return outcome();
     // Flight's JSON reviver removes object fields encoded as $undefined. A
     // successful void action therefore has an updated tree but no own result.
     if (!model || typeof model !== 'object' || (!Object.hasOwn(model, 'actionResult') && !Object.hasOwn(model, 'tree'))) {
       throw new Error('The Server Action response did not contain a result');
     }
-    return model.actionResult;
+    return outcome();
   }
 
   async function navigate(href, { replace = false, scroll = true, pop = false, savedScroll, savedRouting, refresh = false } = {}) {
-    if (pageHidden) return;
+    if (pageHidden || documentFallback) return;
     const target = navigationUrl(href);
     if (!isApplicationURL(target, window.location.origin, basePath) || isHtmlDocumentRoute(htmlOnlyRoutes, removeBasePath(target.pathname, basePath))) {
-      if (replace) window.location.replace(target.href);
-      else window.location.assign(target.href);
+      fallbackDocument(target.href, replace);
       return;
     }
     const token = ++navigation;
+    const intent = { token, url: target.href, replace: replace || pop || refresh };
+    pendingNavigation = intent;
+    finishCommit?.();
+    saveScroll();
+    const restored = abandonPendingView();
     activeRequest?.abort();
     appStyleManager(document).cancel();
     finishNavigation?.(); finishNavigation = undefined;
     activeRequest = undefined;
-    saveScroll();
+    if (!restored) {
+      fallbackDocument(target.href, replace || pop || refresh);
+      return;
+    }
 
     function updateHistory(destination) {
+      historyRouting = currentRouting;
       if (!pop && !refresh) {
         if (!replace) currentKey = nextKey++;
         const position = scroll ? [0, 0] : [window.scrollX, window.scrollY];
@@ -470,9 +633,12 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
       currentUrl = destination;
     }
 
-    if (!refresh && target.pathname === currentUrl.pathname && target.search === currentUrl.search && target.hash !== currentUrl.hash) {
+    const committedUrl = new URL(committedView.url);
+    if (!refresh && target.pathname === currentUrl.pathname && target.search === currentUrl.search && target.hash !== currentUrl.hash &&
+        target.pathname === committedUrl.pathname && target.search === committedUrl.search) {
       updateHistory(target);
       if (scroll) scrollToTarget(target, savedScroll);
+      if (pendingNavigation === intent) pendingNavigation = undefined;
       return;
     }
 
@@ -493,20 +659,20 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
         try { result = await prefetched.promise; }
         catch (error) { if (token !== navigation || (prefetched.abort.signal.aborted && !prefetched.failed)) throw error; result = null; }
         if (result && !result.partial) {
-          if (result.model.authorizationKey) {
-            // A full private prefetch warmed modules/data, not authorization.
-            // HttpOnly cookies may have changed since it was produced.
-            const abort = new AbortController(); activeRequest = abort;
-            result = await navigateFlight(target, abort.signal, pop && savedRouting ? { ...savedRouting, restore: true } : currentRouting);
-          } else {
-            result = { ...result, url: new URL(result.url.href) };
-            if (!result.url.hash) result.url.hash = target.hash;
-          }
+          // Full prefetch warms modules/data, not a future authorization decision.
+          // Static Flight has no authorizationKey, but its proxy checks can still
+          // change when an HttpOnly cookie is revoked before this click.
+          const abort = new AbortController(); activeRequest = abort;
+          result = await navigateFlight(target, abort.signal, pop && savedRouting ? { ...savedRouting, restore: true } : currentRouting);
         } else {
           const preview = result;
           const abort = new AbortController();
           activeRequest = abort;
           result = await navigateFlight(target, abort.signal, currentRouting, async (response, destination) => {
+            // A cached shell (including any cached authorization key) cannot
+            // establish this request's live session identity. Strict account
+            // isolation waits for the freshly authorized Flight model instead.
+            if (controller._navigationCache?.authCookies !== undefined) return;
             if (!preview || token !== navigation || response.headers.get('x-prnext-ppr-id') !== preview.id ||
                 (preview.model.rootLayout && currentModel.rootLayout && preview.model.rootLayout !== currentModel.rootLayout)) return;
             // Auth, middleware and rewrites ran again. A changed target or a
@@ -517,7 +683,7 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
             if (token !== navigation || abort.signal.aborted) return;
             updateHistory(destination); historyUpdated = true;
             appStyleManager(document).handoff(preview.model.css || []);
-            startTransition(() => root.render(appView({ model: preview.model, controller, url: destination.href, globalErrorComponent, globalErrorCss })));
+            renderView(preview.model, destination.href, { token, canonical: false });
           });
         }
       } else {
@@ -531,11 +697,17 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
       if (token !== navigation) return;
       if (!isApplicationURL(result.url, window.location.origin, basePath)) throw new Error('The navigation destination requires a document request');
       if (result.model.rootLayout && currentModel.rootLayout && result.model.rootLayout !== currentModel.rootLayout) throw new Error('A different root layout requires a document request');
+      if (requiresAuthorizedDocument(result.model)) {
+        activeRequest?.abort();
+        fallbackDocument(result.url.href, replace || pop || refresh);
+        return;
+      }
       prepareLayoutCache(result.model, currentModel);
       await appStyleManager(document).prepare(result.model.globalError ? [] : result.model.css || [], activeRequest?.signal);
       if (token !== navigation) return;
       currentRouting = result.model.routing;
       currentModel = result.model;
+      historyRouting = currentRouting;
       if (currentRouting) invalidatePrefetches();
       if (!historyUpdated) updateHistory(result.url);
       const committed = () => {
@@ -546,8 +718,12 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
         }
       };
       appStyleManager(document).handoff(result.model.globalError ? [] : result.model.css || []);
-      if(process.env.NODE_ENV==='development'&&refresh)await new Promise(resolve=>startTransition(()=>root.render(appView({model:result.model,controller,committed:()=>{committed();resolve();},url:result.url.href,globalErrorComponent,globalErrorCss}))));
-      else startTransition(() => root.render(appView({ model: result.model, controller, committed, url: result.url.href, globalErrorComponent, globalErrorCss })));
+      if(process.env.NODE_ENV==='development'&&refresh)await new Promise(resolve=>{
+        const finish=()=>{if(finishCommit===finish)finishCommit=undefined;resolve();};
+        finishCommit=finish;
+        renderView(result.model, result.url.href, { token, committed: () => { committed(); finish(); } });
+      });
+      else renderView(result.model, result.url.href, { token, committed });
     } catch (error) {
       if (token !== navigation || error?.name === 'AbortError') return;
       if(error?.code==='PRNEXT_NAVIGATION_NETWORK'){
@@ -556,18 +732,29 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
       }
       // Pages Router routes, public files, and unavailable Flight endpoints use
       // a normal document navigation, including the browser's redirect handling.
-      if (replace || pop || refresh) window.location.replace(target.href);
-      else window.location.assign(target.href);
+      fallbackDocument(target.href, replace || pop || refresh);
     } finally {
+      if (pendingNavigation === intent) pendingNavigation = undefined;
       if (finishNavigation === releaseNavigation) finishNavigation = undefined;
       releaseNavigation();
     }
   }
 
   function purgeRetainedPages() {
+    if (pageHidden || documentFallback) return false;
+    saveScroll();
+    if (!abandonPendingView()) {
+      activeRequest?.abort();
+      fallbackDocument(currentUrl.href);
+      return false;
+    }
     controller._retentionEpoch++;
     historyFocus.clear();
-    startTransition(() => root?.render(appView({ model: currentModel, controller, url: currentUrl.href, globalErrorComponent, globalErrorCss })));
+    if (committedView.model === currentModel && committedView.authorizationEpoch === controller._authorizationEpoch) committedView = { ...committedView, retentionEpoch: controller._retentionEpoch };
+    // This only updates retention for the already committed model. It must
+    // not become a new pending Flight view or a development commit barrier.
+    startTransition(() => root.render(appView({ model: currentModel, controller, url: committedView.url, globalErrorComponent, globalErrorCss })));
+    return true;
   }
 
   const controller = {
@@ -579,13 +766,13 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
     replace: (href, options) => { void navigate(navigationUrl(href), { ...options, replace: true }); },
     refresh: () => {
       invalidatePrefetches();
-      purgeRetainedPages();
+      if (!purgeRetainedPages()) return;
       void navigate(new URL(window.location.href), { refresh: true });
     },
     back: () => { saveScroll(); window.history.back(); },
     forward: () => { saveScroll(); window.history.forward(); },
     prefetch(href, options = {}) {
-      if (pageHidden) return;
+      if (pageHidden || documentFallback) return;
       const target = navigationUrl(href);
       if (!isApplicationURL(target, window.location.origin, basePath) || isHtmlDocumentRoute(htmlOnlyRoutes, removeBasePath(target.pathname, basePath))) return;
       target.hash = '';
@@ -650,8 +837,22 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
   window.addEventListener('popstate', event => {
     void navigate(new URL(window.location.href), { pop: true, savedScroll: event.state?.__prnext?.scroll, savedRouting: event.state?.__prnext?.routing });
   });
-  window.addEventListener('pagehide', () => { saveScroll(); pageHidden = true; navigation++; activeRequest?.abort(); appStyleManager(document).cancel(); finishNavigation?.(); finishNavigation = undefined; invalidatePrefetches(); });
-  window.addEventListener('pageshow', event => { pageHidden = false; if (event.persisted) controller.refresh(); });
+  window.addEventListener('pagehide', () => {
+    saveScroll(); pageHidden = true; navigation++; finishCommit?.(); abandonPendingView();
+    clearTimeout(documentTimer); documentTimer = undefined;
+    activeRequest?.abort(); appStyleManager(document).cancel(); finishNavigation?.(); finishNavigation = undefined; invalidatePrefetches();
+    // A cached document may contain an account's shared layout state. Keep it
+    // hidden if restored from BFCache until the next document authorizes it.
+    if (controller._navigationCache?.authCookies !== undefined) document.documentElement.style.visibility = 'hidden';
+  });
+  window.addEventListener('pageshow', event => {
+    pageHidden = false;
+    if (!event.persisted) return;
+    if (controller._navigationCache?.authCookies !== undefined) {
+      documentFallback = false;
+      fallbackDocument(window.location.href);
+    } else controller.refresh();
+  });
   window.addEventListener('prnext:invalidate-navigation', () => { controller._authorizationEpoch++; controller.refresh(); });
   let scrollFrame;
   window.addEventListener('scroll', () => {
@@ -672,7 +873,7 @@ async function startApp({ deploymentId, htmlOnlyRoutes, clientModules = {}, base
     devStyles: routes => developmentStyles(currentModel, routes).css || [],
     devPrepareStyles: routes => appStyleManager(document).prepare(developmentStyles(currentModel, routes).css || []),
     devStylesApplied: (routes, { commit = true } = {}) => {
-      for (const model of [currentModel]) {
+      for (const model of new Set([currentModel, committedView.model, pendingView?.model].filter(Boolean))) {
         const next = developmentStyles(model, routes);
         model.css = next.css; model.cssScopes = next.cssScopes;
       }

package/runtime/app-partial.mjs

@@ -8,9 +8,10 @@ import { appContent } from './app-content.mjs';
 import { runRequestContext, currentRequest } from '../compat/headers.cjs';
 import { cachedValue, cacheGeneration, flushCacheWork } from '../compat/data-cache.cjs';
 import { partialModel, preparePartialModel } from './app-partial-model.mjs';
-import { MAX_RESPONSE_BYTES, escapeHtml } from './http.mjs';
+import { escapeHtml, MAX_RESPONSE_BYTES } from './http.mjs';
 import { fontPreloads } from './font-preload.mjs';
 import { PartialArtifactCache } from './partial-artifact-cache.mjs';
+export {partialShell} from './native-ppr.mjs';
 
 const artifacts = new Map();
 const parsedArtifacts = new PartialArtifactCache();
@@ -32,7 +33,6 @@ async function readArtifact(file) {
   }
   return value;
 }
-
 async function bytes(stream) {
   const chunks = [];
   let length = 0;
@@ -120,11 +120,3 @@ export async function partialArtifact({ request, route, manifest, filename, iden
     } finally { await flushCacheWork(context); }
   });
 }
-
-export function partialShell(artifact, route) {
-  const bootstrap = '<script>self.__PRNEXT_FLIGHT_STREAM__=self.__PRNEXT_FLIGHT_STREAM__||[];</script>' +
-    (route.client ? `<script type="module" async src="${escapeHtml(route.client)}"></script>` : '');
-  const end = artifact.shell.lastIndexOf('</body>');
-  if (end < 0 || !/<\/body><\/html>$/i.test(artifact.shell)) throw new Error('Invalid partial prerender document');
-  return artifact.shell.slice(0, end) + bootstrap + artifact.shell.slice(end);
-}

package/runtime/app-prefetch.mjs

@@ -1,6 +1,7 @@
 // Prefetch contains only prerendered segments. Request-dependent holes are
 // resolved by a fresh, authenticated navigation; they never enter this cache.
 import { PARTIAL_PREFETCH_BYTES } from './app-prefetch-constants.mjs';
+import { decodeBase64 } from '../compat/base64.cjs';
 export { PARTIAL_PREFETCH_TYPE, PARTIAL_PREFETCH_BYTES, PARTIAL_PREFETCH_CACHE_BYTES } from './app-prefetch-constants.mjs';
 
 export async function readPartialPrefetch(response) {
@@ -27,7 +28,6 @@ export async function readPartialPrefetch(response) {
 }
 
 export function partialFlightStream(base64) {
-  const binary = atob(base64);
-  const bytes = Uint8Array.from(binary, character => character.charCodeAt(0));
+  const bytes = decodeBase64(base64);
   return new ReadableStream({ start(controller) { controller.enqueue(bytes); controller.close(); } });
 }