diff --git a/‎packages/nuxt/src/app/composables/payload.ts‎
Lines changed: 10 additions & 4 deletions b/‎packages/nuxt/src/app/composables/payload.ts‎
Lines changed: 10 additions & 4 deletions
diff --git a/‎test/nuxt/composables.test.ts‎
Lines changed: 24 additions & 1 deletion b/‎test/nuxt/composables.test.ts‎
Lines changed: 24 additions & 1 deletion
diff --git a/‎vitest.config.ts‎
Lines changed: 1 addition & 0 deletions b/‎vitest.config.ts‎
Lines changed: 1 addition & 0 deletions
@@ -21,7 +21,10 @@ export async function loadPayload (url: string, opts: LoadPayloadOptions = {}):
   if (import.meta.server || !payloadExtraction) { return null }
   if (await shouldLoadPayload(url)) {
     const payloadURL = await _getPayloadURL(url, opts)
-    return await _importPayload(payloadURL) || null
+    // cached (`isr`/`swr`/`cache`) payloads are mutable within a deploy, so `?buildId`
+    // cannot invalidate them - defer to normal HTTP cache semantics instead
+    const cache: RequestCache = getRouteRules({ path: url }).payload ? 'default' : 'force-cache'
+    return await _importPayload(payloadURL, cache) || null
   }
   return null
 }
@@ -86,11 +89,11 @@ async function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
   return joinURL(baseOrCdnURL, u.pathname, filename + (hash ? `?${hash}` : ''))
 }
 
-async function _importPayload (payloadURL: string) {
+async function _importPayload (payloadURL: string, cache: RequestCache) {
   if (import.meta.server || !payloadExtraction) { return null }
   try {
     if (renderJsonPayloads) {
-      const res = await fetch(payloadURL, import.meta.dev ? {} : { cache: 'force-cache' })
+      const res = await fetch(payloadURL, import.meta.dev ? {} : { cache })
       if (!res.ok) {
         if (import.meta.dev) {
           console.warn(`[nuxt] Cannot load payload ${payloadURL}: ${res.status} ${res.statusText}`)
@@ -181,7 +184,10 @@ export async function getNuxtClientPayload () {
 
   const inlineData = await parsePayload(el.textContent || '')
 
-  const externalData = el.dataset.src ? await _importPayload(el.dataset.src) : undefined
+  // `prerenderedAt` is only set for build-time prerendered HTML - without it, the page
+  // was rendered at runtime (`isr`/`swr`/`cache`) and the external payload must match
+  // the HTML we were just served, so revalidate instead of trusting the browser cache
+  const externalData = el.dataset.src ? await _importPayload(el.dataset.src, inlineData.prerenderedAt ? 'force-cache' : 'no-cache') : undefined
 
   payloadCache = {
     ...inlineData,
 
@@ -23,7 +23,7 @@ import { useRouteAnnouncer } from '#app/composables/route-announcer'
 import { encodeRoutePath, encodeURL, resolveRouteObject } from '#app/composables/router'
 import { useRuntimeHook } from '#app/composables/runtime-hook'
 
-import { shouldLoadPayload } from '#app/composables/payload'
+import { loadPayload, shouldLoadPayload } from '#app/composables/payload'
 import { NuxtPage } from '#components'
 import { isTestingAppManifest } from '../matrix'
 
@@ -34,6 +34,12 @@ registerEndpoint('/api/test', defineEventHandler(event => ({
   headers: Object.fromEntries(event.headers.entries()),
 })))
 
+// the test environment builds with `ssr: false`, which disables payload extraction
+vi.mock('#build/nuxt.config.mjs', async importOriginal => ({
+  ...await importOriginal<Record<string, unknown>>(),
+  payloadExtraction: true,
+}))
+
 describe('app config', () => {
   it('can be updated', () => {
     const appConfig = useAppConfig()
@@ -440,6 +446,9 @@ describe.skipIf(!isTestingAppManifest)('app manifests', () => {
             },
           },
           "wildcard": {
+            "/isr": {
+              "isr": 60,
+            },
             "/pre": {
               "prerender": true,
             },
@@ -513,6 +522,20 @@ describe('compiled route rules', () => {
     const shouldLoadRedirect = await shouldLoadPayload('/pre/test')
     expect(shouldLoadRedirect).toBe(false)
   })
+
+  it('should only use `force-cache` for immutable prerendered payloads', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockImplementation(() => Promise.resolve(new Response('[{"data":1},{}]')))
+    try {
+      await loadPayload('/pre/thing')
+      expect(fetchSpy.mock.calls[0]![1]).toMatchObject({ cache: 'force-cache' })
+
+      // cached (isr/swr/cache) payloads can change within a deploy, so the browser cache must be revalidated
+      await loadPayload('/isr/thing')
+      expect(fetchSpy.mock.calls[1]![1]).toMatchObject({ cache: 'default' })
+    } finally {
+      fetchSpy.mockRestore()
+    }
+  })
 })
 
 describe('useRuntimeHook', () => {
 
@@ -12,6 +12,7 @@ const commonSettings: NuxtConfig = {
   pages: true,
   routeRules: {
     '/specific-prerendered': { prerender: true },
+    '/isr/**': { isr: 60 },
     '/pre/test': { redirect: '/' },
     '/pre/spa/**': { prerender: true, ssr: false },
     '/pre/**': { prerender: true },