From 7b0fe0d73b2a8eabc535afe171a91987b60163fa Mon Sep 17 00:00:00 2001 From: Janicklas Ralph Date: Thu, 13 May 2021 03:08:07 -0700 Subject: [PATCH 01/18] Fix no-sync-scripts doc (#25062) ## Bug Fix no-sync-scripts doc --- errors/no-sync-scripts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/no-sync-scripts.md b/errors/no-sync-scripts.md index 4af7ef58b521138..1788236d85df141 100644 --- a/errors/no-sync-scripts.md +++ b/errors/no-sync-scripts.md @@ -16,7 +16,7 @@ import Script from 'next/experimental-script' const Home = () => { return (
- +
Home Page
) From 1cb83c1b351550f1b74eb7167e11ee62a6c1da2b Mon Sep 17 00:00:00 2001 From: Marcos Taron Date: Thu, 13 May 2021 07:39:21 -0300 Subject: [PATCH 02/18] update `create-next-app` documentation (#25079) Update `create-next-app` documentation based in #25010 issue. ## Documentation / Examples - [X] Make sure the linting passes --- docs/api-reference/create-next-app.md | 2 +- packages/create-next-app/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api-reference/create-next-app.md b/docs/api-reference/create-next-app.md index 1b96f94179d2016..24f4255df576c35 100644 --- a/docs/api-reference/create-next-app.md +++ b/docs/api-reference/create-next-app.md @@ -18,7 +18,7 @@ yarn create next-app - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory. - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar` -- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed +- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app` ### Why use Create Next App? diff --git a/packages/create-next-app/README.md b/packages/create-next-app/README.md index deeb80d65567128..8e629058467a3bb 100644 --- a/packages/create-next-app/README.md +++ b/packages/create-next-app/README.md @@ -19,7 +19,7 @@ npx create-next-app blog-app - **--ts, --typescript** - Initialize as a TypeScript project. - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory. - **--example-path <path-to-example>** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar` -- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed +- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend to run `yarn create next-app` ## Why use Create Next App? From eaf74c1cb865c97e3070a8625c2c48b726ec517e Mon Sep 17 00:00:00 2001 From: Janicklas Ralph Date: Thu, 13 May 2021 03:39:36 -0700 Subject: [PATCH 03/18] Improving script loading strategy (#24939) --- packages/next/build/webpack-config.ts | 1 + packages/next/export/index.ts | 3 + packages/next/export/worker.ts | 5 + packages/next/next-server/lib/utils.ts | 1 + .../next/next-server/server/config-shared.ts | 2 + .../next/next-server/server/next-server.ts | 3 + packages/next/next-server/server/render.tsx | 3 + packages/next/pages/_document.tsx | 252 +++++++++++------- .../optimized-loading/next.config.js | 3 + .../optimized-loading/pages/index.js | 10 + .../optimized-loading/pages/page1.js | 9 + .../optimized-loading/test/index.test.js | 75 ++++++ 12 files changed, 271 insertions(+), 96 deletions(-) create mode 100644 test/integration/optimized-loading/next.config.js create mode 100644 test/integration/optimized-loading/pages/index.js create mode 100644 test/integration/optimized-loading/pages/page1.js create mode 100644 test/integration/optimized-loading/test/index.test.js diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 9f3c72a177d24fd..438796298254afe 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1260,6 +1260,7 @@ export default async function getBaseWebpackConfig( pageEnv: config.experimental.pageEnv, excludeDefaultMomentLocales: config.future.excludeDefaultMomentLocales, assetPrefix: config.assetPrefix, + disableOptimizedLoading: config.experimental.disableOptimizedLoading, target, reactProductionProfiling, webpack: !!config.webpack, diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts index 7d8cc3fca103494..bdc3ad525c0032d 100644 --- a/packages/next/export/index.ts +++ b/packages/next/export/index.ts @@ -369,6 +369,7 @@ export default async function exportApp( defaultLocale: i18n?.defaultLocale, domainLocales: i18n?.domains, trailingSlash: nextConfig.trailingSlash, + disableOptimizedLoading: nextConfig.experimental.disableOptimizedLoading, } const { serverRuntimeConfig, publicRuntimeConfig } = nextConfig @@ -541,6 +542,8 @@ export default async function exportApp( optimizeFonts: nextConfig.optimizeFonts, optimizeImages: nextConfig.experimental.optimizeImages, optimizeCss: nextConfig.experimental.optimizeCss, + disableOptimizedLoading: + nextConfig.experimental.disableOptimizedLoading, parentSpanId: pageExportSpan.id, }) diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts index 68f03b80f4ba674..057c4c5f1ebd546 100644 --- a/packages/next/export/worker.ts +++ b/packages/next/export/worker.ts @@ -52,6 +52,7 @@ interface ExportPageInput { optimizeFonts: boolean optimizeImages?: boolean optimizeCss: any + disableOptimizedLoading: any parentSpanId: any } @@ -70,6 +71,7 @@ interface RenderOpts { ampSkipValidation?: boolean optimizeFonts?: boolean optimizeImages?: boolean + disableOptimizedLoading?: boolean optimizeCss?: any fontManifest?: FontManifest locales?: string[] @@ -98,6 +100,7 @@ export default async function exportPage({ optimizeFonts, optimizeImages, optimizeCss, + disableOptimizedLoading, }: ExportPageInput): Promise { const exportPageSpan = trace('export-page-worker', parentSpanId) @@ -284,6 +287,7 @@ export default async function exportPage({ optimizeImages, /// @ts-ignore optimizeCss, + disableOptimizedLoading, distDir, fontManifest: optimizeFonts ? requireFontManifest(distDir, serverless) @@ -357,6 +361,7 @@ export default async function exportPage({ optimizeFonts, optimizeImages, optimizeCss, + disableOptimizedLoading, fontManifest: optimizeFonts ? requireFontManifest(distDir, serverless) : null, diff --git a/packages/next/next-server/lib/utils.ts b/packages/next/next-server/lib/utils.ts index eaaa30b2c806ce3..6af8e33dbdb7f67 100644 --- a/packages/next/next-server/lib/utils.ts +++ b/packages/next/next-server/lib/utils.ts @@ -193,6 +193,7 @@ export type DocumentProps = DocumentInitialProps & { devOnlyCacheBusterQueryString: string scriptLoader: { afterInteractive?: string[]; beforeInteractive?: any[] } locale?: string + disableOptimizedLoading?: boolean } /** diff --git a/packages/next/next-server/server/config-shared.ts b/packages/next/next-server/server/config-shared.ts index fb45863f3269e17..f64f09bef497d09 100644 --- a/packages/next/next-server/server/config-shared.ts +++ b/packages/next/next-server/server/config-shared.ts @@ -61,6 +61,7 @@ export type NextConfig = { [key: string]: any } & { eslint?: boolean reactRoot: boolean enableBlurryPlaceholder: boolean + disableOptimizedLoading: boolean } } @@ -118,6 +119,7 @@ export const defaultConfig: NextConfig = { eslint: false, reactRoot: Number(process.env.NEXT_PRIVATE_REACT_ROOT) > 0, enableBlurryPlaceholder: false, + disableOptimizedLoading: true, }, future: { strictPostcssConfiguration: false, diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts index 0b367f43a1a4e18..4480c938cdecd62 100644 --- a/packages/next/next-server/server/next-server.ts +++ b/packages/next/next-server/server/next-server.ts @@ -157,6 +157,7 @@ export default class Server { images: string fontManifest: FontManifest optimizeImages: boolean + disableOptimizedLoading: boolean optimizeCss: any locale?: string locales?: string[] @@ -217,6 +218,8 @@ export default class Server { : null, optimizeImages: !!this.nextConfig.experimental.optimizeImages, optimizeCss: this.nextConfig.experimental.optimizeCss, + disableOptimizedLoading: this.nextConfig.experimental + .disableOptimizedLoading, domainLocales: this.nextConfig.i18n?.domains, distDir: this.distDir, } diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx index b00e19fb162d4dd..6508c887415a10a 100644 --- a/packages/next/next-server/server/render.tsx +++ b/packages/next/next-server/server/render.tsx @@ -190,6 +190,7 @@ export type RenderOptsPartial = { locales?: string[] defaultLocale?: string domainLocales?: DomainLocales + disableOptimizedLoading?: boolean } export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial @@ -234,6 +235,7 @@ function renderDocument( defaultLocale, domainLocales, isPreview, + disableOptimizedLoading, }: RenderOpts & { props: any docComponentsRendered: DocumentProps['docComponentsRendered'] @@ -305,6 +307,7 @@ function renderDocument( devOnlyCacheBusterQueryString, scriptLoader, locale, + disableOptimizedLoading, ...docProps, })} diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx index 98d1d7e1907c06a..d3a486a0e4de99c 100644 --- a/packages/next/pages/_document.tsx +++ b/packages/next/pages/_document.tsx @@ -51,6 +51,115 @@ function getDocumentFiles( } } +function getPolyfillScripts(context: DocumentProps, props: OriginProps) { + // polyfills.js has to be rendered as nomodule without async + // It also has to be the first script to load + const { + assetPrefix, + buildManifest, + devOnlyCacheBusterQueryString, + disableOptimizedLoading, + } = context + + return buildManifest.polyfillFiles + .filter( + (polyfill) => polyfill.endsWith('.js') && !polyfill.endsWith('.module.js') + ) + .map((polyfill) => ( +