Introduce dynamicIO experiment #67571

gnoff · 2024-07-08T20:34:24Z

nextConfig.experimental.dynamicIO: boolean is a new experimental flag that changes the static generation bailout heuristic and PPR postpone heuristic to exclude async work that is not resolvable in the current Task's microtask queue from prerenders. functionally it means that in this mode fetches and db queries will now not be prerenderable unless you opt into it with a caching API like unstable_cache() or the fetch cache: 'force-cache' option.

ijjk · 2024-07-09T22:16:46Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
buildDuration	19.8s	17.3s	N/A
buildDurationCached	9.5s	8.2s	N/A
nodeModulesSize	355 MB	357 MB	⚠️ +1.55 MB
nextStartRea..uration (ms)	448ms	434ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
2994-HASH.js gzip	37.8 kB	38 kB	⚠️ +229 B
3095.HASH.js gzip	169 B	169 B	✓
9630-HASH.js gzip	5.25 kB	5.25 kB	N/A
a8273233-HASH.js gzip	51.9 kB	51.9 kB	N/A
framework-HASH.js gzip	56.7 kB	56.7 kB	N/A
main-app-HASH.js gzip	226 B	225 B	N/A
main-HASH.js gzip	32.5 kB	32.5 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	37.9 kB	38.2 kB	⚠️ +229 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
_app-HASH.js gzip	194 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	508 B	511 B	N/A
css-HASH.js gzip	344 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	266 B	N/A
head-HASH.js gzip	364 B	364 B	✓
hooks-HASH.js gzip	390 B	390 B	✓
image-HASH.js gzip	4.4 kB	4.4 kB	N/A
index-HASH.js gzip	267 B	268 B	N/A
link-HASH.js gzip	2.81 kB	2.81 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	396 B	N/A
withRouter-HASH.js gzip	323 B	324 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.38 kB	1.38 kB	✓

Client Build Manifests

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
_buildManifest.js gzip	750 B	748 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
index.html gzip	522 B	523 B	N/A
link.html gzip	538 B	538 B	✓
withRouter.html gzip	519 B	519 B	✓
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
edge-ssr.js gzip	127 kB	127 kB	N/A
page.js gzip	173 kB	176 kB	⚠️ +2.17 kB
Overall change	173 kB	176 kB	⚠️ +2.17 kB

Middleware size

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
middleware-b..fest.js gzip	669 B	674 B	N/A
middleware-r..fest.js gzip	156 B	156 B	✓
middleware.js gzip	29.9 kB	29.9 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	1 kB	1 kB	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
928-experime...dev.js gzip	322 B	322 B	✓
928.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	312 kB	315 kB	⚠️ +2.31 kB
app-page-exp..prod.js gzip	123 kB	125 kB	⚠️ +1.84 kB
app-page-tur..prod.js gzip	136 kB	138 kB	⚠️ +1.86 kB
app-page-tur..prod.js gzip	131 kB	133 kB	⚠️ +1.89 kB
app-page.run...dev.js gzip	301 kB	303 kB	⚠️ +2.31 kB
app-page.run..prod.js gzip	118 kB	120 kB	⚠️ +1.87 kB
app-route-ex...dev.js gzip	30.8 kB	31.2 kB	⚠️ +410 B
app-route-ex..prod.js gzip	20.8 kB	21.1 kB	⚠️ +287 B
app-route-tu..prod.js gzip	20.8 kB	21.1 kB	⚠️ +287 B
app-route-tu..prod.js gzip	20.6 kB	20.9 kB	⚠️ +287 B
app-route.ru...dev.js gzip	32.4 kB	32.9 kB	⚠️ +410 B
app-route.ru..prod.js gzip	20.6 kB	20.9 kB	⚠️ +288 B
pages-api-tu..prod.js gzip	9.62 kB	9.62 kB	✓
pages-api.ru...dev.js gzip	11.5 kB	11.5 kB	✓
pages-api.ru..prod.js gzip	9.61 kB	9.61 kB	✓
pages-turbo...prod.js gzip	20.8 kB	20.8 kB	✓
pages.runtim...dev.js gzip	26.4 kB	26.4 kB	✓
pages.runtim..prod.js gzip	20.8 kB	20.8 kB	✓
server.runti..prod.js gzip	56.8 kB	56.8 kB	N/A
Overall change	1.37 MB	1.38 MB	⚠️ +14.1 kB

build cache Overall increase ⚠️

	vercel/next.js canary	gnoff/next.js io-is-dynamic	Change
0.pack gzip	1.49 MB	1.55 MB	⚠️ +53 kB
index.pack gzip	126 kB	128 kB	⚠️ +1.41 kB
Overall change	1.62 MB	1.67 MB	⚠️ +54.4 kB

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.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],
   {
-    /***/ 6682: /***/ (
+    /***/ 8480: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(1471);
+          return __webpack_require__(3908);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2968: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9178: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(5550)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9973)
+        __webpack_require__(7261)
       );
-      const _getimgprops = __webpack_require__(3971);
-      const _imageconfig = __webpack_require__(985);
-      const _imageconfigcontextsharedruntime = __webpack_require__(7496);
-      const _warnonce = __webpack_require__(9125);
-      const _routercontextsharedruntime = __webpack_require__(9390);
+      const _getimgprops = __webpack_require__(5184);
+      const _imageconfig = __webpack_require__(5055);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9427);
+      const _warnonce = __webpack_require__(3435);
+      const _routercontextsharedruntime = __webpack_require__(3626);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(855)
+        __webpack_require__(7510)
       );
-      const _usemergedref = __webpack_require__(752);
+      const _usemergedref = __webpack_require__(3782);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 752: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3782: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -440,7 +440,7 @@
       /***/
     },
 
-    /***/ 3971: /***/ (
+    /***/ 5184: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -456,9 +456,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(9125);
-      const _imageblursvg = __webpack_require__(5602);
-      const _imageconfig = __webpack_require__(985);
+      const _warnonce = __webpack_require__(3435);
+      const _imageblursvg = __webpack_require__(2564);
+      const _imageconfig = __webpack_require__(5055);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -830,7 +830,7 @@
       /***/
     },
 
-    /***/ 5602: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2564: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -885,7 +885,7 @@
       /***/
     },
 
-    /***/ 1585: /***/ (
+    /***/ 1146: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -912,10 +912,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(4345);
-      const _getimgprops = __webpack_require__(3971);
-      const _imagecomponent = __webpack_require__(2968);
+      const _getimgprops = __webpack_require__(5184);
+      const _imagecomponent = __webpack_require__(9178);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(855)
+        __webpack_require__(7510)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -947,7 +947,7 @@
       /***/
     },
 
-    /***/ 855: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7510: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -982,7 +982,7 @@
       /***/
     },
 
-    /***/ 1471: /***/ (
+    /***/ 3908: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -999,8 +999,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-eb3ad065-20240822/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(3801);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-eb3ad065-20240822_re_ixk2rr5gnwbjcqqikyozc23shi/node_modules/next/image.js
-      var next_image = __webpack_require__(7764);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-eb3ad065-20240822_re_73fog5rwwduhvoesnuzrxcpoki/node_modules/next/image.js
+      var next_image = __webpack_require__(101);
       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",
@@ -1030,12 +1030,12 @@
       /***/
     },
 
-    /***/ 7764: /***/ (
+    /***/ 101: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(1585);
+      module.exports = __webpack_require__(1146);
 
       /***/
     },
@@ -1045,7 +1045,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(6682)
+      __webpack_exec__(8480)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 2994-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 024c96b

ijjk · 2024-07-09T22:17:23Z

Failing test suites

Commit: 024c96b

pnpm test test/integration/amp-export-validation/test/index.test.js

AMP Validation on Export > production mode > should have shown errors during build

Expand output

● AMP Validation on Export › production mode › should have shown errors during build

expect(received).toMatch(expected)

Expected pattern: /error.*The mandatory attribute 'height' is missing in tag 'amp-video'\./
Received string:  "  ▲ Next.js 15.0.0-canary.131
  - Experiments (use with caution):
    · amp·
   Checking validity of types ...
   Creating an optimized production build ...
 ✓ Compiled successfully
   Collecting page data ...
   Generating static pages (0/8) ...
   Generating static pages (2/8)··
Failed to build /second after 1 attempts.
   Generating static pages (4/8)··
 ⚠ Linting is disabled.·
Error occurred prerendering page \"/second\". Read more: https://nextjs.org/docs/messages/prerender-error·
AssertionError: Assertion failed: WebAssembly is uninitialized

  at new module$contents$goog$asserts_AssertionError (../evalmachine.<anonymous>:103:1441)
  at module$contents$goog$asserts_doAssertFailure (../evalmachine.<anonymous>:104:354)
  at goog.asserts.assertExists (../evalmachine.<anonymous>:105:374)
  at Object.module$contents$amp$validator_validateString [as validateString] (../evalmachine.<anonymous>:2245:108)
  at Validator.validateString (../packages/next/dist/compiled/amphtml-validator/index.js:17:2057)
  at validateAmp (../packages/next/dist/export/routes/pages.js:89:34)
  at async exportPagesPage (../packages/next/dist/export/routes/pages.js:106:13)
  at async exportPageImpl (../packages/next/dist/export/worker.js:199:16)
  at async Span.traceAsyncFn (../packages/next/dist/trace/trace.js:157:20)·
  > Build error occurred
  Error: Export encountered an error on /second, exiting the build.
  at exportPageWithRetry (../packages/next/dist/export/worker.js:288:31)
      at async Promise.all (index 2)
  at async Object.exportPages (../packages/next/dist/export/worker.js:312:31) {
    type: 'ExportPageError',
    code: 'NEXT_EXPORT_PAGE_ERROR'
  }
  "
  at Object.toMatch (integration/amp-export-validation/test/index.test.js:28:29)

Read more about building and testing Next.js in contributing.md.

packages/next/src/server/app-render/app-render.tsx

packages/next/src/server/app-render/create-component-tree.tsx

packages/next/src/server/app-render/app-render.tsx

packages/next/src/server/lib/patch-fetch.ts

test/e2e/app-dir/io-is-dynamic-ppr/app/cases/dynamic_api_search_params_server_boundary/page.tsx

test/e2e/app-dir/io-is-dynamic-ppr/dynamic-io-ppr.test.ts

test/e2e/app-dir/io-is-dynamic/dynamic-io.test.ts

packages/next/src/server/lib/patch-fetch.ts

packages/next/src/server/app-render/app-render.tsx

gnoff · 2024-08-20T21:36:24Z

packages/next/src/server/app-render/app-render.tsx

+
+        // When this resolves the cache has no inflight reads and we can ascertain the dynamic outcome
+        await cacheSignal.cacheReady()
+        flightController.abort(abortReason)


We want to abort the render to avoid doing unecessary work once we no longer care to fill the cache. We don't need the controller on the store in this case because we don't want to abort inside using something aggressive like trackDynamicDataAccess(). If we did then a high up cookies() read in a new Task would potentially abort before we filled all the caches that we could hit on the final render.

test/e2e/app-dir/io-is-dynamic-ppr/dynamic-io-ppr.test.ts

In this mode prerenders must complete in a single render Task. When PPR is off if a prerender is incomplete after a single Render Task that page is considered dynamic. When PPR is on if a prerender is incomplete after a single Render Task then all the branches that are incomplete will postpone triggering the nearest parent suspense boundary. The Dynamic APIs that bail out of prerendering will no longer trigger a postpone via a throw but will instead abort the render synchronously. This is very aggressive and to make this mode useful we intend to alter these dynamic APIs in a way that will allow their use to only exclude their local sub-tree. If you experiment with this mode expect that many of your previously static pages will become dynamic and your mostly static PPR prerenders will become empty. React was bumped and nwo there is a new prerender method in the flight package. We can use this to implement an improved technique to ensure proper timing of task boundaries. This change switches to using prerender which also means that dynamicIO by itself must opt into experimental react

ijjk added created-by: Next.js team PRs by the Next.js team. tests type: next labels Jul 8, 2024

gnoff force-pushed the io-is-dynamic branch 6 times, most recently from 1b5c775 to b9f255b Compare July 9, 2024 22:09

gnoff force-pushed the io-is-dynamic branch 2 times, most recently from e15162a to 65727ca Compare July 12, 2024 18:31

gnoff force-pushed the io-is-dynamic branch from 65727ca to 468d034 Compare August 1, 2024 23:48

ijjk added the type: react-sync label Aug 1, 2024

gnoff force-pushed the io-is-dynamic branch 15 times, most recently from 8d183d9 to 6d80a1a Compare August 8, 2024 00:26

lubieowoce reviewed Aug 12, 2024

View reviewed changes

packages/next/src/server/app-render/app-render.tsx Show resolved Hide resolved

lubieowoce reviewed Aug 12, 2024

View reviewed changes

packages/next/src/server/app-render/create-component-tree.tsx Outdated Show resolved Hide resolved

gnoff force-pushed the io-is-dynamic branch 4 times, most recently from 9771812 to 728b140 Compare August 13, 2024 23:19

ztanner reviewed Aug 14, 2024

View reviewed changes

gnoff force-pushed the io-is-dynamic branch 4 times, most recently from 894ae36 to 810d525 Compare August 21, 2024 02:39

gnoff commented Aug 21, 2024

View reviewed changes

gnoff force-pushed the io-is-dynamic branch 3 times, most recently from f6c5b84 to e73931b Compare August 23, 2024 20:29

ijjk added the Turbopack Related to Turbopack with Next.js. label Aug 23, 2024

gnoff force-pushed the io-is-dynamic branch 12 times, most recently from 56d79f3 to 5a00f89 Compare August 27, 2024 03:27

gnoff force-pushed the io-is-dynamic branch from 5a00f89 to 024c96b Compare August 27, 2024 18:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce dynamicIO experiment #67571

Introduce dynamicIO experiment #67571

gnoff commented Jul 8, 2024 •

edited

Loading

ijjk commented Jul 9, 2024 •

edited

Loading

ijjk commented Jul 9, 2024 •

edited

Loading

gnoff Aug 20, 2024

Introduce dynamicIO experiment #67571

Are you sure you want to change the base?

Introduce dynamicIO experiment #67571

Conversation

gnoff commented Jul 8, 2024 • edited Loading

ijjk commented Jul 9, 2024 • edited Loading

Stats from current PR

ijjk commented Jul 9, 2024 • edited Loading

Failing test suites

gnoff Aug 20, 2024

Choose a reason for hiding this comment

gnoff commented Jul 8, 2024 •

edited

Loading

ijjk commented Jul 9, 2024 •

edited

Loading

ijjk commented Jul 9, 2024 •

edited

Loading