From 6edc1a73c39e4e1dd4df5f3ea9cbc7586d468c28 Mon Sep 17 00:00:00 2001
From: Gerald Monaco <gbmonaco@google.com>
Date: Fri, 18 Feb 2022 03:10:04 +0000
Subject: [PATCH] Remove useMaybeDeferContent hook

---
 packages/next/pages/_document.tsx         | 391 ++++++++++------------
 packages/next/server/render.tsx           |   8 -
 packages/next/shared/lib/html-context.ts  |   3 +-
 packages/next/shared/lib/utils.ts         |   5 -
 test/unit/use-maybe-defer-content.test.ts |  12 -
 5 files changed, 171 insertions(+), 248 deletions(-)
 delete mode 100644 test/unit/use-maybe-defer-content.test.ts
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 6af1f81fc86a..309ae6321dcb 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -492,7 +492,6 @@ export class Head extends Component<
       unstable_runtimeJS,
       unstable_JsPreload,
       disableOptimizedLoading,
-      useMaybeDeferContent,
       optimizeCss,
       optimizeFonts,
       runtime,
@@ -610,36 +609,96 @@ export class Head extends Component<
       inAmpMode
     )
 
-    // Must use nested component to allow use of a custom hook
-    const DeferrableHead = () => {
-      const getDynamicHeadContent = () => {
-        return (
+    return (
+      <head {...this.props}>
+        {!hasConcurrentFeatures && this.context.isDevelopment && (
           <>
-            {head}
-            <meta
-              name="next-head-count"
-              content={React.Children.count(head || []).toString()}
+            <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}
+            >
+              <style
+                dangerouslySetInnerHTML={{
+                  __html: `body{display:block}`,
+                }}
+              />
+            </noscript>
           </>
-        )
-      }
+        )}
+        {head}
+        <meta
+          name="next-head-count"
+          content={React.Children.count(head || []).toString()}
+        />
+
+        {children}
+        {optimizeFonts && <meta name="next-font-preconnect" />}
 
-      const getDynamicScriptPreloads = () => {
-        return (
+        {inAmpMode && (
           <>
+            <meta
+              name="viewport"
+              content="width=device-width,minimum-scale=1,initial-scale=1"
+            />
+            {!hasCanonicalRel && (
+              <link
+                rel="canonical"
+                href={canonicalBase + cleanAmpPath(dangerousAsPath)}
+              />
+            )}
+            {/* https://www.ampproject.org/docs/fundamentals/optimize_amp#optimize-the-amp-runtime-loading */}
+            <link
+              rel="preload"
+              as="script"
+              href="https://cdn.ampproject.org/v0.js"
+            />
+            <AmpStyles styles={styles} />
+            <style
+              amp-boilerplate=""
+              dangerouslySetInnerHTML={{
+                __html: `body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}`,
+              }}
+            />
+            <noscript>
+              <style
+                amp-boilerplate=""
+                dangerouslySetInnerHTML={{
+                  __html: `body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}`,
+                }}
+              />
+            </noscript>
+            <script async src="https://cdn.ampproject.org/v0.js" />
+          </>
+        )}
+        {!inAmpMode && (
+          <>
+            {!hasAmphtmlRel && hybridAmp && (
+              <link
+                rel="amphtml"
+                href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
+              />
+            )}
+            {!optimizeCss && this.getCssLinks(files)}
+            {!optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}
+
             {!disableRuntimeJS &&
               !disableJsPreload &&
               this.getPreloadDynamicChunks()}
             {!disableRuntimeJS &&
               !disableJsPreload &&
               this.getPreloadMainLinks(files)}
-          </>
-        )
-      }
 
-      const getDynamicScriptContent = () => {
-        return (
-          <>
+            {!disableOptimizedLoading &&
+              !disableRuntimeJS &&
+              this.getPolyfillScripts()}
+
             {!disableOptimizedLoading &&
               !disableRuntimeJS &&
               this.getPreNextScripts()}
@@ -649,120 +708,21 @@ export class Head extends Component<
             {!disableOptimizedLoading &&
               !disableRuntimeJS &&
               this.getScripts(files)}
-          </>
-        )
-      }
 
-      const [isDeferred] = useMaybeDeferContent('HEAD', () => {
-        return (
-          <>
-            {getDynamicHeadContent()}
-            {getDynamicScriptPreloads()}
-            {getDynamicScriptContent()}
+            {optimizeCss && this.getCssLinks(files)}
+            {optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}
+            {this.context.isDevelopment && (
+              // this element is used to mount development styles so the
+              // ordering matches production
+              // (by default, style-loader injects at the bottom of <head />)
+              <noscript id="__next_css__DO_NOT_USE__" />
+            )}
+            {styles || null}
           </>
-        )
-      })
-
-      return (
-        <head {...this.props}>
-          {!hasConcurrentFeatures && 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}
-              >
-                <style
-                  dangerouslySetInnerHTML={{
-                    __html: `body{display:block}`,
-                  }}
-                />
-              </noscript>
-            </>
-          )}
-          {!isDeferred && getDynamicHeadContent()}
-
-          {children}
-          {optimizeFonts && <meta name="next-font-preconnect" />}
-
-          {inAmpMode && (
-            <>
-              <meta
-                name="viewport"
-                content="width=device-width,minimum-scale=1,initial-scale=1"
-              />
-              {!hasCanonicalRel && (
-                <link
-                  rel="canonical"
-                  href={canonicalBase + cleanAmpPath(dangerousAsPath)}
-                />
-              )}
-              {/* https://www.ampproject.org/docs/fundamentals/optimize_amp#optimize-the-amp-runtime-loading */}
-              <link
-                rel="preload"
-                as="script"
-                href="https://cdn.ampproject.org/v0.js"
-              />
-              <AmpStyles styles={styles} />
-              <style
-                amp-boilerplate=""
-                dangerouslySetInnerHTML={{
-                  __html: `body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}`,
-                }}
-              />
-              <noscript>
-                <style
-                  amp-boilerplate=""
-                  dangerouslySetInnerHTML={{
-                    __html: `body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}`,
-                  }}
-                />
-              </noscript>
-              <script async src="https://cdn.ampproject.org/v0.js" />
-            </>
-          )}
-          {!inAmpMode && (
-            <>
-              {!hasAmphtmlRel && hybridAmp && (
-                <link
-                  rel="amphtml"
-                  href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
-                />
-              )}
-              {!optimizeCss && this.getCssLinks(files)}
-              {!optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}
-
-              {!isDeferred && getDynamicScriptPreloads()}
-
-              {!disableOptimizedLoading &&
-                !disableRuntimeJS &&
-                this.getPolyfillScripts()}
-
-              {!isDeferred && getDynamicScriptContent()}
-
-              {optimizeCss && this.getCssLinks(files)}
-              {optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}
-              {this.context.isDevelopment && (
-                // this element is used to mount development styles so the
-                // ordering matches production
-                // (by default, style-loader injects at the bottom of <head />)
-                <noscript id="__next_css__DO_NOT_USE__" />
-              )}
-              {styles || null}
-            </>
-          )}
-          {React.createElement(React.Fragment, {}, ...(headTags || []))}
-        </head>
-      )
-    }
-
-    return <DeferrableHead />
+        )}
+        {React.createElement(React.Fragment, {}, ...(headTags || []))}
+      </head>
+    )
   }
 }
 
@@ -835,110 +795,99 @@ export class NextScript extends Component<OriginProps> {
       docComponentsRendered,
       devOnlyCacheBusterQueryString,
       disableOptimizedLoading,
-      useMaybeDeferContent,
       crossOrigin,
     } = this.context
     const disableRuntimeJS = unstable_runtimeJS === false
 
     docComponentsRendered.NextScript = true
 
-    // Must nest component to use custom hook
-    const DeferrableNextScript = () => {
-      const [, content] = useMaybeDeferContent('NEXT_SCRIPT', () => {
-        if (inAmpMode) {
-          const ampDevFiles = [
-            ...buildManifest.devFiles,
-            ...buildManifest.polyfillFiles,
-            ...buildManifest.ampDevFiles,
-          ]
-
-          return (
-            <>
-              {disableRuntimeJS ? null : (
-                <script
-                  id="__NEXT_DATA__"
-                  type="application/json"
-                  nonce={this.props.nonce}
-                  crossOrigin={this.props.crossOrigin || crossOrigin}
-                  dangerouslySetInnerHTML={{
-                    __html: NextScript.getInlineScriptSource(this.context),
-                  }}
-                  data-ampdevmode
-                />
-              )}
-              {ampDevFiles.map((file) => (
-                <script
-                  key={file}
-                  src={`${assetPrefix}/_next/${file}${devOnlyCacheBusterQueryString}`}
-                  nonce={this.props.nonce}
-                  crossOrigin={this.props.crossOrigin || crossOrigin}
-                  data-ampdevmode
-                />
-              ))}
-            </>
-          )
-        }
+    if (inAmpMode) {
+      if (process.env.NODE_ENV === 'production') {
+        return null
+      }
+      const ampDevFiles = [
+        ...buildManifest.devFiles,
+        ...buildManifest.polyfillFiles,
+        ...buildManifest.ampDevFiles,
+      ]
 
-        if (process.env.NODE_ENV !== 'production') {
-          if (this.props.crossOrigin)
-            console.warn(
-              'Warning: `NextScript` attribute `crossOrigin` is deprecated. https://nextjs.org/docs/messages/doc-crossorigin-deprecated'
-            )
-        }
+      return (
+        <>
+          {disableRuntimeJS ? null : (
+            <script
+              id="__NEXT_DATA__"
+              type="application/json"
+              nonce={this.props.nonce}
+              crossOrigin={this.props.crossOrigin || crossOrigin}
+              dangerouslySetInnerHTML={{
+                __html: NextScript.getInlineScriptSource(this.context),
+              }}
+              data-ampdevmode
+            />
+          )}
+          {ampDevFiles.map((file) => (
+            <script
+              key={file}
+              src={`${assetPrefix}/_next/${file}${devOnlyCacheBusterQueryString}`}
+              nonce={this.props.nonce}
+              crossOrigin={this.props.crossOrigin || crossOrigin}
+              data-ampdevmode
+            />
+          ))}
+        </>
+      )
+    }
 
-        const files: DocumentFiles = getDocumentFiles(
-          this.context.buildManifest,
-          this.context.__NEXT_DATA__.page,
-          inAmpMode
+    if (process.env.NODE_ENV !== 'production') {
+      if (this.props.crossOrigin)
+        console.warn(
+          'Warning: `NextScript` attribute `crossOrigin` is deprecated. https://nextjs.org/docs/messages/doc-crossorigin-deprecated'
         )
+    }
 
-        return (
-          <>
-            {!disableRuntimeJS && buildManifest.devFiles
-              ? buildManifest.devFiles.map((file: string) => (
-                  <script
-                    key={file}
-                    src={`${assetPrefix}/_next/${encodeURI(
-                      file
-                    )}${devOnlyCacheBusterQueryString}`}
-                    nonce={this.props.nonce}
-                    crossOrigin={this.props.crossOrigin || crossOrigin}
-                  />
-                ))
-              : null}
-            {disableRuntimeJS ? null : (
+    const files: DocumentFiles = getDocumentFiles(
+      this.context.buildManifest,
+      this.context.__NEXT_DATA__.page,
+      inAmpMode
+    )
+
+    return (
+      <>
+        {!disableRuntimeJS && buildManifest.devFiles
+          ? buildManifest.devFiles.map((file: string) => (
               <script
-                id="__NEXT_DATA__"
-                type="application/json"
+                key={file}
+                src={`${assetPrefix}/_next/${encodeURI(
+                  file
+                )}${devOnlyCacheBusterQueryString}`}
                 nonce={this.props.nonce}
                 crossOrigin={this.props.crossOrigin || crossOrigin}
-                dangerouslySetInnerHTML={{
-                  __html: NextScript.getInlineScriptSource(this.context),
-                }}
               />
-            )}
-            {disableOptimizedLoading &&
-              !disableRuntimeJS &&
-              this.getPolyfillScripts()}
-            {disableOptimizedLoading &&
-              !disableRuntimeJS &&
-              this.getPreNextScripts()}
-            {disableOptimizedLoading &&
-              !disableRuntimeJS &&
-              this.getDynamicChunks(files)}
-            {disableOptimizedLoading &&
-              !disableRuntimeJS &&
-              this.getScripts(files)}
-          </>
-        )
-      })
-      if (inAmpMode && process.env.NODE_ENV === 'production') {
-        return null
-      }
-      return content
-    }
-
-    return <DeferrableNextScript />
+            ))
+          : null}
+        {disableRuntimeJS ? null : (
+          <script
+            id="__NEXT_DATA__"
+            type="application/json"
+            nonce={this.props.nonce}
+            crossOrigin={this.props.crossOrigin || crossOrigin}
+            dangerouslySetInnerHTML={{
+              __html: NextScript.getInlineScriptSource(this.context),
+            }}
+          />
+        )}
+        {disableOptimizedLoading &&
+          !disableRuntimeJS &&
+          this.getPolyfillScripts()}
+        {disableOptimizedLoading &&
+          !disableRuntimeJS &&
+          this.getPreNextScripts()}
+        {disableOptimizedLoading &&
+          !disableRuntimeJS &&
+          this.getDynamicChunks(files)}
+        {disableOptimizedLoading && !disableRuntimeJS && this.getScripts(files)}
+      </>
+    )
   }
 }
 
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index d18e1f336b00..4fa5fa9a0fa8 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -1474,7 +1474,6 @@ export async function renderToHTML(
     head: documentResult.head,
     headTags: documentResult.headTags,
     styles: documentResult.styles,
-    useMaybeDeferContent,
     crossOrigin: renderOpts.crossOrigin,
     optimizeCss: renderOpts.optimizeCss,
     optimizeFonts: renderOpts.optimizeFonts,
@@ -1985,10 +1984,3 @@ async function streamToString(stream: ReadableStream<string>): Promise<string> {
     bufferedString += value
   }
 }
-
-export function useMaybeDeferContent(
-  _name: string,
-  contentFn: () => JSX.Element
-): [boolean, JSX.Element] {
-  return [false, contentFn()]
-}
diff --git a/packages/next/shared/lib/html-context.ts b/packages/next/shared/lib/html-context.ts
index 25baecbd7bd0..68ecc266d645 100644
--- a/packages/next/shared/lib/html-context.ts
+++ b/packages/next/shared/lib/html-context.ts
@@ -1,5 +1,5 @@
 import type { BuildManifest } from '../../server/get-page-files'
-import type { NEXT_DATA, MaybeDeferContentHook } from './utils'
+import type { NEXT_DATA } from './utils'
 
 import { createContext } from 'react'
 
@@ -29,7 +29,6 @@ export type HtmlProps = {
   disableOptimizedLoading?: boolean
   styles?: React.ReactElement[] | React.ReactFragment
   head?: Array<JSX.Element | null>
-  useMaybeDeferContent: MaybeDeferContentHook
   crossOrigin?: string
   optimizeCss?: boolean
   optimizeFonts?: boolean
diff --git a/packages/next/shared/lib/utils.ts b/packages/next/shared/lib/utils.ts
index f18e19f6cf45..c5aa734135bf 100644
--- a/packages/next/shared/lib/utils.ts
+++ b/packages/next/shared/lib/utils.ts
@@ -187,11 +187,6 @@ export type DocumentInitialProps = RenderPageResult & {
 
 export type DocumentProps = DocumentInitialProps & HtmlProps
 
-export type MaybeDeferContentHook = (
-  name: string,
-  contentFn: () => JSX.Element
-) => [boolean, JSX.Element]
-
 /**
  * Next `API` route request
  */
diff --git a/test/unit/use-maybe-defer-content.test.ts b/test/unit/use-maybe-defer-content.test.ts
deleted file mode 100644
index 41e274a4f2c5..000000000000
--- a/test/unit/use-maybe-defer-content.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-env jest */
-import { useMaybeDeferContent } from 'next/dist/server/render'
-import React from 'react'
-
-describe('useMaybeDeferContent', () => {
-  it('returns raw content when isDeferred is false', () => {
-    const rawContent = React.createElement('p', {}, 'hello world')
-    const [isDeferred, content] = useMaybeDeferContent('TEST', () => rawContent)
-    expect(isDeferred).toBe(false)
-    expect(content).toBe(rawContent)
-  })
-})
