Clean up Document in preparation for streaming

[devknoll]

We generate the HTML for a document in two steps: First, we generate the body (i.e. everything under <div id="__next">). Then we generate the rest of the document and embed the body in it.

This doesn't work when the body is a stream, because React can't render the body for us unless we buffer it, and buffering it means not streaming. This PR takes the existing approach for AMP and uses it for all scenarios: instead of rendering HTML, we just render a placeholder that we can replace with HTML later. This will be used in a follow-up PR to let us know where to concatenate the body stream.

I also used the opportunity to split out HtmlContext from DocumentProps, as these will not be the same thing with functional document components.

[ijjk]

Failing test suites

Commit: 663ae28

test/acceptance/ReactRefreshLogBox.dev.test.js

• server-side only compilation errors

Expand output

● server-side only compilation errors

ScriptTimeoutError: script timeout
  (Session info: headless chrome=92.0.4515.131)

  72 |
  73 |             // Wait for application to re-hydrate:
> 74 |             await browser.executeAsyncScript(function () {
     |             ^
  75 |               var callback = arguments[arguments.length - 1]
  76 |               if (window.__NEXT_HYDRATED) {
  77 |                 callback()

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at Proxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.patch (acceptance/helpers.js:74:13)
  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:1422:3)

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
buildDuration	18.1s	18s	-141ms
buildDurationCached	3.9s	4.1s	⚠️ +222ms
nodeModulesSize	49.1 MB	49.1 MB	-1.88 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.213	3.236	⚠️ +0.02
/ avg req/sec	777.99	772.47	⚠️ -5.52
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.088	2.022	-0.07
/error-in-render avg req/sec	1197.25	1236.12	+38.87

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

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.1 kB	23.1 kB	⚠️ +21 B
webpack-HASH.js gzip	1.5 kB	1.5 kB	✓
Overall change	67 kB	67 kB	⚠️ +21 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
_app-HASH.js gzip	980 B	980 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	904 B	904 B	✓
image-HASH.js gzip	4.13 kB	4.13 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	12.8 kB	12.8 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
_buildManifest.js gzip	491 B	491 B	✓
Overall change	491 B	491 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
index.html gzip	531 B	531 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	524 B	523 B	-1 B
Overall change	1.6 kB	1.6 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -6959,10 +6959,12 @@
       exports.normalizeRepeatedSlashes = normalizeRepeatedSlashes;
       exports.loadGetInitialProps = loadGetInitialProps;
       exports.formatWithValidation = formatWithValidation;
-      exports.ST = exports.SP = exports.urlObjectKeys = void 0;
+      exports.ST = exports.SP = exports.HtmlContext = exports.urlObjectKeys = void 0;
 
       var _formatUrl = __webpack_require__(2065);
 
+      var _react = __webpack_require__(7294);
+
       function execOnce(fn) {
         var used = false;
         var result;
@@ -7165,6 +7167,11 @@
       })(/*#__PURE__*/ _wrapNativeSuper(Error));
 
       exports.DecodeError = DecodeError;
+      var HtmlContext = (0, _react).createContext(null);
+      exports.HtmlContext = HtmlContext;
+
+      if (false) {
+      }
 
       /***/
     },

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0aefa51ef739e94d458c.js"
+      src="/_next/static/chunks/main-191f459380b9431f3717.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0aefa51ef739e94d458c.js"
+      src="/_next/static/chunks/main-191f459380b9431f3717.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-0aefa51ef739e94d458c.js"
+      src="/_next/static/chunks/main-191f459380b9431f3717.js"
       defer=""
     ></script>
     <script

---

Webpack 4 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
buildDuration	14.8s	14.5s	-356ms
buildDurationCached	5.8s	5.8s	⚠️ +48ms
nodeModulesSize	49.1 MB	49.1 MB	-1.88 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.252	3.343	⚠️ +0.09
/ avg req/sec	768.77	747.86	⚠️ -20.91
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.145	2.016	-0.13
/error-in-render avg req/sec	1165.46	1240.12	+74.66

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

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
17.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	14 kB	14 kB	⚠️ +28 B
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	67.8 kB	67.9 kB	⚠️ +28 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
_app-HASH.js gzip	965 B	965 B	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.95 kB	2.95 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.7 kB	17.7 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
_buildManifest.js gzip	498 B	498 B	✓
Overall change	498 B	498 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js x-document-context-cleaning	Change
index.html gzip	577 B	577 B	✓
link.html gzip	589 B	589 B	✓
withRouter.html gzip	569 B	569 B	✓
Overall change	1.74 kB	1.74 kB	✓

Diffs

Diff for 677f882d2ed8..c4df.HASH.js

@@ -188,10 +188,12 @@
       exports.normalizeRepeatedSlashes = normalizeRepeatedSlashes;
       exports.loadGetInitialProps = loadGetInitialProps;
       exports.formatWithValidation = formatWithValidation;
-      exports.ST = exports.SP = exports.urlObjectKeys = void 0;
+      exports.ST = exports.SP = exports.HtmlContext = exports.urlObjectKeys = void 0;
 
       var _formatUrl = __webpack_require__("JHdK");
 
+      var _react = __webpack_require__("q1tI");
+
       function execOnce(fn) {
         var used = false;
         var result;
@@ -394,6 +396,11 @@
       })(/*#__PURE__*/ _wrapNativeSuper(Error));
 
       exports.DecodeError = DecodeError;
+      var HtmlContext = (0, _react).createContext(null);
+      exports.HtmlContext = HtmlContext;
+
+      if (false) {
+      }
 
       /***/
     },

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.87a4eb712c6ed49920c1.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.486b78ffcde253c6f17c.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.87a4eb712c6ed49920c1.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.486b78ffcde253c6f17c.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.87a4eb712c6ed49920c1.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.486b78ffcde253c6f17c.js"
       defer=""
     ></script>
     <script

Commit: b36255b