fix loading issue when navigating to page with async metadata (#61687)

### What
Client-side transitioning to a page that triggered a loading boundary
with async metadata would cause the transition to stall, potentially
getting stuck in a refetch loop.

### Why
In layout-router, we trigger a "lazy fetch" when we encounter a segment
that we don't have cache nodes for. This calls out to the server and
suspends until the data fetch is resolved, and applied to the router
tree. However after suspending but before updating the client router, we
set `childNode.lazyData` to null. When we unsuspend from the server
patch action, `childNode.rsc` might still be missing and clearing
`lazyData` means we've blown away the reference to the fetch we already
had pending, triggering a refetch loop.

### How
This removes the logic that mutates the cache node in render, as this is
not concurrent safe, and doesn't appear to be needed for anything.

Fixes #61117
Closes NEXT-2361

---------

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

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

@@ -419,9 +419,6 @@ function InnerLayoutRouter({
     // When the data has not resolved yet `use` will suspend here.
     const [flightData, overrideCanonicalUrl] = use(lazyData)
 
-    // segmentPath from the server does not match the layout's segmentPath
-    childNode.lazyData = null
-
     // setTimeout is used to start a new transition during render, this is an intentional hack around React.
     setTimeout(() => {
       startTransition(() => {

test/e2e/app-dir/actions-navigation/app/nested-folder/(foo)/product-category/[...slugs]/page.js

@@ -12,7 +12,7 @@ function SubmitButton() {
   )
 }
 
-export default async function Page() {
+export default function Page() {
   return (
     <>
       <h1>Add to cart</h1>

test/e2e/app-dir/navigation/app/metadata-await-promise/nested/loading.js

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div id="loading">Loading</div>
+}

test/e2e/app-dir/navigation/app/metadata-await-promise/nested/page.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+// ensure this page is dynamically rendered so we always trigger a loading state
+export const dynamic = 'force-dynamic'
+
+export default function page() {
+  return <div id="page-content">Content</div>
+}
+
+async function getTitle() {
+  return await new Promise((resolve) =>
+    setTimeout(() => resolve('Async Title'), 1000)
+  )
+}
+
+export async function generateMetadata() {
+  return { title: await getTitle() }
+}

test/e2e/app-dir/navigation/app/metadata-await-promise/page.js

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function page() {
+  return (
+    <div>
+      <Link href="/metadata-await-promise/nested">Link to nested</Link>
+    </div>
+  )
+}

test/e2e/app-dir/navigation/navigation.test.ts

@@ -7,7 +7,7 @@ createNextDescribe(
   {
     files: __dirname,
   },
-  ({ next, isNextDev, isNextDeploy }) => {
+  ({ next, isNextDev, isNextDeploy, isNextStart }) => {
     describe('query string', () => {
       it('should set query correctly', async () => {
         const browser = await next.browser('/')
@@ -788,5 +788,34 @@ createNextDescribe(
         expect(newScrollPosition).toEqual(scrollPosition)
       })
     })
+
+    describe('navigating to a page with async metadata', () => {
+      it('should render the final state of the page with correct metadata', async () => {
+        const browser = await next.browser('/metadata-await-promise')
+
+        // dev + PPR doesn't trigger the loading boundary as it's not prefetched
+        if (isNextDev && process.env.__NEXT_EXPERIMENTAL_PPR) {
+          await browser
+            .elementByCss("[href='/metadata-await-promise/nested']")
+            .click()
+        } else {
+          const loadingText = await browser
+            .elementByCss("[href='/metadata-await-promise/nested']")
+            .click()
+            .waitForElementByCss('#loading')
+            .text()
+
+          expect(loadingText).toBe('Loading')
+        }
+
+        await retry(async () => {
+          expect(await browser.elementById('page-content').text()).toBe(
+            'Content'
+          )
+
+          expect(await browser.elementByCss('title').text()).toBe('Async Title')
+        })
+      })
+    })
   }
 )