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.

Sign up for GitHub

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

Jump to bottom

Correctly Dedupe Prefetching #10758

Merged
merged 2 commits into from
Feb 29, 2020
Merged

Correctly Dedupe Prefetching #10758

merged 2 commits into from
Feb 29, 2020

Conversation

Timer
Copy link
Member

@Timer Timer commented Feb 29, 2020

Router#prefetch accepts both the href and asPath values, so we must ensure we dedupe prefetches on both of those values and not only href.

@Timer Timer added this to the 9.3.0 milestone Feb 29, 2020
@ijjk
Copy link
Member

ijjk commented Feb 29, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
buildDuration 9.6s 9.7s ⚠️ +92ms
nodeModulesSize 56.3 MB 56.3 MB ⚠️ +814 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.js gzip 5.41 kB 5.41 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55 kB 55 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.module.js gzip 4.44 kB 4.44 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51 kB 51 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages Overall decrease ✓
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.js gzip 1.07 kB 1.07 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.9 kB 1.89 kB -14 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.38 kB -14 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.module.js gzip 589 B 589 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ⚠️ +4 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.27 kB 5.27 kB ⚠️ +4 B
Client Build Manifests
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe 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 Timer/next.js hotfix/prefetch-dedupe Change
index.html gzip 924 B 924 B ✓
link.html gzip 932 B 932 B ✓
withRouter.html gzip 922 B 922 B ✓
Overall change 2.78 kB 2.78 kB ✓

Diffs

Diff for link.js 
@@ -126,8 +126,6 @@ module.exports = _possibleConstructorReturn;
 "use strict";
 
 
-var _slicedToArray = __webpack_require__("J4zp");
-
 var _classCallCheck = __webpack_require__("lwsE");
 
 var _createClass = __webpack_require__("W8MJ");
@@ -326,10 +324,10 @@ var Link = /*#__PURE__*/function (_react$Component) {
     value: function handleRef(ref) {
       var _this2 = this;
 
-      var isPrefetched = prefetched[this.getPaths()[0]];
-
       if (this.p && IntersectionObserver && ref && ref.tagName) {
         this.cleanUpListeners();
+        var isPrefetched = prefetched[this.getPaths().join( // Join on an invalid URI character
+        '%')];
 
         if (!isPrefetched) {
           this.cleanUpListeners = listenToIntersections(ref, function () {
@@ -345,19 +343,20 @@ var Link = /*#__PURE__*/function (_react$Component) {
     value: function prefetch(options) {
       if (!this.p || false) return; // Prefetch the JSON page if asked (only in the client)
 
-      var _this$getPaths = this.getPaths(),
-          _this$getPaths2 = _slicedToArray(_this$getPaths, 2),
-          href = _this$getPaths2[0],
-          asPath = _this$getPaths2[1]; // We need to handle a prefetch error here since we may be
+      var paths = this.getPaths(); // We need to handle a prefetch error here since we may be
       // loading with priority which can reject but we don't
       // want to force navigation since this is only a prefetch
 
-
-      _router["default"].prefetch(href, asPath, options)["catch"](function (err) {
+      _router["default"].prefetch(paths[
+      /* href */
+      0], paths[
+      /* asPath */
+      1], options)["catch"](function (err) {
         if (false) {}
       });
 
-      prefetched[href] = true;
+      prefetched[paths.join( // Join on an invalid URI character
+      '%')] = true;
     }
   }, {
     key: "render",
Diff for link.module.js 
@@ -234,10 +234,10 @@ class Link extends _react.Component {
   }
 
   handleRef(ref) {
-    var isPrefetched = prefetched[this.getPaths()[0]];
-
     if (this.p && IntersectionObserver && ref && ref.tagName) {
       this.cleanUpListeners();
+      var isPrefetched = prefetched[this.getPaths().join( // Join on an invalid URI character
+      '%')];
 
       if (!isPrefetched) {
         this.cleanUpListeners = listenToIntersections(ref, () => {
@@ -252,15 +252,20 @@ class Link extends _react.Component {
   prefetch(options) {
     if (!this.p || false) return; // Prefetch the JSON page if asked (only in the client)
 
-    var [href, asPath] = this.getPaths(); // We need to handle a prefetch error here since we may be
+    var paths = this.getPaths(); // We need to handle a prefetch error here since we may be
     // loading with priority which can reject but we don't
     // want to force navigation since this is only a prefetch
 
-    _router.default.prefetch(href, asPath, options).catch(err => {
+    _router.default.prefetch(paths[
+    /* href */
+    0], paths[
+    /* asPath */
+    1], options).catch(err => {
       if (false) {}
     });
 
-    prefetched[href] = true;
+    prefetched[paths.join( // Join on an invalid URI character
+    '%')] = true;
   }
 
   render() {
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
buildDuration 10.4s 10.5s ⚠️ +30ms
nodeModulesSize 56.3 MB 56.3 MB ⚠️ +350 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.js gzip 5.41 kB 5.41 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55 kB 55 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.module.js gzip 4.44 kB 4.44 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51 kB 51 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages Overall decrease ✓
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.js gzip 1.07 kB 1.07 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.9 kB 1.89 kB -14 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.38 kB -14 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.module.js gzip 589 B 589 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ⚠️ +4 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.27 kB 5.27 kB ⚠️ +4 B
Client Build Manifests
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe 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 increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_error.js gzip 292 kB 292 kB -5 B
404.html gzip 1.33 kB 1.33 kB ✓
hooks.html gzip 963 B 963 B ✓
index.js gzip 292 kB 292 kB ⚠️ +326 B
link.js gzip 299 kB 299 kB ⚠️ +291 B
routerDirect.js gzip 298 kB 298 kB -557 B
withRouter.js gzip 298 kB 298 kB ⚠️ +157 B
Overall change 1.48 MB 1.48 MB ⚠️ +212 B

Commit: 4363e83

@ijjk
Copy link
Member

ijjk commented Feb 29, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
buildDuration 9.1s 8.9s -121ms
nodeModulesSize 56.3 MB 56.3 MB ⚠️ +350 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.js gzip 5.41 kB 5.41 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55 kB 55 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.module.js gzip 4.44 kB 4.44 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51 kB 51 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages Overall decrease ✓
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.js gzip 1.07 kB 1.07 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.9 kB 1.89 kB -14 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.38 kB -14 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.module.js gzip 589 B 589 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ⚠️ +4 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.27 kB 5.27 kB ⚠️ +4 B
Client Build Manifests
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe 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 Timer/next.js hotfix/prefetch-dedupe Change
index.html gzip 924 B 924 B ✓
link.html gzip 932 B 932 B ✓
withRouter.html gzip 922 B 922 B ✓
Overall change 2.78 kB 2.78 kB ✓

Diffs

Diff for link.js 
@@ -126,8 +126,6 @@ module.exports = _possibleConstructorReturn;
 "use strict";
 
 
-var _slicedToArray = __webpack_require__("J4zp");
-
 var _classCallCheck = __webpack_require__("lwsE");
 
 var _createClass = __webpack_require__("W8MJ");
@@ -326,10 +324,10 @@ var Link = /*#__PURE__*/function (_react$Component) {
     value: function handleRef(ref) {
       var _this2 = this;
 
-      var isPrefetched = prefetched[this.getPaths()[0]];
-
       if (this.p && IntersectionObserver && ref && ref.tagName) {
         this.cleanUpListeners();
+        var isPrefetched = prefetched[this.getPaths().join( // Join on an invalid URI character
+        '%')];
 
         if (!isPrefetched) {
           this.cleanUpListeners = listenToIntersections(ref, function () {
@@ -345,19 +343,20 @@ var Link = /*#__PURE__*/function (_react$Component) {
     value: function prefetch(options) {
       if (!this.p || false) return; // Prefetch the JSON page if asked (only in the client)
 
-      var _this$getPaths = this.getPaths(),
-          _this$getPaths2 = _slicedToArray(_this$getPaths, 2),
-          href = _this$getPaths2[0],
-          asPath = _this$getPaths2[1]; // We need to handle a prefetch error here since we may be
+      var paths = this.getPaths(); // We need to handle a prefetch error here since we may be
       // loading with priority which can reject but we don't
       // want to force navigation since this is only a prefetch
 
-
-      _router["default"].prefetch(href, asPath, options)["catch"](function (err) {
+      _router["default"].prefetch(paths[
+      /* href */
+      0], paths[
+      /* asPath */
+      1], options)["catch"](function (err) {
         if (false) {}
       });
 
-      prefetched[href] = true;
+      prefetched[paths.join( // Join on an invalid URI character
+      '%')] = true;
     }
   }, {
     key: "render",
Diff for link.module.js 
@@ -234,10 +234,10 @@ class Link extends _react.Component {
   }
 
   handleRef(ref) {
-    var isPrefetched = prefetched[this.getPaths()[0]];
-
     if (this.p && IntersectionObserver && ref && ref.tagName) {
       this.cleanUpListeners();
+      var isPrefetched = prefetched[this.getPaths().join( // Join on an invalid URI character
+      '%')];
 
       if (!isPrefetched) {
         this.cleanUpListeners = listenToIntersections(ref, () => {
@@ -252,15 +252,20 @@ class Link extends _react.Component {
   prefetch(options) {
     if (!this.p || false) return; // Prefetch the JSON page if asked (only in the client)
 
-    var [href, asPath] = this.getPaths(); // We need to handle a prefetch error here since we may be
+    var paths = this.getPaths(); // We need to handle a prefetch error here since we may be
     // loading with priority which can reject but we don't
     // want to force navigation since this is only a prefetch
 
-    _router.default.prefetch(href, asPath, options).catch(err => {
+    _router.default.prefetch(paths[
+    /* href */
+    0], paths[
+    /* asPath */
+    1], options).catch(err => {
       if (false) {}
     });
 
-    prefetched[href] = true;
+    prefetched[paths.join( // Join on an invalid URI character
+    '%')] = true;
   }
 
   render() {
Serverless Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
buildDuration 9.8s 10s ⚠️ +202ms
nodeModulesSize 56.3 MB 56.3 MB ⚠️ +350 B
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.js gzip 5.41 kB 5.41 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55 kB 55 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
main-HASH.module.js gzip 4.44 kB 4.44 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51 kB 51 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB ✓
Overall change 18.9 kB 18.9 kB ✓
Client Pages Overall decrease ✓
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.js gzip 1.07 kB 1.07 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.9 kB 1.89 kB -14 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.38 kB -14 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe Change
_app.module.js gzip 589 B 589 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ⚠️ +4 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.27 kB 5.27 kB ⚠️ +4 B
Client Build Manifests
zeit/next.js canary Timer/next.js hotfix/prefetch-dedupe 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 Timer/next.js hotfix/prefetch-dedupe Change
_error.js gzip 292 kB 292 kB -370 B
404.html gzip 1.33 kB 1.33 kB ✓
hooks.html gzip 963 B 963 B ✓
index.js gzip 292 kB 292 kB -668 B
link.js gzip 299 kB 299 kB -184 B
routerDirect.js gzip 298 kB 298 kB -184 B
withRouter.js gzip 298 kB 298 kB ⚠️ +499 B
Overall change 1.48 MB 1.48 MB -907 B

Commit: c081b3d

@Timer Timer merged commit 24345c9 into vercel:canary Feb 29, 2020
@Timer Timer deleted the hotfix/prefetch-dedupe branch March 1, 2020 00:00
@snyk-bot snyk-bot mentioned this pull request Apr 9, 2020
Open
@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.
Reviewers

@ijjk ijjk ijjk approved these changes

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.3.0
Development

Successfully merging this pull request may close these issues.
2 participants
@Timer @ijjk