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 (
+
+ {!hasConcurrentFeatures && this.context.isDevelopment && (
<>
- {head}
-
+
>
- )
- }
+ )}
+ {head}
+
+
+ {children}
+ {optimizeFonts && }
- const getDynamicScriptPreloads = () => {
- return (
+ {inAmpMode && (
<>
+
+ {!hasCanonicalRel && (
+
+ )}
+ {/* https://www.ampproject.org/docs/fundamentals/optimize_amp#optimize-the-amp-runtime-loading */}
+
+
+
+
+
+ >
+ )}
+ {!inAmpMode && (
+ <>
+ {!hasAmphtmlRel && hybridAmp && (
+
+ )}
+ {!optimizeCss && this.getCssLinks(files)}
+ {!optimizeCss && }
+
{!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 && }
+ {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 )
+
+ )}
+ {styles || null}
>
- )
- })
-
- return (
-
- {!hasConcurrentFeatures && this.context.isDevelopment && (
- <>
-
-
- >
- )}
- {!isDeferred && getDynamicHeadContent()}
-
- {children}
- {optimizeFonts && }
-
- {inAmpMode && (
- <>
-
- {!hasCanonicalRel && (
-
- )}
- {/* https://www.ampproject.org/docs/fundamentals/optimize_amp#optimize-the-amp-runtime-loading */}
-
-
-
-
-
- >
- )}
- {!inAmpMode && (
- <>
- {!hasAmphtmlRel && hybridAmp && (
-
- )}
- {!optimizeCss && this.getCssLinks(files)}
- {!optimizeCss && }
-
- {!isDeferred && getDynamicScriptPreloads()}
-
- {!disableOptimizedLoading &&
- !disableRuntimeJS &&
- this.getPolyfillScripts()}
-
- {!isDeferred && getDynamicScriptContent()}
-
- {optimizeCss && this.getCssLinks(files)}
- {optimizeCss && }
- {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
)
-
- )}
- {styles || null}
- >
- )}
- {React.createElement(React.Fragment, {}, ...(headTags || []))}
-
- )
- }
-
- return
+ )}
+ {React.createElement(React.Fragment, {}, ...(headTags || []))}
+
+ )
}
}
@@ -835,110 +795,99 @@ export class NextScript extends Component {
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 : (
-
- )}
- {ampDevFiles.map((file) => (
-
- ))}
- >
- )
- }
+ 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 : (
+
+ )}
+ {ampDevFiles.map((file) => (
+
+ ))}
+ >
+ )
+ }
- 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) => (
-
- ))
- : 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) => (
- )}
- {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
+ ))
+ : null}
+ {disableRuntimeJS ? null : (
+
+ )}
+ {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 ce5b2a5d9a42..c5be24e7da9c 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): Promise {
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
- 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)
- })
-})