Refresh on route mismatch

packages/next/src/client/app-index.tsx

@@ -318,7 +318,6 @@ export async function hydrate(
       initialFlightData: initialRSCPayload.f,
       initialCanonicalUrlParts: initialRSCPayload.c,
       initialRenderedSearch: initialRSCPayload.q,
-      initialParallelRoutes: new Map(),
       location: window.location,
     }),
     instrumentationHooks

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,
             })
           })
 
@@ -610,6 +628,14 @@ export default function OuterLayoutRouter({
   // (This only applies to page segments; layout segments cannot access search
   // params on the server.)
   const activeTree = parentTree[1][parallelRouterKey]
+  if (activeTree === undefined) {
+    // Could not find a matching segment. The client tree is inconsistent with
+    // the server tree. Suspend indefinitely; the router will have already
+    // detected the inconsistency when handling the server response, and
+    // triggered a refresh of the page to recover.
+    use(unresolvedThenable) as never
+  }
+
   const activeSegment = activeTree[0]
   const activeStateKey = createRouterCacheKey(activeSegment, true) // no search params
 

packages/next/src/client/components/router-reducer/create-initial-router-state.ts

@@ -1,20 +1,16 @@
-import type {
-  CacheNode,
-  FlightDataPath,
-} from '../../../shared/lib/app-router-types'
+import type { FlightDataPath } from '../../../shared/lib/app-router-types'
 
 import { createHrefFromUrl } from './create-href-from-url'
-import { fillLazyItemsTillLeafWithHead } from './fill-lazy-items-till-leaf-with-head'
 import { extractPathFromFlightRouterState } from './compute-changed-path'
 
 import type { AppRouterState } from './router-reducer-types'
 import { getFlightDataPartsFromPath } from '../../flight-data-helpers'
+import { createInitialCacheNodeForHydration } from './ppr-navigations'
 
 export interface InitialRouterStateParameters {
   navigatedAt: number
   initialCanonicalUrlParts: string[]
   initialRenderedSearch: string
-  initialParallelRoutes: CacheNode['parallelRoutes']
   initialFlightData: FlightDataPath[]
   location: Location | null
 }
@@ -24,7 +20,6 @@ export function createInitialRouterState({
   initialFlightData,
   initialCanonicalUrlParts,
   initialRenderedSearch,
-  initialParallelRoutes,
   location,
 }: InitialRouterStateParameters): AppRouterState {
   // When initialized on the server, the canonical URL is provided as an array of parts.
@@ -40,20 +35,6 @@ export function createInitialRouterState({
   } = normalizedFlightData
   // For the SSR render, seed data should always be available (we only send back a `null` response
   // in the case of a `loading` segment, pre-PPR.)
-  const rsc = initialSeedData?.[0]
-  const loading = initialSeedData?.[2] ?? null
-
-  const cache: CacheNode = {
-    lazyData: null,
-    rsc,
-    prefetchRsc: null,
-    head: null,
-    prefetchHead: null,
-    // The cache gets seeded during the first render. `initialParallelRoutes` ensures the cache from the first render is there during the second render.
-    parallelRoutes: initialParallelRoutes,
-    loading,
-    navigatedAt,
-  }
 
   const canonicalUrl =
     // location.href is read as the initial value for canonicalUrl in the browser
@@ -63,21 +44,14 @@ export function createInitialRouterState({
         createHrefFromUrl(location)
       : initialCanonicalUrl
 
-  // When the cache hasn't been seeded yet we fill the cache with the head.
-  if (initialParallelRoutes === null || initialParallelRoutes.size === 0) {
-    fillLazyItemsTillLeafWithHead(
+  const initialState = {
+    tree: initialTree,
+    cache: createInitialCacheNodeForHydration(
       navigatedAt,
-      cache,
-      undefined,
       initialTree,
       initialSeedData,
       initialHead
-    )
-  }
-
-  const initialState = {
-    tree: initialTree,
-    cache,
+    ),
     pushRef: {
       pendingPush: false,
       mpaNavigation: false,