Refresh on route tree mismatch

During a dynamic navigation, the server may respond with a different
route tree than the one we expected. This typically happens due to a
conditional server-side routing change.

This shouldn't happen under normal circumstances, but in some cases
it's unavoidable. Such as a user logging in/out from a different client.

When it does happen, Next.js must recover to a consistent state. This
may involve a brief flash of the incorrect route before the mismatch
is detected.

The recovery mechanism is simple enough: we refresh the page, using
whatever tree the server responds with (bypassing any older version
we may have cached locally). Also, because a route mismatch implies
some sort of server-side mutation, we also evict all the dynamic data
in the client's cache. Similar to what we do when a cookie is mutated
by a Server Action, or in response to a refresh() call.

This replaces the need for the lazy data fetch that happens in
LayoutRouter, via the server-patch reducer. I've left the existing
server-patch logic in place until I've finished migrating the reducers
over to the new implementation. In the meantime, I updated LayoutRouter
to disable the lazy data fetching branch for any navigation produced
by a reducer that has already been ported.

Author: acdlite

packages/next/src/client/components/app-router-instance.ts

@@ -79,13 +79,7 @@ function runRemainingActions(
     // after the navigation has already finished and the queue is empty
     if (actionQueue.needsRefresh) {
       actionQueue.needsRefresh = false
-      actionQueue.dispatch(
-        {
-          type: ACTION_REFRESH,
-          origin: window.location.origin,
-        },
-        setState
-      )
+      actionQueue.dispatch({ type: ACTION_REFRESH }, setState)
     }
   }
 }
@@ -383,7 +377,6 @@ export const publicAppRouterInstance: AppRouterInstance = {
     startTransition(() => {
       dispatchAppRouterAction({
         type: ACTION_REFRESH,
-        origin: window.location.origin,
       })
     })
   },

packages/next/src/client/components/layout-router.tsx

@@ -50,6 +50,7 @@ import {
 } from '../../shared/lib/hooks-client-context.shared-runtime'
 import { getParamValueFromCacheKey } from '../route-params'
 import type { Params } from '../../server/request/params'
+import { isDeferredRsc } from './router-reducer/ppr-navigations'
 
 /**
  * Add refetch marker to router state at the point of the current layout segment.
@@ -375,11 +376,27 @@ function InnerLayoutRouter({
   // special case `null` to represent that this segment's data is missing. If
   // it's a promise, we need to unwrap it so we can determine whether or not the
   // data is missing.
-  const resolvedRsc: React.ReactNode =
-    typeof rsc === 'object' && rsc !== null && typeof rsc.then === 'function'
-      ? use(rsc)
-      : rsc
+  let resolvedRsc: React.ReactNode
+  if (isDeferredRsc(rsc)) {
+    const unwrappedRsc = use(rsc)
+    if (unwrappedRsc === null) {
+      // If the promise was resolved to `null`, it means the data for this
+      // segment was not returned by the server. Suspend indefinitely. When this
+      // happens, the router is responsible for triggering a new state update to
+      // un-suspend this segment.
+      use(unresolvedThenable) as never
+    }
+    resolvedRsc = unwrappedRsc
+  } else {
+    // This is not a deferred RSC promise. Don't need to unwrap it.
+    resolvedRsc = rsc
+  }
 
+  // TODO: At this point, the only reason `resolvedRsc` would be null is if the
+  // data for this segment was fetched by a reducer that hasn't been migrated
+  // yet to the Segment Cache implementation. It shouldn't happen for regular
+  // navigations. Once we convert the remaining reducers, we can delete the
+  // lazy fetching block below.
   if (!resolvedRsc) {
     // The data for this segment is not available, and there's no pending
     // navigation that will be able to fulfill it. We need to fetch more from
@@ -418,6 +435,7 @@ function InnerLayoutRouter({
               previousTree: fullTree,
               serverResponse,
               navigatedAt,
+              retry: null,
             })
           })