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

remove special-cased prefetch kind in dev mode #64941

Merged

Conversation

ztanner
Copy link
Member

@ztanner ztanner commented Apr 23, 2024

What

The "auto" prefetching behavior differs between dev/prod, resulting in confusing DX when configuring experimental.staleTimes = { static: 0, dynamic: 0 }.

Why

Prefetching is intentionally disabled in dev, but we still will create an "auto" prefetch on navigation. When configuring experimental.staleTimes to have a 0 value in both static/dynamic cases (a pattern that isn't a good idea, but should still have consistent DX), it means that any auto prefetching that happens is effectively discarded immediately, as we also would also not be able to re-use the loading data.

In prod, we would have created a "temporary" prefetch for this case, which is effectively not a prefetch at all and gets the full RSC data. However in dev, we've special-cased these prefetches to be "auto", so the client won't ever receive fresh data after the first time the cache is seeded.

How

This removes the special-handling for dev to instead be similar to other prefetches that are created ad-hoc, and marks it as a "temporary" prefetch kind. This has the added benefit of not triggering 2 separate RSC calls in dev when only one is really needed.

Test Plan

Client cache tests were previously disabled in dev because caching behavior does intentionally differ between dev/prod. But we can at the very least assert that the "auto" prefetching behavior is consistent between the two environments, so that's what has been added to the tests here.

This also adds a test for the experimental.staleTimes = { static: 0, dynamic: 0 } case.

x-ref: #54075 (comment)

Closes NEXT-3209

Copy link
Member Author

ztanner commented Apr 23, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ztanner and the rest of your teammates on Graphite Graphite

@ijjk
Copy link
Member

ijjk commented Apr 23, 2024

Tests Passed

@ztanner ztanner force-pushed the 04-23-remove_special-cased_prefetch_kind_in_dev_mode branch from 91b9772 to f1dd69e Compare April 23, 2024 20:40
@ztanner ztanner force-pushed the 04-23-remove_special-cased_prefetch_kind_in_dev_mode branch from f1dd69e to d48566c Compare April 23, 2024 21:59
@ijjk
Copy link
Member

ijjk commented Apr 23, 2024

Stats from current PR

Default Build
General
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
buildDuration 17.7s 16s N/A
buildDurationCached 8.6s 7.3s N/A
nodeModulesSize 238 MB 238 MB N/A
nextStartRea..uration (ms) 407ms 409ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
2453-HASH.js gzip 31.5 kB 31.5 kB N/A
3304.HASH.js gzip 169 B 169 B
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB N/A
8299-HASH.js gzip 5.09 kB 5.09 kB
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 229 B 227 B N/A
main-HASH.js gzip 31.5 kB 31.6 kB N/A
webpack-HASH.js gzip 1.64 kB 1.65 kB N/A
Overall change 50.5 kB 50.5 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
_app-HASH.js gzip 193 B 194 B N/A
_error-HASH.js gzip 193 B 191 B N/A
amp-HASH.js gzip 510 B 510 B
css-HASH.js gzip 342 B 343 B N/A
dynamic-HASH.js gzip 2.51 kB 2.52 kB N/A
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 365 B 364 B N/A
hooks-HASH.js gzip 389 B 391 B N/A
image-HASH.js gzip 4.28 kB 4.28 kB N/A
index-HASH.js gzip 269 B 268 B N/A
link-HASH.js gzip 2.68 kB 2.69 kB N/A
routerDirect..HASH.js gzip 328 B 326 B N/A
script-HASH.js gzip 395 B 397 B N/A
withRouter-HASH.js gzip 323 B 323 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 1.2 kB 1.2 kB
Client Build Manifests
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
_buildManifest.js gzip 482 B 484 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
index.html gzip 528 B 530 B N/A
link.html gzip 541 B 541 B
withRouter.html gzip 522 B 524 B N/A
Overall change 541 B 541 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
edge-ssr.js gzip 108 kB 108 kB N/A
page.js gzip 3.04 kB 3.04 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
middleware-b..fest.js gzip 624 B 625 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 27.8 kB 27.8 kB N/A
edge-runtime..pack.js gzip 839 B 839 B
Overall change 839 B 839 B
Next Runtimes
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
app-page-exp...dev.js gzip 171 kB 171 kB
app-page-exp..prod.js gzip 97.6 kB 97.6 kB
app-page-tur..prod.js gzip 99.4 kB 99.4 kB
app-page-tur..prod.js gzip 93.6 kB 93.6 kB
app-page.run...dev.js gzip 145 kB 145 kB
app-page.run..prod.js gzip 92.1 kB 92.1 kB
app-route-ex...dev.js gzip 21.5 kB 21.5 kB
app-route-ex..prod.js gzip 15.1 kB 15.1 kB
app-route-tu..prod.js gzip 15.1 kB 15.1 kB
app-route-tu..prod.js gzip 14.9 kB 14.9 kB
app-route.ru...dev.js gzip 21.2 kB 21.2 kB
app-route.ru..prod.js gzip 14.9 kB 14.9 kB
pages-api-tu..prod.js gzip 9.55 kB 9.55 kB
pages-api.ru...dev.js gzip 9.82 kB 9.82 kB
pages-api.ru..prod.js gzip 9.55 kB 9.55 kB
pages-turbo...prod.js gzip 21.4 kB 21.4 kB
pages.runtim...dev.js gzip 22.1 kB 22.1 kB
pages.runtim..prod.js gzip 21.4 kB 21.4 kB
server.runti..prod.js gzip 65.3 kB 65.3 kB
Overall change 960 kB 960 kB
build cache
vercel/next.js canary vercel/next.js 04-23-remove_special-cased_prefetch_kind_in_dev_mode Change
0.pack gzip 1.61 MB 1.61 MB N/A
index.pack gzip 107 kB 107 kB N/A
Overall change 0 B 0 B
Diff details
Diff for middleware.js

Diff too large to display

Diff for image-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 1552: /***/ (
+    /***/ 4070: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5237);
+          return __webpack_require__(396);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2016: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8490: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6074)
+        __webpack_require__(2457)
       );
-      const _getimgprops = __webpack_require__(9571);
-      const _imageconfig = __webpack_require__(6567);
-      const _imageconfigcontextsharedruntime = __webpack_require__(419);
-      const _warnonce = __webpack_require__(4486);
-      const _routercontextsharedruntime = __webpack_require__(162);
+      const _getimgprops = __webpack_require__(7932);
+      const _imageconfig = __webpack_require__(5706);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9483);
+      const _warnonce = __webpack_require__(9035);
+      const _routercontextsharedruntime = __webpack_require__(4829);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -379,7 +379,7 @@
       /***/
     },
 
-    /***/ 9571: /***/ (
+    /***/ 7932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4486);
-      const _imageblursvg = __webpack_require__(133);
-      const _imageconfig = __webpack_require__(6567);
+      const _warnonce = __webpack_require__(9035);
+      const _imageblursvg = __webpack_require__(2642);
+      const _imageconfig = __webpack_require__(5706);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -772,7 +772,7 @@
       /***/
     },
 
-    /***/ 133: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2642: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -827,7 +827,7 @@
       /***/
     },
 
-    /***/ 4085: /***/ (
+    /***/ 503: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -854,10 +854,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(7456);
-      const _getimgprops = __webpack_require__(9571);
-      const _imagecomponent = __webpack_require__(2016);
+      const _getimgprops = __webpack_require__(7932);
+      const _imagecomponent = __webpack_require__(8490);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -889,7 +889,7 @@
       /***/
     },
 
-    /***/ 6996: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7240: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -924,7 +924,7 @@
       /***/
     },
 
-    /***/ 5237: /***/ (
+    /***/ 396: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -941,8 +941,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@18.2.0_react@18.2.0/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -972,12 +972,8 @@
       /***/
     },
 
-    /***/ 1577: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(4085);
+    /***/ 73: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(503);
 
       /***/
     },
@@ -987,7 +983,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(1552)
+      __webpack_exec__(4070)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 2453-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Commit: d48566c

@ztanner ztanner marked this pull request as ready for review April 23, 2024 22:22
@ztanner ztanner merged commit 284648f into canary Apr 24, 2024
76 of 81 checks passed
@ztanner ztanner deleted the 04-23-remove_special-cased_prefetch_kind_in_dev_mode branch April 24, 2024 00:12
@github-actions github-actions bot added the locked label May 9, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 9, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants