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

[semi-breaking] Dynamic APIs are primarily async #68812

Draft
wants to merge 5 commits into
base: canary
Choose a base branch
from
Draft

[semi-breaking] Dynamic APIs are primarily async #68812

wants to merge 5 commits into from
+6,309 −805

Conversation

gnoff
Copy link
Contributor

@gnoff gnoff commented Aug 12, 2024

No description provided.

@gnoff gnoff changed the title WIP dynamic cookies WIP exotic cookies Aug 12, 2024
@ijjk
Copy link
Member

ijjk commented Aug 12, 2024 •
edited

Tests Passed

@ijjk
Copy link
Member

ijjk commented Aug 12, 2024 •
edited

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary gnoff/next.js async-dynamic Change
buildDuration 18.1s 15.8s N/A
buildDurationCached 8.6s 7.4s N/A
nodeModulesSize 355 MB 357 MB ⚠️ +1.97 MB
nextStartRea..uration (ms) 435ms 432ms N/A
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary gnoff/next.js async-dynamic Change
2994-HASH.js gzip 37.8 kB 38.2 kB ⚠️ +402 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.3 kB ⚠️ +402 B
Legacy Client Bundles (polyfills)
vercel/next.js canary gnoff/next.js async-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 async-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 async-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 async-dynamic Change
index.html gzip 522 B 523 B N/A
link.html gzip 538 B 537 B N/A
withRouter.html gzip 520 B 518 B N/A
Overall change 0 B 0 B ✓
Edge SSR bundle Size Overall increase ⚠️
vercel/next.js canary gnoff/next.js async-dynamic Change
edge-ssr.js gzip 127 kB 127 kB N/A
page.js gzip 173 kB 176 kB ⚠️ +2.2 kB
Overall change 173 kB 176 kB ⚠️ +2.2 kB
Middleware size
vercel/next.js canary gnoff/next.js async-dynamic Change
middleware-b..fest.js gzip 670 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 async-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 ⚠️ +416 B
app-route-ex..prod.js gzip 20.8 kB 21.1 kB ⚠️ +314 B
app-route-tu..prod.js gzip 20.8 kB 21.1 kB ⚠️ +314 B
app-route-tu..prod.js gzip 20.6 kB 20.9 kB ⚠️ +311 B
app-route.ru...dev.js gzip 32.4 kB 32.9 kB ⚠️ +416 B
app-route.ru..prod.js gzip 20.6 kB 20.9 kB ⚠️ +311 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.2 kB
build cache Overall increase ⚠️
vercel/next.js canary gnoff/next.js async-dynamic Change
0.pack gzip 1.49 MB 1.55 MB ⚠️ +57.1 kB
index.pack gzip 125 kB 128 kB ⚠️ +2.55 kB
Overall change 1.62 MB 1.68 MB ⚠️ +59.7 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: a7db78f

@gnoff gnoff force-pushed the async-dynamic branch 10 times, most recently from 34a65a9 to cbeba6a Compare August 14, 2024 03:59
@gnoff gnoff force-pushed the async-dynamic branch 4 times, most recently from c259778 to 0196e56 Compare August 25, 2024 05:57
@ijjk ijjk added the Turbopack Related to Turbopack with Next.js. label Aug 25, 2024
@gnoff gnoff force-pushed the async-dynamic branch 9 times, most recently from f2d7d38 to e4d1fd0 Compare August 27, 2024 03:28
@gnoff gnoff force-pushed the async-dynamic branch 3 times, most recently from 9fa3b3c to 839c421 Compare August 27, 2024 23:06
@gnoff
Introduce dynamic IO experimental configuration
deb3af4 
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
@gnoff
Implement exotically async dynamic APIs
b5f1ea3
@gnoff
Updates tests to use async cookies
366205c
@gnoff
headers() now returns an exotic promise of Headers
63583d6 
Similar to `cookies()`, `headers()` provides access to an underlying Request in Next.js. To be optimally compatible with dynamicIO we need request access to be implemented through async APIs and have udpated this function to return a promise of Headers rather than Headers directly. To facilitate migration this API will augment the Promise with properties that allow direct access to headers. In a future version of Next.js we will remove the exotic nature of this Promise and all access will require awaiting the result.
@gnoff gnoff changed the title WIP exotic cookies [semi-breaking] Dynamic APIs are primarily async Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. tests Turbopack Related to Turbopack with Next.js. type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@gnoff @ijjk