Merge branch 'canary' into fix/middleware-i18n-rewrites

vercel · Nov 9, 2021 · c7ff9d4 · c7ff9d4
2 parents 6b312bb + 91a6e3a
commit c7ff9d4
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 21 deletions.
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -650,27 +650,28 @@ export class Head extends Component<
 
       return (
         <head {...this.props}>
-          {this.context.isDevelopment && (
-            <>
-              <style
-                data-next-hide-fouc
-                data-ampdevmode={inAmpMode ? 'true' : undefined}
-                dangerouslySetInnerHTML={{
-                  __html: `body{display:none}`,
-                }}
-              />
-              <noscript
-                data-next-hide-fouc
-                data-ampdevmode={inAmpMode ? 'true' : undefined}
-              >
+          {!process.env.__NEXT_CONCURRENT_FEATURES &&
+            this.context.isDevelopment && (
+              <>
                 <style
+                  data-next-hide-fouc
+                  data-ampdevmode={inAmpMode ? 'true' : undefined}
                   dangerouslySetInnerHTML={{
-                    __html: `body{display:block}`,
+                    __html: `body{display:none}`,
                   }}
                 />
-              </noscript>
-            </>
-          )}
+                <noscript
+                  data-next-hide-fouc
+                  data-ampdevmode={inAmpMode ? 'true' : undefined}
+                >
+                  <style
+                    dangerouslySetInnerHTML={{
+                      __html: `body{display:block}`,
+                    }}
+                  />
+                </noscript>
+              </>
+            )}
           {children}
           {process.env.__NEXT_OPTIMIZE_FONTS && (
             <meta name="next-font-preconnect" />

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -514,9 +514,9 @@ export async function renderToHTML(
     defaultLocale: renderOpts.defaultLocale,
     AppTree: (props: any) => {
       return (
-        <AppContainer>
+        <AppContainerWithIsomorphicFiberStructure>
           <App {...props} Component={Component} router={router} />
-        </AppContainer>
+        </AppContainerWithIsomorphicFiberStructure>
       )
     },
     defaultGetInitialProps: async (
@@ -577,6 +577,41 @@ export async function renderToHTML(
     </RouterContext.Provider>
   )
 
+  // The `useId` API uses the path indexes to generate an ID for each node.
+  // To guarantee the match of hydration, we need to ensure that the structure
+  // of wrapper nodes is isomorphic in server and client.
+  // TODO: With `enhanceApp` and `enhanceComponents` options, this approach may
+  // not be useful.
+  // https://github.com/facebook/react/pull/22644
+  const Noop = () => null
+  const AppContainerWithIsomorphicFiberStructure = ({
+    children,
+  }: {
+    children: JSX.Element
+  }) => {
+    return (
+      <>
+        {/* <Head/> */}
+        <Noop />
+        <AppContainer>
+          <>
+            {/* <ReactDevOverlay/> */}
+            {dev ? (
+              <>
+                {children}
+                <Noop />
+              </>
+            ) : (
+              children
+            )}
+            {/* <RouteAnnouncer/> */}
+            <Noop />
+          </>
+        </AppContainer>
+      </>
+    )
+  }
+
   props = await loadGetInitialProps(App, {
     AppTree: ctx.AppTree,
     Component,
@@ -941,11 +976,11 @@ export async function renderToHTML(
     // opaque component. Wrappers should use context instead.
     const InnerApp = () => app
     return (
-      <AppContainer>
+      <AppContainerWithIsomorphicFiberStructure>
         {appWrappers.reduce((innerContent, fn) => {
           return fn(innerContent)
         }, <InnerApp />)}
-      </AppContainer>
+      </AppContainerWithIsomorphicFiberStructure>
     )
   }
 

diff --git a/test/integration/react-18/app/pages/use-id.js b/test/integration/react-18/app/pages/use-id.js
@@ -0,0 +1,5 @@
+import { useId } from 'react'
+
+export default function Page() {
+  return <div id="id">{useId()}</div>
+}
diff --git a/test/integration/react-18/test/basics.js b/test/integration/react-18/test/basics.js
@@ -28,4 +28,15 @@ export default (context) => {
     expect(content).toBe('rab')
     expect(nextData.dynamicIds).toBeUndefined()
   })
+
+  it('useId() values should match on hydration', async () => {
+    const html = await renderViaHTTP(context.appPort, '/use-id')
+    const $ = cheerio.load(html)
+    const ssrId = $('#id').text()
+
+    const browser = await webdriver(context.appPort, '/use-id')
+    const csrId = await browser.eval('document.getElementById("id").innerText')
+
+    expect(ssrId).toEqual(csrId)
+  })
 }