Add draft mode flag for multi-zone #68997

ijjk · 2024-08-16T22:39:18Z

When an application is running in multi-zone API endpoints can have differing draft mode IDs on the same domain so we need to avoid clearing the original when we see a mismatch as that can break the current applications draft mode. This is behind a flag initially to validate but it should be safe to make the default in the future as an invalid draft mode ID just gets ignored.

x-ref: slack thread

ijjk · 2024-08-16T22:56:14Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
buildDuration	22.1s	20.4s	N/A
buildDurationCached	11.3s	9.8s	N/A
nodeModulesSize	356 MB	356 MB	⚠️ +14.8 kB
nextStartRea..uration (ms)	503ms	506ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
5496-HASH.js gzip	37.9 kB	37.9 kB	N/A
5885.HASH.js gzip	169 B	169 B	✓
9560-HASH.js gzip	5.2 kB	5.19 kB	N/A
b9a693a6-HASH.js gzip	51.9 kB	51.9 kB	N/A
framework-HASH.js gzip	56.7 kB	56.7 kB	✓
main-app-HASH.js gzip	223 B	227 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	56.9 kB	56.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	192 B	191 B	N/A
amp-HASH.js gzip	511 B	512 B	N/A
css-HASH.js gzip	343 B	343 B	✓
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	266 B	265 B	N/A
head-HASH.js gzip	362 B	365 B	N/A
hooks-HASH.js gzip	391 B	392 B	N/A
image-HASH.js gzip	4.4 kB	4.39 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.81 kB	2.81 kB	✓
routerDirect..HASH.js gzip	327 B	328 B	N/A
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	324 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	5.96 kB	5.96 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
_buildManifest.js gzip	751 B	744 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
index.html gzip	522 B	522 B	✓
link.html gzip	536 B	536 B	✓
withRouter.html gzip	518 B	518 B	✓
Overall change	1.58 kB	1.58 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
edge-ssr.js gzip	127 kB	127 kB	N/A
page.js gzip	173 kB	173 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
middleware-b..fest.js gzip	670 B	664 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	29.7 kB	29.7 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	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	308 kB	308 kB	✓
app-page-exp..prod.js gzip	121 kB	121 kB	✓
app-page-tur..prod.js gzip	133 kB	133 kB	✓
app-page-tur..prod.js gzip	129 kB	129 kB	✓
app-page.run...dev.js gzip	298 kB	298 kB	✓
app-page.run..prod.js gzip	118 kB	118 kB	✓
app-route-ex...dev.js gzip	30.7 kB	30.7 kB	✓
app-route-ex..prod.js gzip	20.7 kB	20.7 kB	✓
app-route-tu..prod.js gzip	20.7 kB	20.7 kB	✓
app-route-tu..prod.js gzip	20.5 kB	20.5 kB	✓
app-route.ru...dev.js gzip	32.3 kB	32.3 kB	✓
app-route.ru..prod.js gzip	20.5 kB	20.5 kB	✓
pages-api-tu..prod.js gzip	9.59 kB	9.62 kB	N/A
pages-api.ru...dev.js gzip	11.4 kB	11.5 kB	N/A
pages-api.ru..prod.js gzip	9.58 kB	9.61 kB	N/A
pages-turbo...prod.js gzip	21.6 kB	21.6 kB	N/A
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	N/A
pages.runtim..prod.js gzip	21.6 kB	21.6 kB	N/A
server.runti..prod.js gzip	56.7 kB	56.8 kB	N/A
Overall change	1.25 MB	1.25 MB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js ijjk/draft-mode-flag	Change
0.pack gzip	1.49 MB	1.49 MB	⚠️ +4.8 kB
index.pack gzip	125 kB	127 kB	⚠️ +1.55 kB
Overall change	1.61 MB	1.62 MB	⚠️ +6.35 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],
   {
-    /***/ 3428: /***/ (
+    /***/ 6324: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(9007);
+          return __webpack_require__(4483);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8578: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3156: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(671)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5208)
+        __webpack_require__(9939)
       );
-      const _getimgprops = __webpack_require__(8580);
-      const _imageconfig = __webpack_require__(4446);
-      const _imageconfigcontextsharedruntime = __webpack_require__(1864);
-      const _warnonce = __webpack_require__(3787);
-      const _routercontextsharedruntime = __webpack_require__(6758);
+      const _getimgprops = __webpack_require__(4422);
+      const _imageconfig = __webpack_require__(1573);
+      const _imageconfigcontextsharedruntime = __webpack_require__(5345);
+      const _warnonce = __webpack_require__(447);
+      const _routercontextsharedruntime = __webpack_require__(9420);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(842)
+        __webpack_require__(2949)
       );
-      const _usemergedref = __webpack_require__(3435);
+      const _usemergedref = __webpack_require__(8863);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 3435: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8863: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -440,7 +440,7 @@
       /***/
     },
 
-    /***/ 8580: /***/ (
+    /***/ 4422: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -456,9 +456,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(3787);
-      const _imageblursvg = __webpack_require__(5112);
-      const _imageconfig = __webpack_require__(4446);
+      const _warnonce = __webpack_require__(447);
+      const _imageblursvg = __webpack_require__(7821);
+      const _imageconfig = __webpack_require__(1573);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -830,7 +830,7 @@
       /***/
     },
 
-    /***/ 5112: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7821: /***/ (__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 @@
       /***/
     },
 
-    /***/ 7735: /***/ (
+    /***/ 4563: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -912,10 +912,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(4345);
-      const _getimgprops = __webpack_require__(8580);
-      const _imagecomponent = __webpack_require__(8578);
+      const _getimgprops = __webpack_require__(4422);
+      const _imagecomponent = __webpack_require__(3156);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(842)
+        __webpack_require__(2949)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -947,7 +947,7 @@
       /***/
     },
 
-    /***/ 842: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2949: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -982,7 +982,7 @@
       /***/
     },
 
-    /***/ 9007: /***/ (
+    /***/ 4483: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -999,8 +999,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-49496d49-20240814/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(8436);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-49496d49-20240814_re_mwmfw6pwgc47m57syyu4ylsqkm/node_modules/next/image.js
-      var next_image = __webpack_require__(5519);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-49496d49-20240814_re_q22c6uapaonmbfmq22amc326am/node_modules/next/image.js
+      var next_image = __webpack_require__(4);
       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,8 @@
       /***/
     },
 
-    /***/ 5519: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(7735);
+    /***/ 4: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(4563);
 
       /***/
     },
@@ -1045,7 +1041,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(3428)
+      __webpack_exec__(6324)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 5496-HASH.js

Diff too large to display

Diff for pages-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 6b4ee1d

Add draft mode flag for multi-zone

03e9c1c

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Aug 16, 2024

henryjeff approved these changes Aug 16, 2024

View reviewed changes

ijjk added 2 commits August 16, 2024 15:44

update other instances

2ec417b

update more

6b4ee1d

ijjk merged commit 4cf65d5 into vercel:canary Aug 16, 2024
85 checks passed

ijjk deleted the ijjk/draft-mode-flag branch August 16, 2024 23:01

github-actions bot added the locked label Aug 31, 2024

github-actions bot locked as resolved and limited conversation to collaborators Aug 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add draft mode flag for multi-zone #68997

Add draft mode flag for multi-zone #68997

ijjk commented Aug 16, 2024

ijjk commented Aug 16, 2024

Add draft mode flag for multi-zone #68997

Add draft mode flag for multi-zone #68997

Conversation

ijjk commented Aug 16, 2024

ijjk commented Aug 16, 2024

Stats from current PR