diff --git a/packages/next/next-server/lib/utils.ts b/packages/next/next-server/lib/utils.ts index cbd63712b0e64..ebc6712f1e00d 100644 --- a/packages/next/next-server/lib/utils.ts +++ b/packages/next/next-server/lib/utils.ts @@ -169,6 +169,7 @@ export type DocumentProps = DocumentInitialProps & { htmlProps: any bodyTags: any[] headTags: any[] + unstable_runtimeJS?: false } /** diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx index e30f5423c2933..69ff90700551c 100644 --- a/packages/next/next-server/server/render.tsx +++ b/packages/next/next-server/server/render.tsx @@ -159,6 +159,7 @@ export type RenderOptsPartial = { params?: ParsedUrlQuery previewProps: __ApiPreviewProps basePath: string + unstable_runtimeJS?: false } export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial @@ -200,6 +201,7 @@ function renderDocument( customServer, gip, appGip, + unstable_runtimeJS, }: RenderOpts & { props: any docProps: DocumentInitialProps @@ -268,6 +270,7 @@ function renderDocument( htmlProps, bodyTags, headTags, + unstable_runtimeJS, ...docProps, })} @@ -772,6 +775,11 @@ export async function renderToHTML( let html = renderDocument(Document, { ...renderOpts, + // Only enabled in production as development mode has features relying on HMR (style injection for example) + unstable_runtimeJS: + process.env.NODE_ENV === 'production' + ? pageConfig.unstable_runtimeJS + : undefined, dangerousAsPath: router.asPath, ampState, props, diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx index 9014be2d30644..1a078a14a2766 100644 --- a/packages/next/pages/_document.tsx +++ b/packages/next/pages/_document.tsx @@ -304,7 +304,9 @@ export class Head extends Component< __NEXT_DATA__, dangerousAsPath, headTags, + unstable_runtimeJS, } = this.context._documentProps + const disableRuntimeJS = unstable_runtimeJS === false const { _devOnlyInvalidateCacheQueryString } = this.context const { page, buildId } = __NEXT_DATA__ @@ -490,7 +492,7 @@ export class Head extends Component< /> )} {this.getCssLinks()} - {page !== '/_error' && ( + {!disableRuntimeJS && page !== '/_error' && ( )} - - {this.getPreloadDynamicChunks()} - {this.getPreloadMainLinks()} + {!disableRuntimeJS && ( + + )} + {!disableRuntimeJS && this.getPreloadDynamicChunks()} + {!disableRuntimeJS && this.getPreloadMainLinks()} {this.context._documentProps.isDevelopment && this.context._documentProps.hasCssMode && ( // this element is used to mount development styles so the @@ -532,7 +536,7 @@ export class Head extends Component< {styles || null} )} - {this.getFidPolyfill()} + {!disableRuntimeJS && this.getFidPolyfill()} {React.createElement(React.Fragment, {}, ...(headTags || []))} ) @@ -669,7 +673,9 @@ export class NextScript extends Component { devFiles, __NEXT_DATA__, bodyTags, + unstable_runtimeJS, } = this.context._documentProps + const disableRuntimeJS = unstable_runtimeJS === false const { _devOnlyInvalidateCacheQueryString } = this.context @@ -790,7 +796,7 @@ export class NextScript extends Component { return ( <> - {devFiles + {!disableRuntimeJS && devFiles ? devFiles.map( (file: string) => !file.match(/\.js\.map/) && ( @@ -818,7 +824,7 @@ export class NextScript extends Component { }} /> )} - {process.env.__NEXT_MODERN_BUILD ? ( + {process.env.__NEXT_MODERN_BUILD && !disableRuntimeJS ? (