initialize ALS with cookies in middleware #65008

ztanner · 2024-04-24T22:33:38Z

What

Cookies set/updated/removed in middleware won't be accessible during the render in which they were set

Why

Middleware will properly set a set-cookie header to inform the client of the cookie change, but this means the AsyncLocalStorage context containing the cookies value wouldn't be updated until the next time the request headers were parsed. In other words, on the first request the cookie would be sent but wouldn't be available in the cookies() context. And then the following request would properly have the cookie values.

How

This uses a proxy on the ResponseCookies used in middleware to add a middleware override header with the cookie value. When we instantiate the cached cookies, we merge in whatever headers would have been set by middleware, so that they're available in the same render that invoked middleware.

Test Plan

This changeset adds a test to confirm cookies set/deleted in middleware are available in a single pass. Verified with a deployment here.

Fixes #49442
Closes NEXT-1126

ztanner · 2024-04-24T22:33:58Z

initialize ALS with cookies in middleware #65008 👈
canary

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

Join @ztanner and the rest of your teammates on Graphite

ijjk · 2024-04-24T22:39:03Z

Tests Passed

ijjk · 2024-04-24T22:42:17Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-24-initialize_ALS_with_cookies_in_middleware	Change
buildDuration	28.9s	29.4s	⚠️ +514ms
buildDurationCached	18.9s	13.6s	N/A
nodeModulesSize	239 MB	239 MB	⚠️ +45 kB
nextStartRea..uration (ms)	745ms	751ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 04-24-initialize_ALS_with_cookies_in_middleware	Change
2453-HASH.js gzip	31.8 kB	31.8 kB	N/A
3304.HASH.js gzip	169 B	169 B	✓
3f784ff6-HASH.js gzip	53.5 kB	53.5 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	228 B	228 B	✓
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.7 kB	50.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 04-24-initialize_ALS_with_cookies_in_middleware	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-24-initialize_ALS_with_cookies_in_middleware	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-24-initialize_ALS_with_cookies_in_middleware	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-24-initialize_ALS_with_cookies_in_middleware	Change
index.html gzip	528 B	530 B	N/A
link.html gzip	541 B	541 B	✓
withRouter.html gzip	523 B	523 B	✓
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-24-initialize_ALS_with_cookies_in_middleware	Change
edge-ssr.js gzip	108 kB	108 kB	⚠️ +160 B
page.js gzip	3.05 kB	3.04 kB	N/A
Overall change	108 kB	108 kB	⚠️ +160 B

Middleware size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-24-initialize_ALS_with_cookies_in_middleware	Change
middleware-b..fest.js gzip	621 B	623 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	27.8 kB	27.9 kB	⚠️ +150 B
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	28.6 kB	28.8 kB	⚠️ +150 B

Next Runtimes

	vercel/next.js canary	vercel/next.js 04-24-initialize_ALS_with_cookies_in_middleware	Change
app-page-exp...dev.js gzip	171 kB	171 kB	N/A
app-page-exp..prod.js gzip	98.3 kB	98.4 kB	N/A
app-page-tur..prod.js gzip	99.8 kB	99.9 kB	N/A
app-page-tur..prod.js gzip	94.2 kB	94.2 kB	N/A
app-page.run...dev.js gzip	157 kB	157 kB	N/A
app-page.run..prod.js gzip	92.9 kB	93 kB	N/A
app-route-ex...dev.js gzip	21.4 kB	21.4 kB	N/A
app-route-ex..prod.js gzip	15.1 kB	15.2 kB	N/A
app-route-tu..prod.js gzip	15.1 kB	15.2 kB	N/A
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	N/A
app-route.ru...dev.js gzip	21.2 kB	21.3 kB	N/A
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	N/A
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	159 kB	159 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 04-24-initialize_ALS_with_cookies_in_middleware	Change
0.pack gzip	1.61 MB	1.61 MB	⚠️ +3.7 kB
index.pack gzip	108 kB	108 kB	⚠️ +150 B
Overall change	1.72 MB	1.72 MB	⚠️ +3.85 kB

Diff details

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],
   {
-    /***/ 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

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

Diff too large to display

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

Diff too large to display

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

Commit: 45392d3

ijjk · 2024-04-25T15:54:10Z

test/e2e/app-dir/app-middleware/middleware.js

+  if (request.nextUrl.pathname === '/rsc-cookies') {
+    const res = NextResponse.next()
+    res.cookies.set('rsc-cookie-value-1', `${Math.random()}`)
+    res.cookies.set('rsc-cookie-value-2', `${Math.random()}`)


Should this also work with cookies() directly (not from res)?

Yeah perhaps -- although writing via cookies() has been documented as only working in server actions/route handlers. So I think making this change could be separate from this while making the canonical middleware use-case work correctly.

test/e2e/app-dir/app-static/app-static.test.ts

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

ztanner force-pushed the 04-24-initialize_ALS_with_cookies_in_middleware branch 7 times, most recently from 6494081 to 2b59b4a Compare April 25, 2024 00:26

ztanner marked this pull request as ready for review April 25, 2024 13:57

ztanner requested review from timneutkens, ijjk, shuding, huozhi, feedthejim and wyattjoh as code owners April 25, 2024 13:57

ztanner force-pushed the 04-24-initialize_ALS_with_cookies_in_middleware branch 3 times, most recently from e863e11 to fd4a725 Compare April 25, 2024 15:21

ijjk reviewed Apr 25, 2024

View reviewed changes

test/e2e/app-dir/app-static/app-static.test.ts Outdated Show resolved Hide resolved

initialize ALS with cookies in middleware

45392d3

ztanner force-pushed the 04-24-initialize_ALS_with_cookies_in_middleware branch from fd4a725 to 45392d3 Compare April 25, 2024 16:08

ztanner requested a review from a team as a code owner April 25, 2024 16:08

ztanner requested a review from ijjk April 25, 2024 16:09

ijjk approved these changes Apr 25, 2024

View reviewed changes

ztanner merged commit 433faa8 into canary Apr 25, 2024
77 of 80 checks passed

ztanner deleted the 04-24-initialize_ALS_with_cookies_in_middleware branch April 25, 2024 16:47

github-actions bot added the locked label May 10, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

initialize ALS with cookies in middleware #65008

initialize ALS with cookies in middleware #65008

ztanner commented Apr 24, 2024 •

edited

ztanner commented Apr 24, 2024

ijjk commented Apr 24, 2024 •

edited

ijjk commented Apr 24, 2024 •

edited

ijjk Apr 25, 2024

ztanner Apr 25, 2024

initialize ALS with cookies in middleware #65008

initialize ALS with cookies in middleware #65008

Conversation

ztanner commented Apr 24, 2024 • edited

What

Why

How

Test Plan

ztanner commented Apr 24, 2024

ijjk commented Apr 24, 2024 • edited

Tests Passed

ijjk commented Apr 24, 2024 • edited

Stats from current PR

ijjk Apr 25, 2024

Choose a reason for hiding this comment

ztanner Apr 25, 2024

Choose a reason for hiding this comment

ztanner commented Apr 24, 2024 •

edited

ijjk commented Apr 24, 2024 •

edited

ijjk commented Apr 24, 2024 •

edited