Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove useMaybeDeferContent hook #34506

Merged
merged 2 commits into from
Feb 18, 2022
Merged

Remove useMaybeDeferContent hook #34506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6edc1a7
Remove useMaybeDeferContent hook
devknoll Feb 18, 2022
1e59b09
Merge branch 'canary' into x-rm-use-deferred-content-hook
devknoll Feb 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 24 additions & 75 deletions packages/next/pages/_document.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -492,7 +492,6 @@ export class Head extends Component<
unstable_runtimeJS, unstable_runtimeJS,
unstable_JsPreload, unstable_JsPreload,
disableOptimizedLoading, disableOptimizedLoading,
useMaybeDeferContent,
optimizeCss, optimizeCss,
optimizeFonts, optimizeFonts,
runtime, runtime,
Expand Down Expand Up @@ -610,59 +609,6 @@ export class Head extends Component<
inAmpMode inAmpMode
) )


// Must use nested component to allow use of a custom hook
const DeferrableHead = () => {
const getDynamicHeadContent = () => {
return (
<>
{head}
<meta
name="next-head-count"
content={React.Children.count(head || []).toString()}
/>
</>
)
}

const getDynamicScriptPreloads = () => {
return (
<>
{!disableRuntimeJS &&
!disableJsPreload &&
this.getPreloadDynamicChunks()}
{!disableRuntimeJS &&
!disableJsPreload &&
this.getPreloadMainLinks(files)}
</>
)
}

const getDynamicScriptContent = () => {
return (
<>
{!disableOptimizedLoading &&
!disableRuntimeJS &&
this.getPreNextScripts()}
{!disableOptimizedLoading &&
!disableRuntimeJS &&
this.getDynamicChunks(files)}
{!disableOptimizedLoading &&
!disableRuntimeJS &&
this.getScripts(files)}
</>
)
}

const [isDeferred] = useMaybeDeferContent('HEAD', () => {
return (
<>
{getDynamicHeadContent()}
{getDynamicScriptPreloads()}
{getDynamicScriptContent()}
</>
)
})

return ( return (
<head {...this.props}> <head {...this.props}>
{!hasConcurrentFeatures && this.context.isDevelopment && ( {!hasConcurrentFeatures && this.context.isDevelopment && (
Expand All @@ -686,7 +632,11 @@ export class Head extends Component<
</noscript> </noscript>
</> </>
)} )}
{!isDeferred && getDynamicHeadContent()} {head}
<meta
name="next-head-count"
content={React.Children.count(head || []).toString()}
/>


{children} {children}
{optimizeFonts && <meta name="next-font-preconnect" />} {optimizeFonts && <meta name="next-font-preconnect" />}
Expand Down Expand Up @@ -738,13 +688,26 @@ export class Head extends Component<
{!optimizeCss && this.getCssLinks(files)} {!optimizeCss && this.getCssLinks(files)}
{!optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />} {!optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}


{!isDeferred && getDynamicScriptPreloads()} {!disableRuntimeJS &&
!disableJsPreload &&
this.getPreloadDynamicChunks()}
{!disableRuntimeJS &&
!disableJsPreload &&
this.getPreloadMainLinks(files)}


{!disableOptimizedLoading && {!disableOptimizedLoading &&
!disableRuntimeJS && !disableRuntimeJS &&
this.getPolyfillScripts()} this.getPolyfillScripts()}


{!isDeferred && getDynamicScriptContent()} {!disableOptimizedLoading &&
!disableRuntimeJS &&
this.getPreNextScripts()}
{!disableOptimizedLoading &&
!disableRuntimeJS &&
this.getDynamicChunks(files)}
{!disableOptimizedLoading &&
!disableRuntimeJS &&
this.getScripts(files)}


{optimizeCss && this.getCssLinks(files)} {optimizeCss && this.getCssLinks(files)}
{optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />} {optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}
Expand All @@ -761,9 +724,6 @@ export class Head extends Component<
</head> </head>
) )
} }

return <DeferrableHead />
}
} }


export function Main() { export function Main() {
Expand Down Expand Up @@ -835,17 +795,16 @@ export class NextScript extends Component<OriginProps> {
docComponentsRendered, docComponentsRendered,
devOnlyCacheBusterQueryString, devOnlyCacheBusterQueryString,
disableOptimizedLoading, disableOptimizedLoading,
useMaybeDeferContent,
crossOrigin, crossOrigin,
} = this.context } = this.context
const disableRuntimeJS = unstable_runtimeJS === false const disableRuntimeJS = unstable_runtimeJS === false


docComponentsRendered.NextScript = true docComponentsRendered.NextScript = true


// Must nest component to use custom hook
const DeferrableNextScript = () => {
const [, content] = useMaybeDeferContent('NEXT_SCRIPT', () => {
if (inAmpMode) { if (inAmpMode) {
if (process.env.NODE_ENV === 'production') {
return null
}
const ampDevFiles = [ const ampDevFiles = [
...buildManifest.devFiles, ...buildManifest.devFiles,
...buildManifest.polyfillFiles, ...buildManifest.polyfillFiles,
Expand Down Expand Up @@ -926,19 +885,9 @@ export class NextScript extends Component<OriginProps> {
{disableOptimizedLoading && {disableOptimizedLoading &&
!disableRuntimeJS && !disableRuntimeJS &&
this.getDynamicChunks(files)} this.getDynamicChunks(files)}
{disableOptimizedLoading && {disableOptimizedLoading && !disableRuntimeJS && this.getScripts(files)}
!disableRuntimeJS &&
this.getScripts(files)}
</> </>
) )
})
if (inAmpMode && process.env.NODE_ENV === 'production') {
return null
}
return content
}

return <DeferrableNextScript />
} }
} }


Expand Down
8 changes: 0 additions & 8 deletions packages/next/server/render.tsx
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -1474,7 +1474,6 @@ export async function renderToHTML(
head: documentResult.head, head: documentResult.head,
headTags: documentResult.headTags, headTags: documentResult.headTags,
styles: documentResult.styles, styles: documentResult.styles,
useMaybeDeferContent,
crossOrigin: renderOpts.crossOrigin, crossOrigin: renderOpts.crossOrigin,
optimizeCss: renderOpts.optimizeCss, optimizeCss: renderOpts.optimizeCss,
optimizeFonts: renderOpts.optimizeFonts, optimizeFonts: renderOpts.optimizeFonts,
Expand Down Expand Up @@ -1985,10 +1984,3 @@ async function streamToString(stream: ReadableStream<string>): Promise<string> {
bufferedString += value bufferedString += value
} }
} }

export function useMaybeDeferContent(
_name: string,
contentFn: () => JSX.Element
): [boolean, JSX.Element] {
return [false, contentFn()]
}
3 changes: 1 addition & 2 deletions packages/next/shared/lib/html-context.ts
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { BuildManifest } from '../../server/get-page-files' 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' import { createContext } from 'react'


Expand Down Expand Up @@ -29,7 +29,6 @@ export type HtmlProps = {
disableOptimizedLoading?: boolean disableOptimizedLoading?: boolean
styles?: React.ReactElement[] | React.ReactFragment styles?: React.ReactElement[] | React.ReactFragment
head?: Array<JSX.Element | null> head?: Array<JSX.Element | null>
useMaybeDeferContent: MaybeDeferContentHook
crossOrigin?: string crossOrigin?: string
optimizeCss?: boolean optimizeCss?: boolean
optimizeFonts?: boolean optimizeFonts?: boolean
Expand Down
5 changes: 0 additions & 5 deletions packages/next/shared/lib/utils.ts
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -187,11 +187,6 @@ export type DocumentInitialProps = RenderPageResult & {


export type DocumentProps = DocumentInitialProps & HtmlProps export type DocumentProps = DocumentInitialProps & HtmlProps


export type MaybeDeferContentHook = (
name: string,
contentFn: () => JSX.Element
) => [boolean, JSX.Element]

/** /**
* Next `API` route request * Next `API` route request
*/ */
Expand Down
12 changes: 0 additions & 12 deletions test/unit/use-maybe-defer-content.test.ts
View file
Open in desktop

This file was deleted.