Allow to opt-out from preflight cache (vercel#32767)

Fixes vercel#32727

With this PR we introduce a new header that can be used to respond from Middleware `x-middleware-cache`. When the value of this header is set to `no-cache`, the client will **not** store the effects read from a preflight response to be used in an upcoming check.

Instead of using `Cache-Control` we are using a custom header to not mess with browser specific caching. Accepting a specific value to opt out (`no-cache`) opens the future opportunity of having other caching strategies.

This feature solves the issue of having a preflight request whose parameters can change from the client affecting the effects. For example, having a cookie that would make a middleware rewrite to one pathname or another and allowing to change that cookie from the client. In that case we'd always need to revalidate the effects on navigation synchronously.

Of course when using this feature it is possible that we add some latency on navigation so the preferred mechanism will be caching by default since it covers the most common use cases.

Author: javivelasco

packages/next/shared/lib/router/router.ts

@@ -63,6 +63,7 @@ interface NextHistoryState {
 }
 
 interface PreflightData {
+  cache?: string | null
   redirect?: string | null
   refresh?: boolean
   rewrite?: string | null
@@ -1950,14 +1951,15 @@ export default class Router implements BaseRouter {
         }
 
         return {
+          cache: res.headers.get('x-middleware-cache'),
           redirect: res.headers.get('Location'),
           refresh: res.headers.has('x-middleware-refresh'),
           rewrite: res.headers.get('x-middleware-rewrite'),
           ssr: !!res.headers.get('x-middleware-ssr'),
         }
       })
       .then((data) => {
-        if (shouldCache) {
+        if (shouldCache && data.cache !== 'no-cache') {
           this.sde[cacheKey] = data
         }
 

test/integration/middleware/core/pages/rewrites/_middleware.js

@@ -30,8 +30,14 @@ export async function middleware(request) {
   }
 
   if (url.pathname === '/rewrites/rewrite-me-without-hard-navigation') {
-    url.pathname = '/rewrites/about'
     url.searchParams.set('middleware', 'foo')
-    return NextResponse.rewrite(url)
+    url.pathname =
+      request.cookies['about-bypass'] === '1'
+        ? '/rewrites/about-bypass'
+        : '/rewrites/about'
+
+    const response = NextResponse.rewrite(url)
+    response.headers.set('x-middleware-cache', 'no-cache')
+    return response
   }
 }

test/integration/middleware/core/pages/rewrites/about-bypass.js

@@ -0,0 +1,12 @@
+export default function AboutBypass({ message }) {
+  return (
+    <div>
+      <h1 className="title">About Bypassed Page</h1>
+      <p className={message}>{message}</p>
+    </div>
+  )
+}
+
+export const getServerSideProps = ({ query }) => ({
+  props: { message: query.message || '' },
+})

test/integration/middleware/core/test/index.test.js

@@ -213,6 +213,18 @@ function rewriteTests(locale = '') {
     const element = await browser.elementByCss('.middleware')
     expect(await element.text()).toEqual('foo')
   })
+
+  it('should allow to opt-out preflight caching', async () => {
+    const browser = await webdriver(context.appPort, '/rewrites/')
+    await browser.addCookie({ name: 'about-bypass', value: '1' })
+    await browser.eval('window.__SAME_PAGE = true')
+    await browser.elementByCss('#link-with-rewritten-url').click()
+    await browser.waitForElementByCss('.refreshed')
+    await browser.deleteCookies()
+    expect(await browser.eval('window.__SAME_PAGE')).toBe(true)
+    const element = await browser.elementByCss('.title')
+    expect(await element.text()).toEqual('About Bypassed Page')
+  })
 }
 
 function redirectTests(locale = '') {