Ensure metadata doesn't break scroll-to-top on navigation

vercel · Jan 10, 2025 · 3fee0b4 · 3fee0b4
1 parent 137ae4e
commit 3fee0b4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 30 deletions.
diff --git a/packages/next/src/server/app-render/create-component-tree.tsx b/packages/next/src/server/app-render/create-component-tree.tsx
@@ -399,25 +399,25 @@ async function createComponentTreeInternal({
 
   const notFoundElement = NotFound ? (
     <>
+      <NotFound />
       {metadata}
       {notFoundStyles}
-      <NotFound />
     </>
   ) : undefined
 
   const forbiddenElement = Forbidden ? (
     <>
+      <Forbidden />
       {metadata}
       {forbiddenStyles}
-      <Forbidden />
     </>
   ) : undefined
 
   const unauthorizedElement = Unauthorized ? (
     <>
+      <Unauthorized />
       {metadata}
       {unauthorizedStyles}
-      <Unauthorized />
     </>
   ) : undefined
 
@@ -669,8 +669,13 @@ async function createComponentTreeInternal({
     return [
       actualSegment,
       <React.Fragment key={cacheNodeKey}>
-        {metadata}
         {pageElement}
+        {/*
+         * The order here matters since a parent might call findDOMNode().
+         * findDOMNode() will return the first child if multiple children are rendered.
+         * But React will hoist metadata into <head> which breaks scroll handling.
+         */}
+        {metadata}
         {layerAssets}
         <OutletBoundary>
           <MetadataOutlet ready={getViewportReady} />
@@ -805,12 +810,12 @@ async function createComponentTreeInternal({
             notFound={
               NotFound ? (
                 <>
-                  {metadata}
                   {layerAssets}
                   <SegmentComponent params={params}>
                     {notFoundStyles}
                     <NotFound />
                   </SegmentComponent>
+                  {metadata}
                 </>
               ) : undefined
             }

diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts
@@ -374,7 +374,9 @@ describe('Error overlay for hydration errors in App router', () => {
     const { session, browser } = sandbox
     await session.openRedbox()
 
-    expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    await retry(async () => {
+      expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    })
 
     // FIXME: Should also have "text nodes cannot be a child of tr"
     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
@@ -439,7 +441,6 @@ describe('Error overlay for hydration errors in App router', () => {
                        <RedirectBoundary>
                          <RedirectErrorBoundary router={{...}}>
                            <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                             <__next_metadata_boundary__>
                              <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
                                <Page params={Promise} searchParams={Promise}>
      >                           <table>
@@ -567,7 +568,9 @@ describe('Error overlay for hydration errors in App router', () => {
     const { session, browser } = sandbox
     await session.openRedbox()
 
-    expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    await retry(async () => {
+      expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    })
 
     const description = await session.getRedboxDescription()
     expect(description).toContain(
@@ -665,7 +668,9 @@ describe('Error overlay for hydration errors in App router', () => {
     const { session, browser } = sandbox
     await session.openRedbox()
 
-    expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    await retry(async () => {
+      expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    })
 
     const description = await session.getRedboxDescription()
     expect(description).toEqual(outdent`
@@ -718,7 +723,9 @@ describe('Error overlay for hydration errors in App router', () => {
     const { session, browser } = sandbox
     await session.openRedbox()
 
-    expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    await retry(async () => {
+      expect(await getRedboxTotalErrorCount(browser)).toBe(2)
+    })
 
     const description = await session.getRedboxDescription()
     expect(description).toContain(
@@ -895,19 +902,18 @@ describe('Error overlay for hydration errors in App router', () => {
            <RedirectBoundary>
              <RedirectErrorBoundary router={{...}}>
                <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                 <__next_metadata_boundary__>
-                   <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                     <Page params={Promise} searchParams={Promise}>
+                 <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                   <Page params={Promise} searchParams={Promise}>
+                     <div>
                        <div>
                          <div>
                            <div>
-                             <div>
-                               <Mismatch>
-                                 <p>
-                                   <span>
-                                     ...
-       +                              client
-       -                              server"
+                             <Mismatch>
+                               <p>
+                                 <span>
+                                   ...
+       +                            client
+       -                            server"
       `)
     } else {
       expect(fullPseudoHtml).toMatchInlineSnapshot(`
@@ -916,19 +922,18 @@ describe('Error overlay for hydration errors in App router', () => {
            <RedirectBoundary>
              <RedirectErrorBoundary router={{...}}>
                <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}>
-                 <__next_metadata_boundary__>
-                   <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
-                     <Page params={Promise} searchParams={Promise}>
+                 <ClientPageRoot Component={function Page} searchParams={{}} params={{}}>
+                   <Page params={Promise} searchParams={Promise}>
+                     <div>
                        <div>
                          <div>
                            <div>
-                             <div>
-                               <Mismatch>
-                                 <p>
-                                   <span>
-                                     ...
-       +                              client
-       -                              server"
+                             <Mismatch>
+                               <p>
+                                 <span>
+                                   ...
+       +                            client
+       -                            server"
       `)
     }
   })