Move implementation of `Html`/`Head`/`Main`/`NextScript` #31939

devknoll · 2021-11-29T21:14:00Z

In the future, the Document component is going to become a Server Component. This means that we would likely want Html/Head/Main/NextScript to become Server Components too, where rendering them results in a minimal Client Component tree. However, that isn't possible yet, because we still support class Document components, which are always Client Components (that happen to be only rendered on the Server).

Instead, we have to take a slight detour, as implemented by this PR. All of the Document components are replaced with stubs that resolve using context. For now, they just resolve to the previous implementation. In a follow-up PR, this same setup will be used to conditionally wrap the implementations with Server Component functionality (like using Suspense) using a higher-order component pattern.

ijjk · 2021-11-30T00:05:00Z

Failing test suites

Commit: 78722ea

test/integration/app-document/test/index.test.js

Document and App > Rendering via HTTP > _document > It adds crossOrigin to all scripts and preload links

Expand output

● Document and App › Rendering via HTTP › _document › It adds crossOrigin to all scripts and preload links

expect(received).toBeTruthy()

Received: false

  48 |         $('script, link[rel=preload]').each((index, element) => {
  49 |           expect($(element).attr('crossorigin') === crossOrigin).toBeTruthy()
> 50 |         })
     |           ^
  51 |       })
  52 |
  53 |       test('It renders ctx.renderPage with enhancer correctly', async () => {

  at Object.<anonymous> (integration/app-document/test/rendering.js:50:76)
  at initialize.Object.<anonymous>.exports.each (../node_modules/cheerio/lib/api/traversing.js:300:24)
  at Object.<anonymous> (integration/app-document/test/rendering.js:49:48)

ijjk · 2021-11-30T00:10:55Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
buildDuration	16.9s	17.6s	⚠️ +754ms
buildDurationCached	3.1s	3.3s	⚠️ +107ms
nodeModulesSize	346 MB	346 MB	⚠️ +6.93 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.739	2.887	⚠️ +0.15
/ avg req/sec	912.88	865.92	⚠️ -46.96
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.304	1.413	⚠️ +0.11
/error-in-render avg req/sec	1917.82	1769.83	⚠️ -147.99

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28.4 kB	28.4 kB	⚠️ +24 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.2 kB	72.2 kB	⚠️ +24 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.45 kB	4.45 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.3 kB	13.3 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	545 B	-1 B
withRouter.html gzip	527 B	526 B	-1 B
Overall change	1.6 kB	1.6 kB	-2 B

Diffs

Diff for main-HASH.js

@@ -7143,9 +7143,33 @@
       exports.normalizeRepeatedSlashes = normalizeRepeatedSlashes;
       exports.loadGetInitialProps = loadGetInitialProps;
       exports.formatWithValidation = formatWithValidation;
-      exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
+      exports.ModernDocumentContext = exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
       var _formatUrl = __webpack_require__(4611);
-      var _react = __webpack_require__(7294);
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+          newObj.default = obj;
+          return newObj;
+        }
+      }
       function execOnce(fn) {
         var used = false;
         var result;
@@ -7320,6 +7344,10 @@
       var HtmlContext = (0, _react).createContext(null);
       exports.HtmlContext = HtmlContext;
       if (false) {
+      }
+      var ModernDocumentContext = (0, _react).createContext(null);
+      exports.ModernDocumentContext = ModernDocumentContext;
+      if (false) {
       } //# sourceMappingURL=utils.js.map
 
       /***/

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4a0b3a17e8a0673d.js"
+      src="/_next/static/chunks/main-c5cde3506ed09a2c.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4a0b3a17e8a0673d.js"
+      src="/_next/static/chunks/main-c5cde3506ed09a2c.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4a0b3a17e8a0673d.js"
+      src="/_next/static/chunks/main-c5cde3506ed09a2c.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
buildDuration	19.6s	18.4s	-1.1s
buildDurationCached	3.3s	3.2s	-131ms
nodeModulesSize	346 MB	346 MB	⚠️ +6.93 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.785	3.013	⚠️ +0.23
/ avg req/sec	897.66	829.73	⚠️ -67.93
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.4	1.429	⚠️ +0.03
/error-in-render avg req/sec	1785.61	1749.15	⚠️ -36.46

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.6 kB	28.6 kB	⚠️ +29 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.5 kB	72.5 kB	⚠️ +29 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.47 kB	4.47 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.2 kB	13.2 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-mv-document-impl	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	526 B	⚠️ +1 B
Overall change	1.6 kB	1.6 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -7143,9 +7143,33 @@
       exports.normalizeRepeatedSlashes = normalizeRepeatedSlashes;
       exports.loadGetInitialProps = loadGetInitialProps;
       exports.formatWithValidation = formatWithValidation;
-      exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
+      exports.ModernDocumentContext = exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
       var _formatUrl = __webpack_require__(4611);
-      var _react = __webpack_require__(7294);
+      var _react = _interopRequireWildcard(__webpack_require__(7294));
+      function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+          return obj;
+        } else {
+          var newObj = {};
+          if (obj != null) {
+            for (var key in obj) {
+              if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                var desc =
+                  Object.defineProperty && Object.getOwnPropertyDescriptor
+                    ? Object.getOwnPropertyDescriptor(obj, key)
+                    : {};
+                if (desc.get || desc.set) {
+                  Object.defineProperty(newObj, key, desc);
+                } else {
+                  newObj[key] = obj[key];
+                }
+              }
+            }
+          }
+          newObj.default = obj;
+          return newObj;
+        }
+      }
       function execOnce(fn) {
         var used = false;
         var result;
@@ -7320,6 +7344,10 @@
       var HtmlContext = (0, _react).createContext(null);
       exports.HtmlContext = HtmlContext;
       if (false) {
+      }
+      var ModernDocumentContext = (0, _react).createContext(null);
+      exports.ModernDocumentContext = ModernDocumentContext;
+      if (false) {
       } //# sourceMappingURL=utils.js.map
 
       /***/

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4a0b3a17e8a0673d.js"
+      src="/_next/static/chunks/main-c5cde3506ed09a2c.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4a0b3a17e8a0673d.js"
+      src="/_next/static/chunks/main-c5cde3506ed09a2c.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4a0b3a17e8a0673d.js"
+      src="/_next/static/chunks/main-c5cde3506ed09a2c.js"
       defer=""
     ></script>
     <script

Commit: 78722ea

Since #31939 is going to move the `Document` components, we can't rely on `DefinePlugin` to provide environment variables. This PR passes them as render opts instead. We can't just force this to be bundled like e.g. `next/dynamic`, because we use it internally.

Since vercel#31939 is going to move the `Document` components, we can't rely on `DefinePlugin` to provide environment variables. This PR passes them as render opts instead. We can't just force this to be bundled like e.g. `next/dynamic`, because we use it internally.

ijjk added created-by: Chrome Aurora type: next labels Nov 29, 2021

This comment has been minimized.

Sign in to view

Move implementation of Head/Main/NextScript

a73c683

devknoll force-pushed the x-mv-document-impl branch from e0ded2a to a73c683 Compare November 29, 2021 21:47

This comment has been minimized.

Sign in to view

Merge branch 'canary' into x-mv-document-impl

5bdaf5b

devknoll force-pushed the x-mv-document-impl branch from dbe0422 to 5bdaf5b Compare November 29, 2021 22:19

This comment has been minimized.

Sign in to view

devknoll mentioned this pull request Nov 30, 2021

Stop using environment variables in pages/_document #31946

Merged

Merge branch 'canary' into x-mv-document-impl

d080e7a

devknoll force-pushed the x-mv-document-impl branch from 78722ea to d080e7a Compare November 30, 2021 17:24

devknoll closed this Mar 8, 2022

github-actions bot locked as resolved and limited conversation to collaborators Apr 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move implementation of `Html`/`Head`/`Main`/`NextScript` #31939

Move implementation of `Html`/`Head`/`Main`/`NextScript` #31939

devknoll commented Nov 29, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 30, 2021

ijjk commented Nov 30, 2021

Diffs

Diffs

Move implementation of Html/Head/Main/NextScript #31939

Move implementation of Html/Head/Main/NextScript #31939

Conversation

devknoll commented Nov 29, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 30, 2021

Failing test suites

ijjk commented Nov 30, 2021

Stats from current PR

Diffs

Diffs

Move implementation of `Html`/`Head`/`Main`/`NextScript` #31939

Move implementation of `Html`/`Head`/`Main`/`NextScript` #31939

devknoll commented Nov 29, 2021 •

edited

Loading