Move root div to an app wrapper (#31596)

Extracted from #31223. We need to move the root `<div id="__next">` wrapper to be rendered as part of the page content, rather than the`Document`, so that flush effects (like styles) are flushed before (or after) the div, rather than inside, where they would cause hydration mismatches.
vercel · Nov 19, 2021 · ab712ef · ab712ef
1 parent d1ce7b7
commit ab712ef
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 22 deletions.
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -766,13 +766,10 @@ export function Main({
 }: {
   children?: (content: JSX.Element) => JSX.Element
 }) {
-  const { inAmpMode, docComponentsRendered, useMainContent } =
-    useContext(HtmlContext)
+  const { docComponentsRendered, useMainContent } = useContext(HtmlContext)
   const content = useMainContent(children)
   docComponentsRendered.Main = true
-
-  if (inAmpMode) return content
-  return <div id="__next">{content}</div>
+  return content
 }
 
 export class NextScript extends Component<OriginProps> {

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -1041,14 +1041,18 @@ export async function renderToHTML(
     }
   }
 
+  const Body = ({ children }: { children: JSX.Element }) => {
+    return inAmpMode ? children : <div id="__next">{children}</div>
+  }
+
   const appWrappers: Array<(content: JSX.Element) => JSX.Element> = []
   const getWrappedApp = (app: JSX.Element) => {
     // Prevent wrappers from reading/writing props by rendering inside an
     // opaque component. Wrappers should use context instead.
     const InnerApp = () => app
     return (
       <AppContainerWithIsomorphicFiberStructure>
-        {appWrappers.reduce((innerContent, fn) => {
+        {appWrappers.reduceRight((innerContent, fn) => {
           return fn(innerContent)
         }, <InnerApp />)}
       </AppContainerWithIsomorphicFiberStructure>
@@ -1081,7 +1085,9 @@ export async function renderToHTML(
       ): RenderPageResult | Promise<RenderPageResult> => {
         if (ctx.err && ErrorDebug) {
           const html = ReactDOMServer.renderToString(
-            <ErrorDebug error={ctx.err} />
+            <Body>
+              <ErrorDebug error={ctx.err} />
+            </Body>
           )
           return { html, head }
         }
@@ -1096,13 +1102,15 @@ export async function renderToHTML(
           enhanceComponents(options, App, Component)
 
         const html = ReactDOMServer.renderToString(
-          getWrappedApp(
-            <EnhancedApp
-              Component={EnhancedComponent}
-              router={router}
-              {...props}
-            />
-          )
+          <Body>
+            {getWrappedApp(
+              <EnhancedApp
+                Component={EnhancedComponent}
+                router={router}
+                {...props}
+              />
+            )}
+          </Body>
         )
         return { html, head }
       }
@@ -1141,14 +1149,17 @@ export async function renderToHTML(
       }
     } else {
       const bodyResult = async () => {
-        const content =
-          ctx.err && ErrorDebug ? (
-            <ErrorDebug error={ctx.err} />
-          ) : (
-            getWrappedApp(
-              <App {...props} Component={Component} router={router} />
-            )
-          )
+        const content = (
+          <Body>
+            {ctx.err && ErrorDebug ? (
+              <ErrorDebug error={ctx.err} />
+            ) : (
+              getWrappedApp(
+                <App {...props} Component={Component} router={router} />
+              )
+            )}
+          </Body>
+        )
 
         return concurrentFeatures
           ? process.browser