Ignore an existing HMR refresh hash cookie with next start (#77714)

This is a follow-up fix for #75474.

When switching from `next dev` to `next start` locally, a user might
have an existing HMR refresh hash session cookie.

We need to make sure that the hash value is excluded from any `"use
cache"` cache keys, when running with `next start`. Otherwise, the cache
keys will be different when prerendering vs. handling a dynamic request,
e.g. when executing a server action.

In production, we now also omit the serialized `"$undefined"` value for
the HMR refresh hash from the cache keys to keep them shorter.

Author: unstubbable

packages/next/src/server/app-render/work-unit-async-storage.external.ts

@@ -269,8 +269,13 @@ export function getRenderResumeDataCache(
 }
 
 export function getHmrRefreshHash(
+  workStore: WorkStore,
   workUnitStore: WorkUnitStore
 ): string | undefined {
+  if (!workStore.dev) {
+    return undefined
+  }
+
   return workUnitStore.type === 'cache'
     ? workUnitStore.hmrRefreshHash
     : workUnitStore.type === 'request'

packages/next/src/server/use-cache/use-cache-wrapper.ts

@@ -53,12 +53,9 @@ import type { Params } from '../request/params'
 import React from 'react'
 import type { ImplicitTags } from '../lib/implicit-tags'
 
-type CacheKeyParts = [
-  buildId: string,
-  hmrRefreshHash: string | undefined,
-  id: string,
-  args: unknown[],
-]
+type CacheKeyParts =
+  | [buildId: string, id: string, args: unknown[]]
+  | [buildId: string, id: string, args: unknown[], hmrRefreshHash: string]
 
 export interface UseCachePageComponentProps {
   params: Promise<Params>
@@ -162,7 +159,8 @@ function generateCacheEntryWithCacheContext(
     explicitExpire: undefined,
     explicitStale: undefined,
     tags: null,
-    hmrRefreshHash: outerWorkUnitStore && getHmrRefreshHash(outerWorkUnitStore),
+    hmrRefreshHash:
+      outerWorkUnitStore && getHmrRefreshHash(workStore, outerWorkUnitStore),
     isHmrRefresh: useCacheOrRequestStore?.isHmrRefresh ?? false,
     serverComponentsHmrCache: useCacheOrRequestStore?.serverComponentsHmrCache,
     forceRevalidate: shouldForceRevalidate(workStore, outerWorkUnitStore),
@@ -309,7 +307,7 @@ async function generateCacheEntryImpl(
 ): Promise<[ReadableStream, Promise<CacheEntry>]> {
   const temporaryReferences = createServerTemporaryReferenceSet()
 
-  const [, , , args] =
+  const [, , args] =
     typeof encodedArguments === 'string'
       ? await decodeReply<CacheKeyParts>(
           encodedArguments,
@@ -543,7 +541,8 @@ export function cache(
       // components have been edited. This is a very coarse approach. But it's
       // also only a temporary solution until Action IDs are unique per
       // implementation. Remove this once Action IDs hash the implementation.
-      const hmrRefreshHash = workUnitStore && getHmrRefreshHash(workUnitStore)
+      const hmrRefreshHash =
+        workUnitStore && getHmrRefreshHash(workStore, workUnitStore)
 
       const hangingInputAbortSignal =
         workUnitStore?.type === 'prerender'
@@ -605,7 +604,11 @@ export function cache(
       }
 
       const temporaryReferences = createClientTemporaryReferenceSet()
-      const cacheKeyParts: CacheKeyParts = [buildId, hmrRefreshHash, id, args]
+
+      const cacheKeyParts: CacheKeyParts = hmrRefreshHash
+        ? [buildId, id, args, hmrRefreshHash]
+        : [buildId, id, args]
+
       const encodedCacheKeyParts: FormData | string = await encodeReply(
         cacheKeyParts,
         { temporaryReferences, signal: hangingInputAbortSignal }

test/development/app-dir/use-cache-dev/app/page.tsx

@@ -32,11 +32,11 @@ describe('use-cache-custom-handler', () => {
     )
 
     expect(next.cliOutput.slice(outputIndex)).toMatch(
-      /ModernCustomCacheHandler::get \["(development|[A-Za-z0-9_-]{21})","\$undefined","([0-9a-f]{2})+",\[\]\]/
+      /ModernCustomCacheHandler::get \["(development|[A-Za-z0-9_-]{21})","([0-9a-f]{2})+",\[\]\]/
     )
 
     expect(next.cliOutput.slice(outputIndex)).toMatch(
-      /ModernCustomCacheHandler::set \["(development|[A-Za-z0-9_-]{21})","\$undefined","([0-9a-f]{2})+",\[\]\]/
+      /ModernCustomCacheHandler::set \["(development|[A-Za-z0-9_-]{21})","([0-9a-f]{2})+",\[\]\]/
     )
 
     // The data should be cached initially.
@@ -67,11 +67,11 @@ describe('use-cache-custom-handler', () => {
     )
 
     expect(next.cliOutput.slice(outputIndex)).toMatch(
-      /LegacyCustomCacheHandler::get \["(development|[A-Za-z0-9_-]{21})","\$undefined","([0-9a-f]{2})+",\[\]\] \["_N_T_\/layout","_N_T_\/legacy\/layout","_N_T_\/legacy\/page","_N_T_\/legacy"\]/
+      /LegacyCustomCacheHandler::get \["(development|[A-Za-z0-9_-]{21})","([0-9a-f]{2})+",\[\]\] \["_N_T_\/layout","_N_T_\/legacy\/layout","_N_T_\/legacy\/page","_N_T_\/legacy"\]/
     )
 
     expect(next.cliOutput.slice(outputIndex)).toMatch(
-      /LegacyCustomCacheHandler::set \["(development|[A-Za-z0-9_-]{21})","\$undefined","([0-9a-f]{2})+",\[\]\]/
+      /LegacyCustomCacheHandler::set \["(development|[A-Za-z0-9_-]{21})","([0-9a-f]{2})+",\[\]\]/
     )
 
     // The data should be cached initially.

test/development/app-dir/use-cache-dev/use-cache-dev.test.ts

@@ -0,0 +1,41 @@
+import { revalidatePath } from 'next/cache'
+
+async function getRandomValue() {
+  'use cache'
+
+  return Math.random()
+}
+
+async function getData() {
+  'use cache'
+
+  return fetch('https://next-data-api-endpoint.vercel.app/api/random').then(
+    (res) =>
+      res
+        .text()
+        .then(async (text) => [text, 'foo', await getRandomValue()] as const)
+  )
+}
+
+export default async function Page() {
+  const [fetchedRandom, text, mathRandom] = await getData()
+
+  return (
+    <>
+      <div id="container">
+        <p id="fetchedRandom">{fetchedRandom}</p>
+        <p id="text">{text}</p>
+        <p id="mathRandom">{mathRandom}</p>
+      </div>
+      <p id="uncached">{new Date().toISOString()}</p>
+      <form
+        action={async () => {
+          'use server'
+          revalidatePath('/')
+        }}
+      >
+        <button id="revalidate">Revalidate</button>
+      </form>
+    </>
+  )
+}