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

Fix hydration with custom _app and granular chunks #10144

Merged
merged 7 commits into from Jan 17, 2020

Conversation

ijjk
Copy link
Member

@ijjk ijjk commented Jan 17, 2020

This fixes hydration failing when a user adds a custom _app and granular chunks causes the router to be moved separately making the router no longer able to be loaded since hydration relies on it. It makes sure the router is present now by adding an import 'next/router' automatically for custom _app usage

This also adds a test to prevent regression

@ijjk ijjk added the kind: bug Confirmed bug that is on the backlog label Jan 17, 2020
@ijjk ijjk added this to the 9.2.1 milestone Jan 17, 2020
@ijjk
Copy link
Member Author

ijjk commented Jan 17, 2020

Stats from current PR

Default Server Mode
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
buildDuration 15.4s 15.3s -9ms
nodeModulesSize 48.9 MB 48.9 MB ⚠️ +773 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..8249.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.module.js gzip 4.17 kB 4.17 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB
withRouter.html gzip 1.02 kB 1.02 kB
Overall change 3.07 kB 3.07 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
buildDuration 16.2s 15.7s -543ms
nodeModulesSize 48.9 MB 48.9 MB ⚠️ +773 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..8249.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.module.js gzip 4.17 kB 4.17 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_error.js gzip 77.9 kB 77.9 kB
hooks.html gzip 1.06 kB 1.06 kB
index.js gzip 78.1 kB 78.1 kB
link.js gzip 80.6 kB 80.6 kB
routerDirect.js gzip 78.2 kB 78.2 kB
withRouter.js gzip 78.3 kB 78.3 kB
Overall change 394 kB 394 kB

Commit: 5b734df

@ijjk
Copy link
Member Author

ijjk commented Jan 17, 2020

Stats from current PR

Default Server Mode
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
buildDuration 13.2s 13.3s ⚠️ +102ms
nodeModulesSize 48.9 MB 48.9 MB ⚠️ +783 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..8249.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.module.js gzip 4.17 kB 4.17 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB
withRouter.html gzip 1.02 kB 1.02 kB
Overall change 3.07 kB 3.07 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
buildDuration 13.7s 14.1s ⚠️ +342ms
nodeModulesSize 48.9 MB 48.9 MB ⚠️ +783 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..8249.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.module.js gzip 4.17 kB 4.17 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.js gzip 1.33 kB 1.33 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB
Client Pages Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.module.js gzip 757 B 757 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.41 kB
Client Build Manifests
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_error.js gzip 77.9 kB 77.9 kB
hooks.html gzip 1.06 kB 1.06 kB
index.js gzip 78.1 kB 78.1 kB
link.js gzip 80.6 kB 80.6 kB
routerDirect.js gzip 78.2 kB 78.2 kB
withRouter.js gzip 78.3 kB 78.3 kB
Overall change 394 kB 394 kB

Commit: 5183144

Copy link
Contributor

@developit developit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ijjk
Copy link
Member Author

ijjk commented Jan 17, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
buildDuration 11.1s 11.2s ⚠️ +86ms
nodeModulesSize 48.9 MB 48.9 MB ⚠️ +466 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..8249.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.module.js gzip 4.17 kB 4.17 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.js gzip 1.33 kB 1.34 kB ⚠️ +6 B
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB ⚠️ +6 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.module.js gzip 757 B 769 B ⚠️ +12 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.42 kB ⚠️ +12 B
Client Build Manifests
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB
withRouter.html gzip 1.02 kB 1.02 kB
Overall change 3.07 kB 3.07 kB

Diffs

Diff for _app.js
@@ -95,6 +95,13 @@
       /***/
     },
 
+    /***/ 0: /***/ function(module, exports, __webpack_require__) {
+      __webpack_require__('e9+W')
+      module.exports = __webpack_require__('nOHt')
+
+      /***/
+    },
+
     /***/ ApPD: /***/ function(module, exports, __webpack_require__) {
       // 19.1.2.9 Object.getPrototypeOf(O)
       var toObject = __webpack_require__('JB68')
@@ -142,8 +149,6 @@
       var _utils = __webpack_require__('g/15')
 
       exports.AppInitialProps = _utils.AppInitialProps
-
-      __webpack_require__('nOHt')
       /**
        * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
        * This allows for keeping state between navigation, custom error handling, injecting additional data.
@@ -389,5 +394,5 @@
       /***/
     },
   },
-  [['e9+W', 0, 2, 1, 3, 4]],
+  [[0, 0, 2, 1, 3, 4]],
 ])
Diff for _app.module.js
@@ -69,6 +69,13 @@
       /***/
     },
 
+    /***/ 0: /***/ function(module, exports, __webpack_require__) {
+      __webpack_require__('e9+W')
+      module.exports = __webpack_require__('nOHt')
+
+      /***/
+    },
+
     /***/ B5Ud: /***/ function(module, exports, __webpack_require__) {
       'use strict'
 
@@ -90,8 +97,6 @@
       var _utils = __webpack_require__('g/15')
 
       exports.AppInitialProps = _utils.AppInitialProps
-
-      __webpack_require__('nOHt')
       /**
        * `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
        * This allows for keeping state between navigation, custom error handling, injecting additional data.
@@ -218,5 +223,5 @@
       /***/
     },
   },
-  [['e9+W', 0, 1, 2, 3]],
+  [[0, 0, 1, 2, 3]],
 ])

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
buildDuration 11.5s 11.6s ⚠️ +96ms
nodeModulesSize 48.9 MB 48.9 MB ⚠️ +466 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.js gzip 5.11 kB 5.11 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..8249.js gzip 13.7 kB 13.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.5 kB 67.5 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
main-HASH.module.js gzip 4.17 kB 4.17 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.5 kB 12.5 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62.1 kB 62.1 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.js gzip 1.33 kB 1.34 kB ⚠️ +6 B
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.9 kB 2.9 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.87 kB 9.87 kB ⚠️ +6 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_app.module.js gzip 757 B 769 B ⚠️ +12 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.47 kB 2.47 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.41 kB 7.42 kB ⚠️ +12 B
Client Build Manifests
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary ijjk/next.js fix/custom-app-hydration Change
_error.js gzip 77.9 kB 70.9 kB -7.03 kB
hooks.html gzip 1.06 kB 1.06 kB
index.js gzip 78.1 kB 71.3 kB -6.81 kB
link.js gzip 80.6 kB 80.6 kB -9 B
routerDirect.js gzip 78.2 kB 78.2 kB -9 B
withRouter.js gzip 78.3 kB 78.3 kB -9 B
Overall change 394 kB 380 kB -13.9 kB

Commit: 95eb73c

@ijjk ijjk merged commit 5a9a478 into vercel:canary Jan 17, 2020
@ijjk ijjk deleted the fix/custom-app-hydration branch January 17, 2020 20:13
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
kind: bug Confirmed bug that is on the backlog
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants