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.

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

Clean up Document in preparation for streaming #28032

Merged
merged 10 commits into from Aug 13, 2021

Conversation

devknoll
Copy link
Contributor

@devknoll devknoll commented Aug 12, 2021

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 ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Aug 12, 2021
@devknoll devknoll changed the title Clean up Document Rendering Clean up Document in preparation for streaming Aug 12, 2021
@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Aug 12, 2021

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)

@devknoll devknoll marked this pull request as ready for review Aug 12, 2021
@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

ijjk
ijjk approved these changes Aug 12, 2021
@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Aug 13, 2021

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

@kodiakhq kodiakhq bot merged commit 08a2478 into vercel:canary Aug 13, 2021
31 checks passed
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants