From 5c283f596bf706b8c0f5040bb8583c99723525c6 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Mon, 11 May 2026 21:31:40 +0200
Subject: [PATCH 1/5] Fix React 18 tests (#93763)

## What?

Follow-up to #93247. There was a failure on the React 18 tests. Missed
in #93247 as they only run on `canary`.
---
 .../react-current-version.test.ts                      |  4 ++--
 test/e2e/telemetry/telemetry.test.ts                   | 10 ++++++++--
 test/lib/e2e-utils/index.ts                            |  9 +++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/test/e2e/react-current-version/react-current-version.test.ts b/test/e2e/react-current-version/react-current-version.test.ts
index a42587ef8533..dbd42b3c298b 100644
--- a/test/e2e/react-current-version/react-current-version.test.ts
+++ b/test/e2e/react-current-version/react-current-version.test.ts
@@ -1,4 +1,4 @@
-import { nextTestSetup, isNextDev } from 'e2e-utils'
+import { isReact18, nextTestSetup, isNextDev } from 'e2e-utils'
 import { join } from 'path'
 import { retry } from 'next-test-utils'
 
@@ -52,7 +52,7 @@ describe('react-current-version', () => {
       const browser = await next.browser('/')
       expect(await browser.eval('window.didHydrate')).toBe(true)
       expect(await browser.elementById('react-dom-version').text()).toMatch(
-        /19/
+        isReact18 ? /^18\./ : /^19\./
       )
     })
 
diff --git a/test/e2e/telemetry/telemetry.test.ts b/test/e2e/telemetry/telemetry.test.ts
index 5043792ad3d9..fbf5ffb7e557 100644
--- a/test/e2e/telemetry/telemetry.test.ts
+++ b/test/e2e/telemetry/telemetry.test.ts
@@ -1,9 +1,15 @@
 import path from 'path'
 import fs from 'fs-extra'
-import { nextTestSetup } from 'e2e-utils'
+import { isReact18, nextTestSetup } from 'e2e-utils'
 import { findAllTelemetryEvents } from 'next-test-utils'
 
-describe('Telemetry CLI', () => {
+// The telemetry suite drives multiple consecutive `next build` invocations
+// against the same isolated install. With React 18 these runs intermittently
+// fail with "can not run export while server is running, use next.stop()
+// first". The telemetry feature itself is not React-version-specific, so
+// skipping under React 18 is fine until the underlying build/server lifecycle
+// race is fixed.
+;(isReact18 ? describe.skip : describe)('Telemetry CLI', () => {
   const { next, isNextStart, isTurbopack, skipped } = nextTestSetup({
     files: __dirname,
     skipStart: true,
diff --git a/test/lib/e2e-utils/index.ts b/test/lib/e2e-utils/index.ts
index 702bdcbf30c2..accdde282c78 100644
--- a/test/lib/e2e-utils/index.ts
+++ b/test/lib/e2e-utils/index.ts
@@ -167,6 +167,15 @@ const isNextTestWasm = !!process.env.NEXT_TEST_WASM
 export const itTurbopack =
   !isNextTestWasm && shouldUseTurbopack() ? it : it.skip
 
+/**
+ * Whether the test is running against React 18 (based on
+ * `process.env.NEXT_TEST_REACT_VERSION`). When the env var is unset or empty,
+ * the test install uses the default React peer dependency version which is
+ * currently React 19, so this is `false`.
+ */
+export const isReact18 =
+  parseInt(process.env.NEXT_TEST_REACT_VERSION || '', 10) === 18
+
 if (!testMode) {
   throw new Error(
     `No 'NEXT_TEST_MODE' set in environment, this is required for e2e-utils`

From 7f90cce674807e805bf8953b531fdf2d8259fece Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Mon, 11 May 2026 21:37:13 +0200
Subject: [PATCH 2/5] Extend instant error overlay to metadata, viewport, and
 sync IO errors (#93287)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What?

Extends the card-based instant error overlay (#92638) to metadata,
viewport, and sync IO errors, and updates the matching build/CLI
messages to a consistent structured format.

### Why?

After the blocking-route redesign, metadata, viewport, and sync IO
errors still used the old prose format with no visual fix guidance.

### Demo

- Metadata:
[runtime](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/12-cookies-in-metadata)
·
[dynamic](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/13-fetch-in-metadata)
- Viewport:
[runtime](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/14-cookies-in-viewport)
·
[dynamic](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/15-fetch-in-viewport)
- Sync IO:
[Math.random()](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/38-math-random-no-instant)
·
[Date.now()](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/39-date-now-no-instant)
·
[crypto.randomUUID()](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/40-crypto-random-no-instant)
- Sync IO in Client:
[Math.random()](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/44-client-math-random-no-suspense)
·
[Date.now()](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/43-client-date-no-suspense)
·
[crypto.randomUUID()](https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/45-client-crypto-no-suspense)
- [Fix overview (all
cards)](https://error-messages-overhaul-ibsl.labs.vercel.dev/fix-overview)

### How?

**Overlay**

- New `dynamic-metadata`, `dynamic-viewport`, and `sync-io` error types
in `errors.tsx`, all rendered through `InstantRuntimeError` with
kind-specific fix cards
- `isSyncIOError()` detects sync IO via the docs URL pattern, mirroring
`isRuntimeVariant()`

**Build & CLI messages**

- Headlines aligned to "Next.js encountered..." across all error
families
- `blocking-route-messages.ts`: metadata/viewport errors restructured
from prose to "Ways to fix this:" bullets
- Sync IO messages extracted into `sync-io-messages.ts`, mirroring
`blocking-route-messages.ts`. Helpers renamed to `createSyncIOError` /
`createSyncIORuntimeError` / `createSyncIOClientError` to match the
`create*Error` pattern
---
 crates/next-core/src/next_config.rs           |    4 +-
 .../src/next_api/turbopack_ctx.rs             |    5 +-
 packages/next/errors.json                     |   44 +-
 .../instant/instant-guidance-data.ts          |  521 +++++
 .../components/instant/instant-guidance.tsx   |  165 +-
 .../dev-overlay/container/errors.tsx          |  717 +++----
 .../dev-overlay/styles/colors.css             |    4 +
 .../dev-overlay/styles/dark-theme.css         |    8 +
 .../app-render/blocking-route-messages.ts     |   77 +-
 .../server/app-render/dynamic-rendering.ts    |   12 +-
 .../src/server/app-render/sync-io-messages.ts |   81 +
 .../node-environment-extensions/io-utils.tsx  |  103 +-
 .../cache-components-dev-errors.test.ts       |   14 +-
 ...components-dev-fallback-validation.test.ts |   36 +-
 .../cache-components-errors.test.ts           | 1724 +++++++++++------
 .../instant-validation-build.test.ts          |    4 +-
 .../instant-validation-causes.test.ts         |    8 +-
 .../instant-validation-level-error.test.ts    |   26 +-
 ...tant-validation-level-manual-error.test.ts |   14 +-
 ...nt-validation-level-manual-warning.test.ts |   34 +-
 .../instant-validation-level-warning.test.ts  |   14 +-
 .../instant-validation-static-shells.test.ts  |    2 +-
 .../instant-validation-parallel-slots.test.ts |   48 +-
 .../instant-validation.test.ts                |  413 ++--
 ...metadata-static-file-dynamic-route.test.ts |   14 +-
 .../metadata-static-file-group-route.test.ts  |   14 +-
 ...ata-static-file-intercepting-route.test.ts |   14 +-
 ...etadata-static-file-parallel-route.test.ts |   14 +-
 .../metadata-static-file-root-route.test.ts   |   14 +-
 .../metadata-static-file-static-route.test.ts |   14 +-
 .../build-output-prerender.test.ts            |   62 +-
 .../next-server-nft/next-server-nft.test.ts   |    1 +
 32 files changed, 2671 insertions(+), 1554 deletions(-)
 create mode 100644 packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance-data.ts
 create mode 100644 packages/next/src/server/app-render/sync-io-messages.ts

diff --git a/crates/next-core/src/next_config.rs b/crates/next-core/src/next_config.rs
index 01fd70feaf62..24409322890f 100644
--- a/crates/next-core/src/next_config.rs
+++ b/crates/next-core/src/next_config.rs
@@ -1480,7 +1480,9 @@ pub struct OptionJsonValue(
 );
 
 fn turbopack_config_documentation_link() -> RcStr {
-    rcstr!("https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders")
+    rcstr!(
+        "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders"
+    )
 }
 
 #[turbo_tasks::value(shared)]
diff --git a/crates/next-napi-bindings/src/next_api/turbopack_ctx.rs b/crates/next-napi-bindings/src/next_api/turbopack_ctx.rs
index 396cab8a7239..4ba308276b5a 100644
--- a/crates/next-napi-bindings/src/next_api/turbopack_ctx.rs
+++ b/crates/next-napi-bindings/src/next_api/turbopack_ctx.rs
@@ -409,7 +409,10 @@ pub fn log_internal_error_and_inform(internal_error: &anyhow::Error) {
     let bug_report_url = format!(
         "https://bugs.nextjs.org/search?category=turbopack-error-report&title={}&body={}&labels=Turbopack,Turbopack%20Panic%20Backtrace",
         &urlencoding::encode(&title),
-        &urlencoding::encode(&format!("{}\n\nError message:\n```\n{}\n```", &version_str, &internal_error_str))
+        &urlencoding::encode(&format!(
+            "{}\n\nError message:\n```\n{}\n```",
+            &version_str, &internal_error_str
+        ))
     );
     let bug_report_message = if supports_hyperlinks::supports_hyperlinks() {
         "clicking here.".hyperlink(&bug_report_url)
diff --git a/packages/next/errors.json b/packages/next/errors.json
index 12f00e78ce21..bb13cd07d91a 100644
--- a/packages/next/errors.json
+++ b/packages/next/errors.json
@@ -1190,5 +1190,47 @@
   "1189": "Route \"%s\" accessed header \"%s\" which is not defined in the \\`unstable_samples\\` of \\`unstable_instant\\`. Add it to the sample's \\`headers\\` array, or \\`[\"%s\", null]\\` if it should be absent.",
   "1190": "Route \"%s\" accessed param \"%s\" which is not defined in the \\`unstable_samples\\` of \\`unstable_instant\\`. Add it to the sample's \\`params\\` object.",
   "1191": "Route \"%s\" called %s but param%s %s %s not defined in the \\`unstable_samples\\` of \\`unstable_instant\\`. %s requires all route params to be provided.",
-  "1192": "Route \"%s\" accessed root param \"%s\" which is not defined in the \\`unstable_samples\\` of \\`unstable_instant\\`. Add it to the sample's \\`params\\` object."
+  "1192": "Route \"%s\" accessed root param \"%s\" which is not defined in the \\`unstable_samples\\` of \\`unstable_instant\\`. Add it to the sample's \\`params\\` object.",
+  "1193": "Route \"%s\": Next.js encountered runtime data in \\`generateViewport()\\`.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` in \\`generateViewport()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static viewport export instead of \\`generateViewport()\\`\\n  - Wrap your document \\`<body>\\` in \\`<Suspense>\\`\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1194": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateViewport()\\`.\\n\\nThis prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static viewport export instead of \\`generateViewport()\\`\\n  - Cache the viewport data with \\`\"use cache\"\\` in \\`generateViewport()\\`\\n  - Wrap your document \\`<body>\\` in \\`<Suspense>\\`\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1195": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateMetadata()\\`.\\n\\nThis prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static metadata export instead of \\`generateMetadata()\\`\\n  - Cache the metadata with \\`\"use cache\"\\` in \\`generateMetadata()\\`\\n  - Add a dynamic data access (e.g. \\`await connection()\\`) to the page to signal intentional dynamism\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1196": "Route \"%s\" used \\`%s\\` inside a Client Component without a Suspense boundary above it. See more info here: %s",
+  "1197": "Route \"%s\": Next.js encountered uncached data in \\`generateViewport()\\`.\\n\\n\\`fetch(...)\\` or \\`connection()\\` in \\`generateViewport()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Prerender and cache the viewport data with \\`\"use cache\"\\` in \\`generateViewport()\\`\\n  - Wrap your document \\`<body>\\` in \\`<Suspense>\\`\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1198": "Route \"%s\": Next.js encountered runtime data during the initial render.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense>\\` by moving the data access into a child component within a boundary\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Allow blocking route by setting \\`export const instant = false\\`\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1199": "Route \"%s\": Next.js encountered runtime data in \\`generateMetadata()\\`.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` in \\`generateMetadata()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static metadata export instead of \\`generateMetadata()\\`\\n  - Render page at request time by adding a dynamic data access (e.g. \\`await connection()\\`) to the page\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1200": "Route \"%s\": Next.js encountered uncached data in \\`generateMetadata()\\`.\\n\\n\\`fetch(...)\\` or \\`connection()\\` in \\`generateMetadata()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Prerender and cache the metadata with \\`\"use cache\"\\` in \\`generateMetadata()\\`\\n  - Render page at request time by adding a dynamic data access (e.g. \\`await connection()\\`) to the page\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1201": "Route \"%s\": Next.js encountered uncached or runtime data during the initial render.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Prerender and cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense>\\` by moving the data access into a child component within a boundary\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Allow blocking route by setting \\`export const instant = false\\`\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1202": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateViewport()\\`.\\n\\nThis prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static viewport export instead of \\`generateViewport()\\`\\n  - Prerender and cache the viewport data with \\`\"use cache\"\\` in \\`generateViewport()\\`\\n  - Wrap your document \\`<body>\\` in \\`<Suspense>\\`\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1203": "Route \"%s\": Next.js encountered uncached data during the initial render.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Prerender and cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense>\\` by moving the data access into a child component within a boundary\\n  - Allow blocking route by setting \\`export const instant = false\\`\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1204": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateMetadata()\\`.\\n\\nThis prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static metadata export instead of \\`generateMetadata()\\`\\n  - Prerender and cache the metadata with \\`\"use cache\"\\` in \\`generateMetadata()\\`\\n  - Render page at request time by adding a dynamic data access (e.g. \\`await connection()\\`) to the page\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1205": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateViewport()\\`.\\n\\nThis prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static viewport export instead of \\`generateViewport()\\`\\n  - Cache the viewport data with \\`\"use cache\"\\` in \\`generateViewport()\\`\\n  - Wrap your document \\`<body>\\` in \\`<Suspense>\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1206": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateMetadata()\\`.\\n\\nThis prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static metadata export instead of \\`generateMetadata()\\`\\n  - Cache the metadata with \\`\"use cache\"\\` in \\`generateMetadata()\\`\\n  - Add a dynamic data access (e.g. \\`await connection()\\`) to the page to render it at request time\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1207": "Route \"%s\": Next.js encountered runtime data in \\`generateMetadata()\\`.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` in \\`generateMetadata()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static metadata export instead of \\`generateMetadata()\\`\\n  - Add a dynamic data access (e.g. \\`await connection()\\`) to the page to render it at request time\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1208": "Route \"%s\": Next.js encountered runtime data in \\`generateViewport()\\`.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` in \\`generateViewport()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Use a static viewport export instead of \\`generateViewport()\\`\\n  - Wrap your document \\`<body>\\` in \\`<Suspense>\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1209": "Route \"%s\": Next.js encountered runtime data during the initial render.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Move the data access into a child component and wrap it in \\`<Suspense>\\`\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1210": "Route \"%s\": Next.js encountered uncached data in \\`generateViewport()\\`.\\n\\n\\`fetch(...)\\` or \\`connection()\\` in \\`generateViewport()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the viewport data with \\`\"use cache\"\\` in \\`generateViewport()\\`\\n  - Wrap your document \\`<body>\\` in \\`<Suspense>\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+  "1211": "Route \"%s\": Next.js encountered uncached data during the initial render.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Move the data access into a child component and wrap it in \\`<Suspense>\\`\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1212": "Route \"%s\": Next.js encountered uncached data in \\`generateMetadata()\\`.\\n\\n\\`fetch(...)\\` or \\`connection()\\` in \\`generateMetadata()\\` prevents the page from being prerendered, leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the metadata with \\`\"use cache\"\\` in \\`generateMetadata()\\`\\n  - Add a dynamic data access (e.g. \\`await connection()\\`) to the page to render it at request time\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1213": "Route \"%s\": Next.js encountered uncached or runtime data during the initial render.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Move the data access into a child component and wrap it in \\`<Suspense>\\`\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1214": "Route \"%s\": Next.js encountered runtime data during the initial render.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Place the data access within \\`<Suspense fallback={...}>\\` to provide a placeholder while it loads\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1215": "Route \"%s\": Next.js encountered uncached data during the initial render.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Place the data access within \\`<Suspense fallback={...}>\\` to provide a placeholder while it loads\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1216": "Route \"%s\": Next.js encountered uncached or runtime data during the initial render.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Place the data access within \\`<Suspense fallback={...}>\\` to provide a placeholder while it loads\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1217": "Route \"%s\": Next.js encountered uncached or runtime data during the initial render.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Place the data access within a \\`<Suspense fallback={...}>\\` boundary\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1218": "Route \"%s\": Next.js encountered uncached data during the initial render.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Place the data access within a \\`<Suspense fallback={...}>\\` boundary\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1219": "Route \"%s\": Next.js encountered runtime data during the initial render.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Place the data access within a \\`<Suspense fallback={...}>\\` boundary\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1220": "Route \"%s\": Next.js encountered uncached data during the initial render.\\n\\n\\`fetch(...)\\` or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1221": "Route \"%s\": Next.js encountered runtime data during the initial render.\\n\\n\\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1222": "Route \"%s\": Next.js encountered uncached or runtime data during the initial render.\\n\\n\\`fetch(...)\\`, \\`cookies()\\`, \\`headers()\\`, \\`params\\`, \\`searchParams\\`, or \\`connection()\\` accessed outside of \\`<Suspense>\\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\\n\\nWays to fix this:\\n  - Cache the data access with \\`\"use cache\"\\`\\n  - Provide a placeholder with \\`<Suspense fallback={...}>\\` around the data access\\n  - Use \\`generateStaticParams\\` to make route params static\\n  - Set \\`export const instant = false\\` to allow a blocking route\\n\\nLearn more: https://nextjs.org/docs/messages/blocking-route",
+  "1223": "Route \"%s\": Next.js encountered %s during the initial render.\\n\\nThis value must either be prerendered or computed per request.\\n\\nWays to fix this:\\n  - Add a dynamic data access before this call (e.g. \\`await connection()\\`)\\n  - Move the expression into a \\`\"use client\"\\` component\\n  - Move the expression into a \\`\"use cache\"\\` component\\n\\nLearn more: %s",
+  "1224": "Route \"%s\" used %s inside a Client Component without a Suspense boundary above it. See more info here: %s",
+  "1225": "Route \"%s\": Next.js encountered %s during the initial render.\\n\\nThis value must either be prerendered or computed per request.\\n\\nWays to fix this:\\n  - Add a dynamic data access before this call (e.g. \\`await connection()\\`)\\n  - Move the expression into a \\`\"use cache\"\\` component\\n  - Move the expression into a \\`\"use client\"\\` component\\n\\nLearn more: %s",
+  "1226": "Route \"%s\": Next.js encountered %s during the initial render.\\n\\nThis value must either be prerendered or computed per request.\\n\\nWays to fix this:\\n  - Render at request time by adding a dynamic data access (e.g. \\`await connection()\\`) before this call\\n  - Prerender and cache the value with \\`\"use cache\"\\`\\n  - Render the value on the client with \\`\"use client\"\\`\\n\\nLearn more: %s",
+  "1227": "Route \"%s\": Next.js encountered %s during the initial render.\\n\\nThis value must either be prerendered or computed per request.\\n\\nWays to fix this:\\n  - Render at request time by adding a dynamic data access (e.g. \\`await connection()\\`) before this call\\n  - Prerender and cache the value with \\`\"use cache\"\\`\\n  - Render the value on the client with \\`\"use client\"\\`\\n%s\\nLearn more: %s",
+  "1228": "Route \"%s\": Next.js encountered %s in a Client Component.\\n\\nThis value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.\\n\\nWays to fix this:\\n  - Wrap the Client Component in \\`<Suspense fallback={...}>\\`\\n  - Move the read into a \\`useEffect\\` or event handler\\n\\nLearn more: %s",
+  "1229": "Route \"%s\": Next.js encountered uncached or runtime data in \\`generateMetadata()\\`.\\n\\nThis route's metadata is blocked, but the rest of its content can be prerendered.\\n\\nWays to fix this:\\n  - Use a static metadata export instead of \\`generateMetadata()\\`\\n  - Cache the metadata with \\`\"use cache\"\\` in \\`generateMetadata()\\`\\n  - Add a dynamic data access (e.g. \\`await connection()\\`) to the page to render it at request time\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1230": "Route \"%s\": Next.js encountered runtime data in \\`generateMetadata()\\`.\\n\\nThis route's metadata is blocked, but the rest of its content can be prerendered. \\`cookies()\\`, \\`headers()\\`, \\`params\\`, or \\`searchParams\\` accessed in \\`generateMetadata()\\` cause it to run dynamically.\\n\\nWays to fix this:\\n  - Use a static metadata export instead of \\`generateMetadata()\\`\\n  - Add a dynamic data access (e.g. \\`await connection()\\`) to the page to render it at request time\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1231": "Route \"%s\": Next.js encountered uncached data in \\`generateMetadata()\\`.\\n\\nThis route's metadata is blocked, but the rest of its content can be prerendered. \\`fetch(...)\\` or \\`connection()\\` accessed in \\`generateMetadata()\\` cause it to run dynamically.\\n\\nWays to fix this:\\n  - Cache the metadata with \\`\"use cache\"\\` in \\`generateMetadata()\\`\\n  - Add a dynamic data access (e.g. \\`await connection()\\`) to the page to render it at request time\\n\\nLearn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+  "1244": "Route \"%s\": Next.js encountered %s during the initial render.\\n\\nThis value must either be prerendered or computed per request.\\n\\nWays to fix this:\\n  - Render at request time by adding a dynamic data access (e.g. \\`await connection()\\`) before this call\\n  - Prerender and cache the value with \\`\"use cache\"\\`\\n  - Render the value on the client with \\`\"use client\"\\`\\n%s\\nLearn more: %s",
+  "1245": "Route \"%s\": Next.js encountered %s in a Client Component.\\n\\nThis value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.\\n\\nWays to fix this:\\n  - Wrap the Client Component in \\`<Suspense fallback={...}>\\`\\n  - Move the read into a \\`useEffect\\` or event handler\\n\\nLearn more: %s",
+  "1247": "Route \"%s\": Next.js encountered %s without an explicit rendering intent.\\n\\nThis value can change between renders, so it must be either prerendered or computed later.\\n\\nWays to fix this:\\n  - Render at request time by adding a dynamic data access (e.g. \\`await connection()\\`) before this call\\n  - Prerender and cache the value with \\`\"use cache\"\\`\\n  - Render the value on the client with \\`\"use client\"\\`\\n%s\\nLearn more: %s"
 }
diff --git a/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance-data.ts b/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance-data.ts
new file mode 100644
index 000000000000..bb8f84b50aee
--- /dev/null
+++ b/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance-data.ts
@@ -0,0 +1,521 @@
+export type CardColor = 'blue' | 'purple' | 'red' | 'amber' | 'teal'
+
+export type FixCard = {
+  title: string
+  color: CardColor
+  snippets: Snippet[]
+  conditional?: boolean
+}
+
+export type SnippetPart = {
+  text: string
+  highlight?: boolean
+}
+
+export type Snippet = {
+  text: string
+  highlight?: boolean
+  // When present, render the line with inline highlighted parts instead of
+  // applying the line-level `highlight` flag. `text` is still kept for any
+  // tooling that reads the full line content.
+  parts?: SnippetPart[]
+}
+
+// ── Blocking-route cards ──────────────────────────
+
+const runtimeCards: FixCard[] = [
+  {
+    title: 'Provide a placeholder with Suspense',
+    color: 'purple',
+    snippets: [
+      { text: '<Suspense fallback={…}>', highlight: true },
+      { text: '  <DataChild />' },
+      { text: '</Suspense>', highlight: true },
+    ],
+  },
+  {
+    title: 'Make route params static',
+    color: 'blue',
+    conditional: true,
+    snippets: [
+      { text: 'export async function' },
+      {
+        text: '  generateStaticParams() {',
+        parts: [
+          { text: '  ' },
+          { text: 'generateStaticParams()', highlight: true },
+          { text: ' {' },
+        ],
+      },
+      {
+        text: '  return [{ slug: "…" }]',
+        parts: [
+          { text: '  return ' },
+          { text: '[{ slug: "…" }]', highlight: true },
+        ],
+      },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Allow blocking route',
+    color: 'red',
+    snippets: [
+      { text: 'export const instant = false', highlight: true },
+      { text: '' },
+      { text: 'export default async function Page() {' },
+    ],
+  },
+]
+
+const dynamicCards: FixCard[] = [
+  {
+    title: 'Prerender and cache',
+    color: 'blue',
+    snippets: [
+      { text: 'async function getData() {' },
+      { text: '  "use cache"', highlight: true },
+      { text: '  return db.query(…)' },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Provide a placeholder with Suspense',
+    color: 'purple',
+    snippets: [
+      { text: '<Suspense fallback={…}>', highlight: true },
+      { text: '  <DataChild />' },
+      { text: '</Suspense>', highlight: true },
+    ],
+  },
+  {
+    title: 'Allow blocking route',
+    color: 'red',
+    snippets: [
+      { text: 'export const instant = false', highlight: true },
+      { text: '' },
+      { text: 'export default async function Page() {' },
+    ],
+  },
+]
+
+// ── Metadata cards ────────────────────────────────
+
+const metadataRuntimeCards: FixCard[] = [
+  {
+    title: 'Use static metadata',
+    color: 'blue',
+    snippets: [
+      { text: 'export const metadata = {' },
+      { text: '  title: "My Page"', highlight: true },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Render page at request time',
+    color: 'purple',
+    snippets: [
+      { text: 'export default async function Page() {' },
+      { text: '  await connection()', highlight: true },
+      { text: '  return …' },
+      { text: '}' },
+    ],
+  },
+]
+
+const metadataDynamicCards: FixCard[] = [
+  {
+    title: 'Prerender and cache',
+    color: 'blue',
+    snippets: [
+      { text: 'async function generateMetadata() {' },
+      { text: '  "use cache"', highlight: true },
+      { text: '  return await cms.getPageMeta(…)' },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Render page at request time',
+    color: 'purple',
+    snippets: [
+      { text: 'export default async function Page() {' },
+      { text: '  await connection()', highlight: true },
+      { text: '  return …' },
+      { text: '}' },
+    ],
+  },
+]
+
+// ── Viewport cards ────────────────────────────────
+
+const viewportRuntimeCards: FixCard[] = [
+  {
+    title: 'Use static viewport',
+    color: 'blue',
+    snippets: [
+      { text: 'export const viewport = {' },
+      { text: '  themeColor: "#000"', highlight: true },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Wrap body in Suspense',
+    color: 'purple',
+    snippets: [
+      { text: '<Suspense>', highlight: true },
+      { text: '  <body>{children}</body>' },
+      { text: '</Suspense>', highlight: true },
+    ],
+  },
+  {
+    title: 'Allow blocking route',
+    color: 'red',
+    snippets: [
+      { text: 'export const instant = false', highlight: true },
+      { text: '' },
+      { text: 'export default async function Page() {' },
+    ],
+  },
+]
+
+const viewportDynamicCards: FixCard[] = [
+  {
+    title: 'Prerender and cache',
+    color: 'blue',
+    snippets: [
+      { text: 'async function generateViewport() {' },
+      { text: '  "use cache"', highlight: true },
+      { text: '  return await db.getViewport(…)' },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Wrap body in Suspense',
+    color: 'purple',
+    snippets: [
+      { text: '<Suspense>', highlight: true },
+      { text: '  <body>{children}</body>' },
+      { text: '</Suspense>', highlight: true },
+    ],
+  },
+  {
+    title: 'Allow blocking route',
+    color: 'red',
+    snippets: [
+      { text: 'export const instant = false', highlight: true },
+      { text: '' },
+      { text: 'export default async function Page() {' },
+    ],
+  },
+]
+
+// ── Sync IO cards (per API) ───────────────────────
+
+const syncMathCards: FixCard[] = [
+  {
+    title: 'Render at request time',
+    color: 'purple',
+    snippets: [
+      { text: 'await connection()', highlight: true },
+      { text: 'const id = Math.random()' },
+      { text: 'return <Item id={id} />' },
+    ],
+  },
+  {
+    title: 'Prerender and cache',
+    color: 'blue',
+    snippets: [
+      { text: 'async function RandomId() {' },
+      { text: '  "use cache"', highlight: true },
+      { text: '  return String(Math.random())' },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Render on the client',
+    color: 'amber',
+    snippets: [
+      { text: '"use client"', highlight: true },
+      { text: 'export function RandomId() {' },
+      { text: '  return String(Math.random())' },
+      { text: '}' },
+    ],
+  },
+]
+
+const syncDateCards: FixCard[] = [
+  {
+    title: 'Render at request time',
+    color: 'purple',
+    snippets: [
+      { text: 'await connection()', highlight: true },
+      { text: 'const t = Date.now()' },
+      { text: 'return <Banner time={t} />' },
+    ],
+  },
+  {
+    title: 'Prerender and cache',
+    color: 'blue',
+    snippets: [
+      { text: 'async function Timestamp() {' },
+      { text: '  "use cache"', highlight: true },
+      { text: '  return <time>{Date.now()}</time>' },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Render on the client',
+    color: 'amber',
+    snippets: [
+      { text: '"use client"', highlight: true },
+      { text: 'export function RelativeTime() {' },
+      { text: '  return timeAgo(Date.now())' },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Measure elapsed time',
+    color: 'teal',
+    conditional: true,
+    snippets: [
+      { text: 'const start = performance.now()', highlight: true },
+      { text: 'doWork()' },
+      { text: 'const ms = performance.now() - start' },
+    ],
+  },
+]
+
+const syncCryptoCards: FixCard[] = [
+  {
+    title: 'Render at request time',
+    color: 'purple',
+    snippets: [
+      { text: 'await connection()', highlight: true },
+      { text: 'const id = crypto.randomUUID()' },
+      { text: 'return <Token id={id} />' },
+    ],
+  },
+  {
+    title: 'Prerender and cache',
+    color: 'blue',
+    snippets: [
+      { text: 'async function TokenId() {' },
+      { text: '  "use cache"', highlight: true },
+      { text: '  return crypto.randomUUID()' },
+      { text: '}' },
+    ],
+  },
+  {
+    title: 'Render on the client',
+    color: 'amber',
+    snippets: [
+      { text: '"use client"', highlight: true },
+      { text: 'export function TokenId() {' },
+      { text: '  return crypto.randomUUID()' },
+      { text: '}' },
+    ],
+  },
+]
+
+// ── Client sync IO cards (no Suspense above) ──────
+
+const syncClientDateCards: FixCard[] = [
+  {
+    title: 'Wrap in Suspense',
+    color: 'purple',
+    snippets: [
+      { text: '<Suspense fallback={…}>', highlight: true },
+      { text: '  <DateDisplay />' },
+      { text: '</Suspense>', highlight: true },
+    ],
+  },
+  {
+    title: 'Move into effect or event handler',
+    color: 'amber',
+    snippets: [
+      { text: 'useEffect(() => {', highlight: true },
+      { text: '  setT(Date.now())' },
+      { text: '}, [])' },
+    ],
+  },
+]
+
+const syncClientMathCards: FixCard[] = [
+  {
+    title: 'Wrap in Suspense',
+    color: 'purple',
+    snippets: [
+      { text: '<Suspense fallback={…}>', highlight: true },
+      { text: '  <RandomId />' },
+      { text: '</Suspense>', highlight: true },
+    ],
+  },
+  {
+    title: 'Move into effect or event handler',
+    color: 'amber',
+    snippets: [
+      { text: 'useEffect(() => {', highlight: true },
+      { text: '  setId(String(Math.random()))' },
+      { text: '}, [])' },
+    ],
+  },
+]
+
+const syncClientCryptoCards: FixCard[] = [
+  {
+    title: 'Wrap in Suspense',
+    color: 'purple',
+    snippets: [
+      { text: '<Suspense fallback={…}>', highlight: true },
+      { text: '  <TokenId />' },
+      { text: '</Suspense>', highlight: true },
+    ],
+  },
+  {
+    title: 'Move into effect or event handler',
+    color: 'amber',
+    snippets: [
+      { text: 'useEffect(() => {', highlight: true },
+      { text: '  setId(crypto.randomUUID())' },
+      { text: '}, [])' },
+    ],
+  },
+]
+
+// ── Card lookup ───────────────────────────────────
+
+export type GuidanceKind =
+  | 'blocking-route'
+  | 'metadata'
+  | 'viewport'
+  | 'sync-io'
+  | 'sync-io-client'
+
+export type GuidanceVariant = 'runtime' | 'navigation'
+
+export const DOCS_URLS: Record<GuidanceKind, string> = {
+  'blocking-route': 'https://nextjs.org/docs/messages/blocking-route',
+  metadata: 'https://nextjs.org/docs/messages/next-prerender-dynamic-metadata',
+  viewport: 'https://nextjs.org/docs/messages/next-prerender-dynamic-viewport',
+  'sync-io': '',
+  'sync-io-client': '',
+}
+
+export const SYNC_IO_DOCS: Record<string, string> = {
+  'Math.random()': 'https://nextjs.org/docs/messages/next-prerender-random',
+  'Date.now()': 'https://nextjs.org/docs/messages/next-prerender-current-time',
+  'Date()': 'https://nextjs.org/docs/messages/next-prerender-current-time',
+  'new Date()': 'https://nextjs.org/docs/messages/next-prerender-current-time',
+  'crypto.randomUUID()':
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  'crypto.getRandomValues()':
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  "require('node:crypto').randomUUID()":
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  "require('node:crypto').randomBytes(size)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  "require('node:crypto').randomFillSync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  "require('node:crypto').randomInt(min, max)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  "require('node:crypto').generatePrimeSync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  "require('node:crypto').generateKeyPairSync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+  "require('node:crypto').generateKeySync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto',
+}
+
+export const SYNC_IO_CLIENT_DOCS: Record<string, string> = {
+  'Math.random()':
+    'https://nextjs.org/docs/messages/next-prerender-random-client',
+  'Date.now()':
+    'https://nextjs.org/docs/messages/next-prerender-current-time-client',
+  'Date()':
+    'https://nextjs.org/docs/messages/next-prerender-current-time-client',
+  'new Date()':
+    'https://nextjs.org/docs/messages/next-prerender-current-time-client',
+  'crypto.randomUUID()':
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  'crypto.getRandomValues()':
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  "require('node:crypto').randomUUID()":
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  "require('node:crypto').randomBytes(size)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  "require('node:crypto').randomFillSync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  "require('node:crypto').randomInt(min, max)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  "require('node:crypto').generatePrimeSync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  "require('node:crypto').generateKeyPairSync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+  "require('node:crypto').generateKeySync(...)":
+    'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+}
+
+export const EXPLANATIONS: Record<GuidanceKind, string> = {
+  'blocking-route':
+    'This prevents the route from being prerendered, blocking navigation and leading to a slower user experience.',
+  metadata:
+    "This route's metadata is blocked, but the rest of its content can be prerendered.",
+  viewport:
+    'This prevents the page from being prerendered, leading to a slower user experience.',
+  'sync-io': '',
+  'sync-io-client':
+    'This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.',
+}
+
+const syncCardsByCause: Record<string, FixCard[]> = {
+  'Math.random()': syncMathCards,
+  'Date.now()': syncDateCards,
+  'Date()': syncDateCards,
+  'new Date()': syncDateCards,
+  'crypto.randomUUID()': syncCryptoCards,
+  'crypto.getRandomValues()': syncCryptoCards,
+  "require('node:crypto').randomUUID()": syncCryptoCards,
+  "require('node:crypto').randomBytes(size)": syncCryptoCards,
+  "require('node:crypto').randomFillSync(...)": syncCryptoCards,
+  "require('node:crypto').randomInt(min, max)": syncCryptoCards,
+  "require('node:crypto').generatePrimeSync(...)": syncCryptoCards,
+  "require('node:crypto').generateKeyPairSync(...)": syncCryptoCards,
+  "require('node:crypto').generateKeySync(...)": syncCryptoCards,
+}
+
+const syncClientCardsByCause: Record<string, FixCard[]> = {
+  'Math.random()': syncClientMathCards,
+  'Date.now()': syncClientDateCards,
+  'Date()': syncClientDateCards,
+  'new Date()': syncClientDateCards,
+  'crypto.randomUUID()': syncClientCryptoCards,
+  'crypto.getRandomValues()': syncClientCryptoCards,
+  "require('node:crypto').randomUUID()": syncClientCryptoCards,
+  "require('node:crypto').randomBytes(size)": syncClientCryptoCards,
+  "require('node:crypto').randomFillSync(...)": syncClientCryptoCards,
+  "require('node:crypto').randomInt(min, max)": syncClientCryptoCards,
+  "require('node:crypto').generatePrimeSync(...)": syncClientCryptoCards,
+  "require('node:crypto').generateKeyPairSync(...)": syncClientCryptoCards,
+  "require('node:crypto').generateKeySync(...)": syncClientCryptoCards,
+}
+
+export function getCards(
+  kind: GuidanceKind,
+  variant: GuidanceVariant,
+  cause?: string
+): FixCard[] {
+  switch (kind) {
+    case 'blocking-route':
+      return variant === 'navigation' ? dynamicCards : runtimeCards
+    case 'metadata':
+      return variant === 'runtime' ? metadataRuntimeCards : metadataDynamicCards
+    case 'viewport':
+      return variant === 'runtime' ? viewportRuntimeCards : viewportDynamicCards
+    case 'sync-io':
+      return (cause && syncCardsByCause[cause]) || syncMathCards
+    case 'sync-io-client':
+      return (cause && syncClientCardsByCause[cause]) || syncClientMathCards
+    default:
+      return kind satisfies never
+  }
+}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx b/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx
index ab650f70e64e..3b303283177e 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance.tsx
@@ -1,83 +1,18 @@
 import { css } from '../../utils/css'
+import {
+  DOCS_URLS,
+  EXPLANATIONS,
+  SYNC_IO_DOCS,
+  SYNC_IO_CLIENT_DOCS,
+  getCards,
+  type FixCard,
+  type GuidanceKind,
+  type GuidanceVariant,
+} from './instant-guidance-data'
 
-const DOCS = 'https://nextjs.org/docs/messages/blocking-route'
+export type { GuidanceKind, GuidanceVariant } from './instant-guidance-data'
 
-type CardColor = 'blue' | 'purple' | 'red'
-
-type FixCard = {
-  title: string
-  color: CardColor
-  snippets: Snippet[]
-  conditional?: boolean
-}
-
-type Snippet = {
-  text: string
-  highlight?: boolean
-}
-
-const runtimeCards: FixCard[] = [
-  {
-    title: 'Move within Suspense',
-    color: 'purple',
-    snippets: [
-      { text: '<Suspense fallback={…}>', highlight: true },
-      { text: '  <DataChild />' },
-      { text: '</Suspense>', highlight: true },
-    ],
-  },
-  {
-    title: 'Make route params static',
-    color: 'blue',
-    conditional: true,
-    snippets: [
-      { text: 'export async function' },
-      { text: '  generateStaticParams() {', highlight: true },
-      { text: '  return [{ slug: "…" }]' },
-      { text: '}' },
-    ],
-  },
-  {
-    title: 'Allow blocking route',
-    color: 'red',
-    snippets: [
-      { text: 'export const instant = false', highlight: true },
-      { text: '' },
-      { text: 'export default async function Page() {' },
-    ],
-  },
-]
-
-const dynamicCards: FixCard[] = [
-  {
-    title: 'Cache dynamic data',
-    color: 'blue',
-    snippets: [
-      { text: 'async function getData() {' },
-      { text: '  "use cache"', highlight: true },
-      { text: '  return db.query(…)' },
-      { text: '}' },
-    ],
-  },
-  {
-    title: 'Move within Suspense',
-    color: 'purple',
-    snippets: [
-      { text: '<Suspense fallback={…}>', highlight: true },
-      { text: '  <DataChild />' },
-      { text: '</Suspense>', highlight: true },
-    ],
-  },
-  {
-    title: 'Allow blocking route',
-    color: 'red',
-    snippets: [
-      { text: 'export const instant = false', highlight: true },
-      { text: '' },
-      { text: 'export default async function Page() {' },
-    ],
-  },
-]
+// ── Components ────────────────────────────────────
 
 function CardGrid({ cards }: { cards: FixCard[] }) {
   return (
@@ -94,9 +29,20 @@ function CardGrid({ cards }: { cards: FixCard[] }) {
               <span
                 key={i}
                 data-snippet-line
-                data-snippet-highlight={s.highlight || undefined}
+                data-snippet-highlight={
+                  !s.parts && s.highlight ? '' : undefined
+                }
               >
-                {s.text}
+                {s.parts
+                  ? s.parts.map((p, j) => (
+                      <span
+                        key={j}
+                        data-snippet-highlight={p.highlight ? '' : undefined}
+                      >
+                        {p.text}
+                      </span>
+                    ))
+                  : s.text}
                 {'\n'}
               </span>
             ))}
@@ -110,19 +56,38 @@ function CardGrid({ cards }: { cards: FixCard[] }) {
 
 export function InstantGuidance({
   variant,
+  kind = 'blocking-route',
+  explanation,
+  cause,
 }: {
-  variant: 'runtime' | 'navigation'
+  variant: GuidanceVariant
+  kind?: GuidanceKind
+  explanation?: string
+  cause?: string
 }) {
-  const cards = variant === 'navigation' ? dynamicCards : runtimeCards
+  const cards = getCards(kind, variant, cause)
+  let docsUrl: string
+  if (kind === 'sync-io' && cause) {
+    docsUrl = SYNC_IO_DOCS[cause] || DOCS_URLS[kind]
+  } else if (kind === 'sync-io-client' && cause) {
+    docsUrl = SYNC_IO_CLIENT_DOCS[cause] || DOCS_URLS[kind]
+  } else {
+    docsUrl = DOCS_URLS[kind]
+  }
+  const defaultExplanation = explanation || EXPLANATIONS[kind]
 
   return (
     <div data-nextjs-instant-guidance>
-      <p data-nextjs-instant-explanation>
-        This blocks navigation, leading to a slower user experience.{' '}
-        <a href={DOCS} target="_blank" rel="noopener noreferrer">
-          Learn more
-        </a>
-      </p>
+      {defaultExplanation || docsUrl ? (
+        <p data-nextjs-instant-explanation>
+          {defaultExplanation ? <>{defaultExplanation} </> : null}
+          {docsUrl ? (
+            <a href={docsUrl} target="_blank" rel="noopener noreferrer">
+              Learn more
+            </a>
+          ) : null}
+        </p>
+      ) : null}
 
       <p data-nextjs-instant-fix-heading>Ways to fix this:</p>
 
@@ -219,25 +184,43 @@ export const INSTANT_GUIDANCE_STYLES = css`
     border-color: var(--color-instant-border-red);
   }
 
+  [data-card-color='amber'] [data-nextjs-fix-snippet] {
+    border-color: var(--color-instant-border-amber);
+  }
+
+  [data-card-color='teal'] [data-nextjs-fix-snippet] {
+    border-color: var(--color-instant-border-teal);
+  }
+
   [data-snippet-line] {
     display: block;
     color: var(--color-gray-800);
   }
 
-  [data-snippet-line][data-snippet-highlight] {
+  [data-nextjs-fix-snippet] [data-snippet-highlight] {
     color: var(--color-gray-1000);
     font-weight: 500;
   }
 
-  [data-card-color='blue'] [data-snippet-line][data-snippet-highlight] {
+  [data-card-color='blue'] [data-nextjs-fix-snippet] [data-snippet-highlight] {
     color: var(--color-blue-800);
   }
 
-  [data-card-color='purple'] [data-snippet-line][data-snippet-highlight] {
+  [data-card-color='purple']
+    [data-nextjs-fix-snippet]
+    [data-snippet-highlight] {
     color: var(--color-instant-text-purple);
   }
 
-  [data-card-color='red'] [data-snippet-line][data-snippet-highlight] {
+  [data-card-color='red'] [data-nextjs-fix-snippet] [data-snippet-highlight] {
     color: var(--color-red-800);
   }
+
+  [data-card-color='amber'] [data-nextjs-fix-snippet] [data-snippet-highlight] {
+    color: var(--color-instant-text-amber);
+  }
+
+  [data-card-color='teal'] [data-nextjs-fix-snippet] [data-snippet-highlight] {
+    color: var(--color-instant-text-teal);
+  }
 `
diff --git a/packages/next/src/next-devtools/dev-overlay/container/errors.tsx b/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
index a416666697ee..613340dbdd93 100644
--- a/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
@@ -20,7 +20,11 @@ import type { HydrationErrorState } from '../../shared/hydration-error'
 import { useActiveRuntimeError } from '../hooks/use-active-runtime-error'
 import { formatCodeFrame } from '../components/code-frame/parse-code-frame'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
-import { InstantGuidance } from '../components/instant/instant-guidance'
+import {
+  InstantGuidance,
+  type GuidanceKind,
+  type GuidanceVariant,
+} from '../components/instant/instant-guidance'
 import { CodeFrame } from '../components/code-frame/code-frame'
 import { ErrorOverlayCallStack } from '../components/errors/error-overlay-call-stack/error-overlay-call-stack'
 import { ErrorCause } from './runtime-error/error-cause'
@@ -71,389 +75,25 @@ function GenericErrorDescription({ error }: { error: Error }) {
   )
 }
 
-function DynamicMetadataErrorDescription({
-  variant,
-}: {
-  variant: 'navigation' | 'runtime'
-}) {
-  if (variant === 'navigation') {
-    return (
-      <div className="nextjs__blocking_page_load_error_description">
-        <h3 className="nextjs__blocking_page_load_error_description_title">
-          Data that blocks navigation was accessed inside{' '}
-          <code>generateMetadata()</code> in an otherwise prerenderable page
-        </h3>
-        <p>
-          When Document metadata is the only part of a page that cannot be
-          prerendered Next.js expects you to either make it prerenderable or
-          make some other part of the page non-prerenderable to avoid
-          unintentional partially dynamic pages. Uncached data such as{' '}
-          <code>fetch(...)</code>, cached data with a low expire time, or{' '}
-          <code>connection()</code> are all examples of data that only resolve
-          on navigation.
-        </p>
-        <h4>To fix this:</h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>
-            Move the asynchronous await into a Cache Component (
-            <code>"use cache"</code>)
-          </strong>
-          . This allows Next.js to statically prerender{' '}
-          <code>generateMetadata()</code> as part of the HTML document, so it's
-          instantly visible to the user.
-        </p>
-        <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-          or
-        </h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>
-            add <code>connection()</code> inside a <code>{'<Suspense>'}</code>
-          </strong>{' '}
-          somewhere in a Page or Layout. This tells Next.js that the page is
-          intended to have some non-prerenderable parts.
-        </p>
-        <p>
-          Learn more:{' '}
-          <a href="https://nextjs.org/docs/messages/next-prerender-dynamic-metadata">
-            https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-          </a>
-        </p>
-      </div>
-    )
-  } else {
-    return (
-      <div className="nextjs__blocking_page_load_error_description">
-        <h3 className="nextjs__blocking_page_load_error_description_title">
-          Runtime data was accessed inside <code>generateMetadata()</code> or
-          file-based metadata
-        </h3>
-        <p>
-          When Document metadata is the only part of a page that cannot be
-          prerendered Next.js expects you to either make it prerenderable or
-          make some other part of the page non-prerenderable to avoid
-          unintentional partially dynamic pages.
-        </p>
-        <h4>To fix this:</h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>
-            Remove the Runtime data access from <code>generateMetadata()</code>
-          </strong>
-          . This allows Next.js to statically prerender{' '}
-          <code>generateMetadata()</code> as part of the HTML document, so it's
-          instantly visible to the user.
-        </p>
-        <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-          or
-        </h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>
-            add <code>connection()</code> inside a <code>{'<Suspense>'}</code>
-          </strong>{' '}
-          somewhere in a Page or Layout. This tells Next.js that the page is
-          intended to have some non-prerenderable parts.
-        </p>
-        <p>
-          Note that if you are using file-based metadata, such as icons, inside
-          a route with dynamic params then the only recourse is to make some
-          other part of the page non-prerenderable.
-        </p>
-        <p>
-          Learn more:{' '}
-          <a href="https://nextjs.org/docs/messages/next-prerender-dynamic-metadata">
-            https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-          </a>
-        </p>
-      </div>
-    )
-  }
-}
-
-function BlockingPageLoadErrorDescription({
-  variant,
-  refinement,
-}: {
-  variant: 'navigation' | 'runtime'
-  refinement: '' | 'generateViewport' | 'generateMetadata'
-}) {
-  if (refinement === 'generateViewport') {
-    if (variant === 'navigation') {
-      return (
-        <div className="nextjs__blocking_page_load_error_description">
-          <h3 className="nextjs__blocking_page_load_error_description_title">
-            Data that blocks navigation was accessed inside{' '}
-            <code>generateViewport()</code>
-          </h3>
-          <p>
-            Viewport metadata needs to be available on page load so accessing
-            data that waits for a user navigation while producing it prevents
-            Next.js from prerendering an initial UI. Uncached data such as{' '}
-            <code>fetch(...)</code>, cached data with a low expire time, or{' '}
-            <code>connection()</code> are all examples of data that only resolve
-            on navigation.
-          </p>
-          <h4>To fix this:</h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>
-              Move the asynchronous await into a Cache Component (
-              <code>"use cache"</code>)
-            </strong>
-            . This allows Next.js to statically prerender{' '}
-            <code>generateViewport()</code> as part of the HTML document, so
-            it's instantly visible to the user.
-          </p>
-          <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-            or
-          </h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>
-              Put a <code>{'<Suspense>'}</code> around your document{' '}
-              <code>{'<body>'}</code>.
-            </strong>
-            This indicate to Next.js that you are opting into allowing blocking
-            navigations for any page.
-          </p>
-          <p>
-            Learn more:{' '}
-            <a href="https://nextjs.org/docs/messages/next-prerender-dynamic-viewport">
-              https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
-            </a>
-          </p>
-        </div>
-      )
-    } else {
-      return (
-        <div className="nextjs__blocking_page_load_error_description">
-          <h3 className="nextjs__blocking_page_load_error_description_title">
-            Runtime data was accessed inside <code>generateViewport()</code>
-          </h3>
-          <p>
-            Viewport metadata needs to be available on page load so accessing
-            data that comes from a user Request while producing it prevents
-            Next.js from prerendering an initial UI.
-            <code>cookies()</code>, <code>headers()</code>, <code>params</code>,
-            and <code>searchParams</code> are examples of Runtime data that can
-            only come from a user request.
-          </p>
-          <h4>To fix this:</h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>Remove the Runtime data requirement</strong> from{' '}
-            <code>generateViewport</code>. This allows Next.js to statically
-            prerender <code>generateViewport()</code> as part of the HTML
-            document, so it's instantly visible to the user.
-          </p>
-          <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-            or
-          </h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>
-              Put a <code>{'<Suspense>'}</code> around your document{' '}
-              <code>{'<body>'}</code>.
-            </strong>
-            This indicate to Next.js that you are opting into allowing blocking
-            navigations for any page.
-          </p>
-          <p>
-            <code>params</code> are usually considered Runtime data but if all
-            params are provided a value using <code>generateStaticParams</code>{' '}
-            they can be statically prerendered.
-          </p>
-          <p>
-            Learn more:{' '}
-            <a href="https://nextjs.org/docs/messages/next-prerender-dynamic-viewport">
-              https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
-            </a>
-          </p>
-        </div>
-      )
-    }
-  } else if (refinement === 'generateMetadata') {
-    if (variant === 'navigation') {
-      return (
-        <div className="nextjs__blocking_page_load_error_description">
-          <h3 className="nextjs__blocking_page_load_error_description_title">
-            Data that blocks navigation was accessed inside{' '}
-            <code>generateMetadata()</code> in an otherwise prerenderable page
-          </h3>
-          <p>
-            When Document metadata is the only part of a page that cannot be
-            prerendered Next.js expects you to either make it prerenderable or
-            make some other part of the page non-prerenderable to avoid
-            unintentional partially dynamic pages. Uncached data such as{' '}
-            <code>fetch(...)</code>, cached data with a low expire time, or{' '}
-            <code>connection()</code> are all examples of data that only resolve
-            on navigation.
-          </p>
-          <h4>To fix this:</h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>
-              Move the asynchronous await into a Cache Component (
-              <code>"use cache"</code>)
-            </strong>
-            . This allows Next.js to statically prerender{' '}
-            <code>generateMetadata()</code> as part of the HTML document, so
-            it's instantly visible to the user.
-          </p>
-          <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-            or
-          </h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>
-              add <code>connection()</code> inside a <code>{'<Suspense>'}</code>
-            </strong>{' '}
-            somewhere in a Page or Layout. This tells Next.js that the page is
-            intended to have some non-prerenderable parts.
-          </p>
-          <p>
-            Learn more:{' '}
-            <a href="https://nextjs.org/docs/messages/next-prerender-dynamic-metadata">
-              https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-            </a>
-          </p>
-        </div>
-      )
-    } else {
-      return (
-        <div className="nextjs__blocking_page_load_error_description">
-          <h3 className="nextjs__blocking_page_load_error_description_title">
-            Runtime data was accessed inside <code>generateMetadata()</code> or
-            file-based metadata
-          </h3>
-          <p>
-            When Document metadata is the only part of a page that cannot be
-            prerendered Next.js expects you to either make it prerenderable or
-            make some other part of the page non-prerenderable to avoid
-            unintentional partially dynamic pages.
-          </p>
-          <h4>To fix this:</h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>
-              Remove the Runtime data access from{' '}
-              <code>generateMetadata()</code>
-            </strong>
-            . This allows Next.js to statically prerender{' '}
-            <code>generateMetadata()</code> as part of the HTML document, so
-            it's instantly visible to the user.
-          </p>
-          <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-            or
-          </h4>
-          <p className="nextjs__blocking_page_load_error_fix_option">
-            <strong>
-              add <code>connection()</code> inside a <code>{'<Suspense>'}</code>
-            </strong>{' '}
-            somewhere in a Page or Layout. This tells Next.js that the page is
-            intended to have some non-prerenderable parts.
-          </p>
-          <p>
-            Note that if you are using file-based metadata, such as icons,
-            inside a route with dynamic params then the only recourse is to make
-            some other part of the page non-prerenderable.
-          </p>
-          <p>
-            Learn more:{' '}
-            <a href="https://nextjs.org/docs/messages/next-prerender-dynamic-metadata">
-              https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-            </a>
-          </p>
-        </div>
-      )
-    }
-  }
-
-  if (variant === 'runtime') {
-    return (
-      <div className="nextjs__blocking_page_load_error_description">
-        <h3 className="nextjs__blocking_page_load_error_description_title">
-          Runtime data was accessed outside of {'<Suspense>'}
-        </h3>
-        <p>
-          This delays the entire page from rendering, resulting in a slow user
-          experience. Next.js uses this error to ensure your app loads instantly
-          on every navigation. <code>cookies()</code>, <code>headers()</code>,{' '}
-          <code>params</code>, and <code>searchParams</code> are examples of
-          Runtime data that can only come from a user request.
-        </p>
-        <h4>To fix this:</h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>Provide a fallback UI using {'<Suspense>'}</strong> around
-          this component.
-        </p>
-        <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-          or
-        </h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>
-            Move the Runtime data access into a deeper component wrapped in{' '}
-            {'<Suspense>'}.
-          </strong>
-        </p>
-        <p>
-          In either case this allows Next.js to stream its contents to the user
-          when they request the page, while still providing an initial UI that
-          is prerendered and prefetchable for instant navigations.
-        </p>
-        <p>
-          Learn more:{' '}
-          <a href="https://nextjs.org/docs/messages/blocking-route">
-            https://nextjs.org/docs/messages/blocking-route
-          </a>
-        </p>
-      </div>
-    )
-  } else {
-    return (
-      <div className="nextjs__blocking_page_load_error_description">
-        <h3 className="nextjs__blocking_page_load_error_description_title">
-          Data that blocks navigation was accessed outside of {'<Suspense>'}
-        </h3>
-        <p>
-          This delays the entire page from rendering, resulting in a slow user
-          experience. Next.js uses this error to ensure your app loads instantly
-          on every navigation. Uncached data such as <code>fetch(...)</code>,
-          cached data with a low expire time, or <code>connection()</code> are
-          all examples of data that only resolve on navigation.
-        </p>
-        <h4>To fix this, you can either:</h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>Provide a fallback UI using {'<Suspense>'}</strong> around
-          this component. This allows Next.js to stream its contents to the user
-          as soon as it's ready, without blocking the rest of the app.
-        </p>
-        <h4 className="nextjs__blocking_page_load_error_fix_option_separator">
-          or
-        </h4>
-        <p className="nextjs__blocking_page_load_error_fix_option">
-          <strong>
-            Move the asynchronous await into a Cache Component (
-            <code>"use cache"</code>)
-          </strong>
-          . This allows Next.js to statically prerender the component as part of
-          the HTML document, so it's instantly visible to the user.
-        </p>
-        <p>
-          Learn more:{' '}
-          <a href="https://nextjs.org/docs/messages/blocking-route">
-            https://nextjs.org/docs/messages/blocking-route
-          </a>
-        </p>
-      </div>
-    )
-  }
-}
-
 export function getErrorTypeLabel(
   error: Error,
   type: ReadyRuntimeError['type'],
   errorDetails: ErrorDetails
 ): ErrorOverlayLayoutProps['errorType'] {
   if (errorDetails.type === 'blocking-route') {
-    if (errorDetails.refinement === '') {
-      return `Instant`
-    }
-    return `Blocking Route`
+    return `Instant`
   }
   if (errorDetails.type === 'dynamic-metadata') {
-    return `Ambiguous Metadata`
+    return `Instant`
+  }
+  if (errorDetails.type === 'dynamic-viewport') {
+    return `Instant`
+  }
+  if (errorDetails.type === 'sync-io') {
+    return `Instant`
+  }
+  if (errorDetails.type === 'sync-io-client') {
+    return `Instant`
   }
   if (type === 'recoverable') {
     return `Recoverable ${error.name}`
@@ -469,6 +109,9 @@ type ErrorDetails =
   | HydrationErrorDetails
   | BlockingRouteErrorDetails
   | DynamicMetadataErrorDetails
+  | DynamicViewportErrorDetails
+  | SyncIOErrorDetails
+  | SyncIOClientErrorDetails
 
 type NoErrorDetails = {
   type: 'empty'
@@ -484,7 +127,6 @@ type HydrationErrorDetails = {
 type BlockingRouteErrorDetails = {
   type: 'blocking-route'
   variant: 'navigation' | 'runtime'
-  refinement: '' | 'generateViewport'
 }
 
 type DynamicMetadataErrorDetails = {
@@ -492,6 +134,21 @@ type DynamicMetadataErrorDetails = {
   variant: 'navigation' | 'runtime'
 }
 
+type DynamicViewportErrorDetails = {
+  type: 'dynamic-viewport'
+  variant: 'navigation' | 'runtime'
+}
+
+type SyncIOErrorDetails = {
+  type: 'sync-io'
+  cause: string
+}
+
+type SyncIOClientErrorDetails = {
+  type: 'sync-io-client'
+  cause: string
+}
+
 const noErrorDetails: ErrorDetails = {
   type: 'empty',
 }
@@ -557,10 +214,16 @@ function getHydrationErrorDetails(
 function InstantRuntimeError({
   error,
   variant,
+  kind = 'blocking-route',
+  explanation,
+  cause,
   dialogResizerRef,
 }: {
   error: ReadyRuntimeError
-  variant: 'runtime' | 'navigation'
+  variant: GuidanceVariant
+  kind?: GuidanceKind
+  explanation?: string
+  cause?: string
   dialogResizerRef: React.RefObject<HTMLDivElement | null>
 }) {
   const frames = useFrames(error)
@@ -583,9 +246,12 @@ function InstantRuntimeError({
           codeFrame={firstFrame.originalCodeFrame!}
         />
       )}
-
-      <InstantGuidance variant={variant} />
-
+      <InstantGuidance
+        variant={variant}
+        kind={kind}
+        explanation={explanation}
+        cause={cause}
+      />
       {frames.length > 0 && (
         <ErrorOverlayCallStack
           dialogResizerRef={dialogResizerRef}
@@ -611,35 +277,81 @@ function isRuntimeVariant(message: string): boolean {
   )
 }
 
+const SYNC_IO_APIS = [
+  // Math
+  'Math.random()',
+  // Date/Time — `new Date()` before `Date()` to avoid substring false positive
+  'Date.now()',
+  'new Date()',
+  'Date()',
+  // Node Crypto — longer strings first to avoid substring false positives
+  "require('node:crypto').generateKeyPairSync(...)",
+  "require('node:crypto').generateKeySync(...)",
+  "require('node:crypto').generatePrimeSync(...)",
+  "require('node:crypto').randomFillSync(...)",
+  "require('node:crypto').randomBytes(size)",
+  "require('node:crypto').randomInt(min, max)",
+  "require('node:crypto').randomUUID()",
+  // Web Crypto
+  'crypto.getRandomValues()',
+  'crypto.randomUUID()',
+]
+
+const SYNC_IO_DOCS_PATTERN =
+  /https:\/\/nextjs\.org\/docs\/messages\/next-prerender-(?:runtime-)?(random|current-time|crypto)(-client)?/
+
+// Discriminate sync IO errors via the docs URL embedded in the user-facing
+// message by `createSyncIOError`, `createSyncIORuntimeError`, and
+// `createSyncIOClientError`.
+function isSyncIOError(message: string): boolean {
+  return SYNC_IO_DOCS_PATTERN.test(message)
+}
+
+function isSyncIOClientError(message: string): boolean {
+  const match = SYNC_IO_DOCS_PATTERN.exec(message)
+  return match !== null && match[2] === '-client'
+}
+
 function getBlockingRouteErrorDetails(error: Error): null | ErrorDetails {
-  const isBlockingPageLoadError = error.message.includes('/blocking-route')
+  const message = error.message
 
+  const isBlockingPageLoadError = message.includes('/blocking-route')
   if (isBlockingPageLoadError) {
     return {
       type: 'blocking-route',
-      variant: isRuntimeVariant(error.message) ? 'runtime' : 'navigation',
-      refinement: '',
+      variant: isRuntimeVariant(message) ? 'runtime' : 'navigation',
     }
   }
 
-  const isDynamicMetadataError = error.message.includes(
+  const isDynamicMetadataError = message.includes(
     '/next-prerender-dynamic-metadata'
   )
   if (isDynamicMetadataError) {
     return {
       type: 'dynamic-metadata',
-      variant: isRuntimeVariant(error.message) ? 'runtime' : 'navigation',
+      variant: isRuntimeVariant(message) ? 'runtime' : 'navigation',
     }
   }
 
-  const isBlockingViewportError = error.message.includes(
+  const isBlockingViewportError = message.includes(
     '/next-prerender-dynamic-viewport'
   )
   if (isBlockingViewportError) {
     return {
-      type: 'blocking-route',
-      variant: isRuntimeVariant(error.message) ? 'runtime' : 'navigation',
-      refinement: 'generateViewport',
+      type: 'dynamic-viewport',
+      variant: isRuntimeVariant(message) ? 'runtime' : 'navigation',
+    }
+  }
+
+  if (isSyncIOError(message)) {
+    const isClient = isSyncIOClientError(message)
+    for (const api of SYNC_IO_APIS) {
+      if (message.includes(api)) {
+        return {
+          type: isClient ? 'sync-io-client' : 'sync-io',
+          cause: api,
+        }
+      }
     }
   }
 
@@ -812,49 +524,180 @@ Next.js version: ${props.versionInfo.installed} (${process.env.__NEXT_BUNDLER})\
       }
       break
     case 'blocking-route':
-      if (errorDetails.refinement === '') {
-        return (
-          <ErrorOverlayLayout
-            errorCode={errorCode}
-            errorType={errorType}
-            errorMessage={
-              errorDetails.variant === 'runtime'
-                ? 'Next.js encountered runtime data during the initial render.'
-                : 'Next.js encountered uncached data during the initial render.'
-            }
-            onClose={isServerError ? undefined : onClose}
-            debugInfo={debugInfo}
-            error={error}
-            runtimeErrors={runtimeErrors}
-            activeIdx={activeIdx}
-            setActiveIndex={setActiveIndex}
-            dialogResizerRef={dialogResizerRef}
-            generateErrorInfo={generateErrorInfo}
-            {...props}
-          >
-            <Suspense fallback={<div data-nextjs-error-suspended />}>
-              <InstantRuntimeError
-                key={activeError.id.toString()}
-                error={activeError}
-                variant={errorDetails.variant}
-                dialogResizerRef={dialogResizerRef}
-              />
-            </Suspense>
-          </ErrorOverlayLayout>
-        )
-      }
-      errorMessage = (
-        <BlockingPageLoadErrorDescription
-          variant={errorDetails.variant}
-          refinement={errorDetails.refinement}
-        />
+      return (
+        <ErrorOverlayLayout
+          errorCode={errorCode}
+          errorType={errorType}
+          errorMessage={
+            errorDetails.variant === 'runtime'
+              ? 'Next.js encountered runtime data during the initial render.'
+              : 'Next.js encountered uncached data during the initial render.'
+          }
+          onClose={isServerError ? undefined : onClose}
+          debugInfo={debugInfo}
+          error={error}
+          runtimeErrors={runtimeErrors}
+          activeIdx={activeIdx}
+          setActiveIndex={setActiveIndex}
+          dialogResizerRef={dialogResizerRef}
+          generateErrorInfo={generateErrorInfo}
+          {...props}
+        >
+          <Suspense fallback={<div data-nextjs-error-suspended />}>
+            <InstantRuntimeError
+              key={activeError.id.toString()}
+              error={activeError}
+              variant={errorDetails.variant}
+              dialogResizerRef={dialogResizerRef}
+            />
+          </Suspense>
+        </ErrorOverlayLayout>
       )
-      break
     case 'dynamic-metadata':
-      errorMessage = (
-        <DynamicMetadataErrorDescription variant={errorDetails.variant} />
+      return (
+        <ErrorOverlayLayout
+          errorCode={errorCode}
+          errorType={errorType}
+          errorMessage={
+            errorDetails.variant === 'runtime' ? (
+              <>
+                Next.js encountered runtime data in{' '}
+                <code>generateMetadata()</code>.
+              </>
+            ) : (
+              <>
+                Next.js encountered uncached data in{' '}
+                <code>generateMetadata()</code>.
+              </>
+            )
+          }
+          onClose={isServerError ? undefined : onClose}
+          debugInfo={debugInfo}
+          error={error}
+          runtimeErrors={runtimeErrors}
+          activeIdx={activeIdx}
+          setActiveIndex={setActiveIndex}
+          dialogResizerRef={dialogResizerRef}
+          generateErrorInfo={generateErrorInfo}
+          {...props}
+        >
+          <Suspense fallback={<div data-nextjs-error-suspended />}>
+            <InstantRuntimeError
+              key={activeError.id.toString()}
+              error={activeError}
+              variant={errorDetails.variant}
+              kind="metadata"
+              dialogResizerRef={dialogResizerRef}
+            />
+          </Suspense>
+        </ErrorOverlayLayout>
+      )
+    case 'dynamic-viewport':
+      return (
+        <ErrorOverlayLayout
+          errorCode={errorCode}
+          errorType={errorType}
+          errorMessage={
+            errorDetails.variant === 'runtime' ? (
+              <>
+                Next.js encountered runtime data in{' '}
+                <code>generateViewport()</code>.
+              </>
+            ) : (
+              <>
+                Next.js encountered uncached data in{' '}
+                <code>generateViewport()</code>.
+              </>
+            )
+          }
+          onClose={isServerError ? undefined : onClose}
+          debugInfo={debugInfo}
+          error={error}
+          runtimeErrors={runtimeErrors}
+          activeIdx={activeIdx}
+          setActiveIndex={setActiveIndex}
+          dialogResizerRef={dialogResizerRef}
+          generateErrorInfo={generateErrorInfo}
+          {...props}
+        >
+          <Suspense fallback={<div data-nextjs-error-suspended />}>
+            <InstantRuntimeError
+              key={activeError.id.toString()}
+              error={activeError}
+              variant={errorDetails.variant}
+              kind="viewport"
+              dialogResizerRef={dialogResizerRef}
+            />
+          </Suspense>
+        </ErrorOverlayLayout>
+      )
+    case 'sync-io':
+      return (
+        <ErrorOverlayLayout
+          errorCode={errorCode}
+          errorType={errorType}
+          errorMessage={
+            <>
+              Next.js encountered <code>{errorDetails.cause}</code> without an
+              explicit rendering intent.
+            </>
+          }
+          onClose={isServerError ? undefined : onClose}
+          debugInfo={debugInfo}
+          error={error}
+          runtimeErrors={runtimeErrors}
+          activeIdx={activeIdx}
+          setActiveIndex={setActiveIndex}
+          dialogResizerRef={dialogResizerRef}
+          generateErrorInfo={generateErrorInfo}
+          {...props}
+        >
+          <Suspense fallback={<div data-nextjs-error-suspended />}>
+            <InstantRuntimeError
+              key={activeError.id.toString()}
+              error={activeError}
+              variant="runtime"
+              kind="sync-io"
+              cause={errorDetails.cause}
+              explanation="This value can change between renders, so it must be either prerendered or computed later."
+              dialogResizerRef={dialogResizerRef}
+            />
+          </Suspense>
+        </ErrorOverlayLayout>
+      )
+    case 'sync-io-client':
+      return (
+        <ErrorOverlayLayout
+          errorCode={errorCode}
+          errorType={errorType}
+          errorMessage={
+            <>
+              Next.js encountered <code>{errorDetails.cause}</code> in a Client
+              Component.
+            </>
+          }
+          onClose={isServerError ? undefined : onClose}
+          debugInfo={debugInfo}
+          error={error}
+          runtimeErrors={runtimeErrors}
+          activeIdx={activeIdx}
+          setActiveIndex={setActiveIndex}
+          dialogResizerRef={dialogResizerRef}
+          generateErrorInfo={generateErrorInfo}
+          {...props}
+        >
+          <Suspense fallback={<div data-nextjs-error-suspended />}>
+            <InstantRuntimeError
+              key={activeError.id.toString()}
+              error={activeError}
+              variant="runtime"
+              kind="sync-io-client"
+              cause={errorDetails.cause}
+              dialogResizerRef={dialogResizerRef}
+            />
+          </Suspense>
+        </ErrorOverlayLayout>
       )
-      break
     case 'empty':
       errorMessage = <GenericErrorDescription error={error} />
       break
@@ -941,6 +784,8 @@ export const styles = `
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px;
     margin-bottom: 14px;
   }
   .error-overlay-notes-container {
@@ -949,18 +794,6 @@ export const styles = `
   .error-overlay-notes-container p {
     white-space: pre-wrap;
   }
-  .nextjs__blocking_page_load_error_description {
-    color: var(--color-stack-notes);
-  }
-  .nextjs__blocking_page_load_error_description_title {
-    color: var(--color-title-color);
-  }
-  .nextjs__blocking_page_load_error_fix_option {
-    background-color: var(--color-background-200);
-    padding: 14px;
-    border-radius: var(--rounded-md-2);
-    border: 1px solid var(--color-gray-alpha-400);
-  }
   .external-link, .external-link:hover {
     color:inherit;
   }
diff --git a/packages/next/src/next-devtools/dev-overlay/styles/colors.css b/packages/next/src/next-devtools/dev-overlay/styles/colors.css
index 5d587d9347c3..101b9862c219 100644
--- a/packages/next/src/next-devtools/dev-overlay/styles/colors.css
+++ b/packages/next/src/next-devtools/dev-overlay/styles/colors.css
@@ -130,7 +130,11 @@
   --color-instant-border-blue: rgba(0, 112, 243, 0.4);
   --color-instant-border-purple: rgba(130, 80, 220, 0.4);
   --color-instant-border-red: rgba(229, 72, 77, 0.45);
+  --color-instant-border-amber: rgba(180, 110, 0, 0.6);
+  --color-instant-border-teal: rgba(0, 160, 140, 0.55);
   --color-instant-text-purple: rgb(130, 80, 220);
+  --color-instant-text-amber: rgb(163, 82, 0);
+  --color-instant-text-teal: rgb(0, 130, 115);
 
   /* Turbopack Light - Temporary */
   --color-turbopack-text-red: #ff1e56;
diff --git a/packages/next/src/next-devtools/dev-overlay/styles/dark-theme.css b/packages/next/src/next-devtools/dev-overlay/styles/dark-theme.css
index 5c49e87f3b00..d8436e5e7881 100644
--- a/packages/next/src/next-devtools/dev-overlay/styles/dark-theme.css
+++ b/packages/next/src/next-devtools/dev-overlay/styles/dark-theme.css
@@ -97,7 +97,11 @@
   --color-instant-border-blue: rgba(82, 169, 255, 0.45);
   --color-instant-border-purple: rgba(160, 120, 240, 0.45);
   --color-instant-border-red: rgba(255, 99, 105, 0.4);
+  --color-instant-border-amber: rgba(231, 156, 19, 0.5);
+  --color-instant-border-teal: rgba(45, 212, 191, 0.5);
   --color-instant-text-purple: rgb(160, 120, 240);
+  --color-instant-text-amber: rgb(241, 161, 13);
+  --color-instant-text-teal: rgb(45, 212, 191);
 
   /* Turbopack Dark - Temporary */
   --color-turbopack-text-red: #ff6d92;
@@ -208,7 +212,11 @@
     --color-instant-border-blue: rgba(82, 169, 255, 0.45);
     --color-instant-border-purple: rgba(160, 120, 240, 0.45);
     --color-instant-border-red: rgba(255, 99, 105, 0.4);
+    --color-instant-border-amber: rgba(231, 156, 19, 0.5);
+    --color-instant-border-teal: rgba(45, 212, 191, 0.5);
     --color-instant-text-purple: rgb(160, 120, 240);
+    --color-instant-text-amber: rgb(241, 161, 13);
+    --color-instant-text-teal: rgb(45, 212, 191);
 
     /* Turbopack Dark - Temporary */
     --color-turbopack-text-red: #ff6d92;
diff --git a/packages/next/src/server/app-render/blocking-route-messages.ts b/packages/next/src/server/app-render/blocking-route-messages.ts
index 2a37b07dd7e9..cb1de77cb370 100644
--- a/packages/next/src/server/app-render/blocking-route-messages.ts
+++ b/packages/next/src/server/app-render/blocking-route-messages.ts
@@ -1,9 +1,9 @@
 export function createRuntimeBodyError(route: string): Error {
   return new Error(
     `Route "${route}": Next.js encountered runtime data during the initial render.\n\n` +
-      `\`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.\n\n` +
+      `\`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\n\n` +
       `Ways to fix this:\n` +
-      `  - Move the data access into a child component within a <Suspense> boundary\n` +
+      `  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access\n` +
       `  - Use \`generateStaticParams\` to make route params static\n` +
       `  - Set \`export const instant = false\` to allow a blocking route\n\n` +
       `Learn more: https://nextjs.org/docs/messages/blocking-route`
@@ -13,10 +13,10 @@ export function createRuntimeBodyError(route: string): Error {
 export function createDynamicBodyError(route: string): Error {
   return new Error(
     `Route "${route}": Next.js encountered uncached data during the initial render.\n\n` +
-      `\`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.\n\n` +
+      `\`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\n\n` +
       `Ways to fix this:\n` +
       `  - Cache the data access with \`"use cache"\`\n` +
-      `  - Move the data access into a child component within a <Suspense> boundary\n` +
+      `  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access\n` +
       `  - Set \`export const instant = false\` to allow a blocking route\n\n` +
       `Learn more: https://nextjs.org/docs/messages/blocking-route`
   )
@@ -30,10 +30,10 @@ export function createDynamicBodyError(route: string): Error {
 export function createDynamicOrRuntimeBodyError(route: string): Error {
   return new Error(
     `Route "${route}": Next.js encountered uncached or runtime data during the initial render.\n\n` +
-      `\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.\n\n` +
+      `\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.\n\n` +
       `Ways to fix this:\n` +
       `  - Cache the data access with \`"use cache"\`\n` +
-      `  - Move the data access into a child component within a <Suspense> boundary\n` +
+      `  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access\n` +
       `  - Use \`generateStaticParams\` to make route params static\n` +
       `  - Set \`export const instant = false\` to allow a blocking route\n\n` +
       `Learn more: https://nextjs.org/docs/messages/blocking-route`
@@ -42,34 +42,83 @@ export function createDynamicOrRuntimeBodyError(route: string): Error {
 
 export function createRuntimeMetadataError(route: string): Error {
   return new Error(
-    `Route "${route}": Next.js encountered runtime data such as \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` inside \`generateMetadata\`, or you have file-based metadata such as icons that depend on dynamic params segments. Except for this instance, the page would have been entirely prerenderable which may have been the intended behavior. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
+    `Route "${route}": Next.js encountered runtime data in \`generateMetadata()\`.\n\n` +
+      `This route's metadata is blocked, but the rest of its content can be prerendered. \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed in \`generateMetadata()\` cause it to run dynamically.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Use a static metadata export instead of \`generateMetadata()\`\n` +
+      `  - Add a dynamic data access (e.g. \`await connection()\`) to the page to render it at request time\n\n` +
+      `Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
   )
 }
 
 export function createDynamicMetadataError(route: string): Error {
   return new Error(
-    `Route "${route}": Next.js encountered uncached data such as \`fetch(...)\` or \`connection()\` inside \`generateMetadata\`. Except for this instance, the page would have been entirely prerenderable which may have been the intended behavior. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
+    `Route "${route}": Next.js encountered uncached data in \`generateMetadata()\`.\n\n` +
+      `This route's metadata is blocked, but the rest of its content can be prerendered. \`fetch(...)\` or \`connection()\` accessed in \`generateMetadata()\` cause it to run dynamically.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Cache the metadata with \`"use cache"\` in \`generateMetadata()\`\n` +
+      `  - Add a dynamic data access (e.g. \`await connection()\`) to the page to render it at request time\n\n` +
+      `Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
   )
 }
 
 export function createRuntimeViewportError(route: string): Error {
   return new Error(
-    `Route "${route}": Next.js encountered runtime data such as \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` inside \`generateViewport\`. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
+    `Route "${route}": Next.js encountered runtime data in \`generateViewport()\`.\n\n` +
+      `\`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` in \`generateViewport()\` prevents the page from being prerendered, leading to a slower user experience.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Use a static viewport export instead of \`generateViewport()\`\n` +
+      `  - Wrap your document \`<body>\` in \`<Suspense>\`\n` +
+      `  - Set \`export const instant = false\` to allow a blocking route\n\n` +
+      `Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
   )
 }
 
 export function createDynamicViewportError(route: string): Error {
   return new Error(
-    `Route "${route}": Next.js encountered uncached data such as \`fetch(...)\` or \`connection()\` inside \`generateViewport\`. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
+    `Route "${route}": Next.js encountered uncached data in \`generateViewport()\`.\n\n` +
+      `\`fetch(...)\` or \`connection()\` in \`generateViewport()\` prevents the page from being prerendered, leading to a slower user experience.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`\n` +
+      `  - Wrap your document \`<body>\` in \`<Suspense>\`\n` +
+      `  - Set \`export const instant = false\` to allow a blocking route\n\n` +
+      `Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
   )
 }
 
-export function disallowedDynamicViewportMessage(route: string): string {
-  return `Route "${route}" has a \`generateViewport\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) without explicitly allowing fully dynamic rendering. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
+/**
+ * NOTE: Prefer `createRuntimeViewportError` or `createDynamicViewportError`.
+ * Only use this in situations like build-time static validation, where
+ * we can't pinpoint a more specific reason.
+ */
+export function createDynamicOrRuntimeViewportError(route: string): Error {
+  return new Error(
+    `Route "${route}": Next.js encountered uncached or runtime data in \`generateViewport()\`.\n\n` +
+      `This prevents the page from being prerendered, leading to a slower user experience.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Use a static viewport export instead of \`generateViewport()\`\n` +
+      `  - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`\n` +
+      `  - Wrap your document \`<body>\` in \`<Suspense>\`\n` +
+      `  - Set \`export const instant = false\` to allow a blocking route\n\n` +
+      `Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport`
+  )
 }
 
-export function disallowedDynamicMetadataMessage(route: string): string {
-  return `Route "${route}" has a \`generateMetadata\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) when the rest of the route does not. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
+/**
+ * NOTE: Prefer `createRuntimeMetadataError` or `createDynamicMetadataError`.
+ * Only use this in situations like build-time static validation, where
+ * we can't pinpoint a more specific reason.
+ */
+export function createDynamicOrRuntimeMetadataError(route: string): Error {
+  return new Error(
+    `Route "${route}": Next.js encountered uncached or runtime data in \`generateMetadata()\`.\n\n` +
+      `This route's metadata is blocked, but the rest of its content can be prerendered.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Use a static metadata export instead of \`generateMetadata()\`\n` +
+      `  - Cache the metadata with \`"use cache"\` in \`generateMetadata()\`\n` +
+      `  - Add a dynamic data access (e.g. \`await connection()\`) to the page to render it at request time\n\n` +
+      `Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata`
+  )
 }
 
 export function logBuildDebugHint(route: string): void {
diff --git a/packages/next/src/server/app-render/dynamic-rendering.ts b/packages/next/src/server/app-render/dynamic-rendering.ts
index efafe795a8ea..dcd8444b7ec9 100644
--- a/packages/next/src/server/app-render/dynamic-rendering.ts
+++ b/packages/next/src/server/app-render/dynamic-rendering.ts
@@ -55,8 +55,8 @@ import {
   createDynamicMetadataError,
   createRuntimeViewportError,
   createDynamicViewportError,
-  disallowedDynamicViewportMessage,
-  disallowedDynamicMetadataMessage,
+  createDynamicOrRuntimeViewportError,
+  createDynamicOrRuntimeMetadataError,
   logBuildDebugHint,
 } from './blocking-route-messages'
 import { InvariantError } from '../../shared/lib/invariant-error'
@@ -1248,7 +1248,9 @@ export function throwIfDisallowedDynamic(
     // you need to opt into that by adding a Suspense boundary above the body
     // to indicate your are ok with fully dynamic rendering.
     if (dynamicValidation.hasDynamicViewport) {
-      console.error(disallowedDynamicViewportMessage(workStore.route))
+      console.error(
+        createDynamicOrRuntimeViewportError(workStore.route).message
+      )
       throw new StaticGenBailoutError()
     }
 
@@ -1266,7 +1268,9 @@ export function throwIfDisallowedDynamic(
       dynamicValidation.hasAllowedDynamic === false &&
       dynamicValidation.hasDynamicMetadata
     ) {
-      console.error(disallowedDynamicMetadataMessage(workStore.route))
+      console.error(
+        createDynamicOrRuntimeMetadataError(workStore.route).message
+      )
       throw new StaticGenBailoutError()
     }
   }
diff --git a/packages/next/src/server/app-render/sync-io-messages.ts b/packages/next/src/server/app-render/sync-io-messages.ts
new file mode 100644
index 000000000000..167465073a21
--- /dev/null
+++ b/packages/next/src/server/app-render/sync-io-messages.ts
@@ -0,0 +1,81 @@
+export type SyncIOApiType = 'time' | 'random' | 'crypto'
+
+const SYNC_IO_DOCS: Record<SyncIOApiType, string> = {
+  time: 'https://nextjs.org/docs/messages/next-prerender-current-time',
+  random: 'https://nextjs.org/docs/messages/next-prerender-random',
+  crypto: 'https://nextjs.org/docs/messages/next-prerender-crypto',
+}
+
+const SYNC_IO_CLIENT_DOCS: Record<SyncIOApiType, string> = {
+  time: 'https://nextjs.org/docs/messages/next-prerender-current-time-client',
+  random: 'https://nextjs.org/docs/messages/next-prerender-random-client',
+  crypto: 'https://nextjs.org/docs/messages/next-prerender-crypto-client',
+}
+
+const SYNC_IO_RUNTIME_DOCS: Record<SyncIOApiType, string> = {
+  time: 'https://nextjs.org/docs/messages/next-prerender-runtime-current-time',
+  random: 'https://nextjs.org/docs/messages/next-prerender-runtime-random',
+  crypto: 'https://nextjs.org/docs/messages/next-prerender-runtime-crypto',
+}
+
+function elapsedTimeBullet(type: SyncIOApiType): string {
+  return type === 'time'
+    ? `  - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`\n`
+    : ''
+}
+
+function createSyncIOErrorImpl(
+  route: string,
+  expression: string,
+  type: SyncIOApiType,
+  docsUrl: string
+): Error {
+  return new Error(
+    `Route "${route}": Next.js encountered ${expression} without an explicit rendering intent.\n\n` +
+      `This value can change between renders, so it must be either prerendered or computed later.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call\n` +
+      `  - Prerender and cache the value with \`"use cache"\`\n` +
+      `  - Render the value on the client with \`"use client"\`\n` +
+      elapsedTimeBullet(type) +
+      `\n` +
+      `Learn more: ${docsUrl}`
+  )
+}
+
+export function createSyncIOError(
+  route: string,
+  expression: string,
+  type: SyncIOApiType
+): Error {
+  return createSyncIOErrorImpl(route, expression, type, SYNC_IO_DOCS[type])
+}
+
+export function createSyncIORuntimeError(
+  route: string,
+  expression: string,
+  type: SyncIOApiType
+): Error {
+  return createSyncIOErrorImpl(
+    route,
+    expression,
+    type,
+    SYNC_IO_RUNTIME_DOCS[type]
+  )
+}
+
+export function createSyncIOClientError(
+  route: string,
+  expression: string,
+  type: SyncIOApiType
+): Error {
+  return new Error(
+    `Route "${route}": Next.js encountered ${expression} in a Client Component.\n\n` +
+      `This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.\n\n` +
+      `Ways to fix this:\n` +
+      `  - Wrap the Client Component in \`<Suspense fallback={...}>\`\n` +
+      `  - Move the read into a \`useEffect\` or event handler\n` +
+      `\n` +
+      `Learn more: ${SYNC_IO_CLIENT_DOCS[type]}`
+  )
+}
diff --git a/packages/next/src/server/node-environment-extensions/io-utils.tsx b/packages/next/src/server/node-environment-extensions/io-utils.tsx
index 6106d5ef60d7..1ce3537e2fc4 100644
--- a/packages/next/src/server/node-environment-extensions/io-utils.tsx
+++ b/packages/next/src/server/node-environment-extensions/io-utils.tsx
@@ -1,13 +1,16 @@
 import { workAsyncStorage } from '../app-render/work-async-storage.external'
 import { workUnitAsyncStorage } from '../app-render/work-unit-async-storage.external'
 import { abortOnSynchronousPlatformIOAccess } from '../app-render/dynamic-rendering'
-import { InvariantError } from '../../shared/lib/invariant-error'
 import { RenderStage } from '../app-render/staged-rendering'
 import { applyOwnerStack } from '../dynamic-rendering-utils'
+import {
+  createSyncIOClientError,
+  createSyncIOError,
+  createSyncIORuntimeError,
+  type SyncIOApiType,
+} from '../app-render/sync-io-messages'
 
-type ApiType = 'time' | 'random' | 'crypto'
-
-export function io(expression: string, type: ApiType) {
+export function io(expression: string, type: SyncIOApiType) {
   const workUnitStore = workUnitAsyncStorage.getStore()
   const workStore = workAsyncStorage.getStore()
 
@@ -23,27 +26,10 @@ export function io(expression: string, type: ApiType) {
       if (prerenderSignal.aborted === false) {
         // If the prerender signal is already aborted we don't need to construct
         // any stacks because something else actually terminated the prerender.
-        let message: string
-        switch (type) {
-          case 'time':
-            message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time`
-            break
-          case 'random':
-            message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random`
-            break
-          case 'crypto':
-            message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto`
-            break
-          default:
-            throw new InvariantError(
-              'Unknown expression type in abortOnSynchronousPlatformIOAccess.'
-            )
-        }
-
         abortOnSynchronousPlatformIOAccess(
           workStore.route,
           expression,
-          applyOwnerStack(new Error(message)),
+          applyOwnerStack(createSyncIOError(workStore.route, expression, type)),
           workUnitStore
         )
       }
@@ -55,27 +41,12 @@ export function io(expression: string, type: ApiType) {
       if (prerenderSignal.aborted === false) {
         // If the prerender signal is already aborted we don't need to construct
         // any stacks because something else actually terminated the prerender.
-        let message: string
-        switch (type) {
-          case 'time':
-            message = `Route "${workStore.route}" used ${expression} inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client`
-            break
-          case 'random':
-            message = `Route "${workStore.route}" used ${expression} inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-random-client`
-            break
-          case 'crypto':
-            message = `Route "${workStore.route}" used ${expression} inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto-client`
-            break
-          default:
-            throw new InvariantError(
-              'Unknown expression type in abortOnSynchronousPlatformIOAccess.'
-            )
-        }
-
         abortOnSynchronousPlatformIOAccess(
           workStore.route,
           expression,
-          applyOwnerStack(new Error(message)),
+          applyOwnerStack(
+            createSyncIOClientError(workStore.route, expression, type)
+          ),
           workUnitStore
         )
       }
@@ -84,61 +55,25 @@ export function io(expression: string, type: ApiType) {
     case 'request': {
       const stageController = workUnitStore.stagedRendering
       if (stageController && stageController.shouldTrackSyncInterrupt()) {
-        let message: string
+        let syncIOError: Error
         if (
           stageController.currentStage === RenderStage.Static ||
           stageController.currentStage === RenderStage.EarlyStatic
         ) {
-          switch (type) {
-            case 'time':
-              message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time`
-              break
-            case 'random':
-              message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random`
-              break
-            case 'crypto':
-              message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto`
-              break
-            default:
-              throw new InvariantError(
-                'Unknown expression type in abortOnSynchronousPlatformIOAccess.'
-              )
-          }
+          syncIOError = createSyncIOError(workStore.route, expression, type)
         } else {
           // We're in the Runtime stage.
           // We only error for Sync IO in the Runtime stage if the route has a runtime prefetch config.
           // This check is implemented in `stageController.canSyncInterrupt()` --
           // if runtime prefetching isn't enabled, then we won't get here.
-
-          let accessStatement: string
-          let additionalInfoLink: string
-
-          switch (type) {
-            case 'time':
-              accessStatement = 'the current time'
-              additionalInfoLink =
-                'https://nextjs.org/docs/messages/next-prerender-runtime-current-time'
-              break
-            case 'random':
-              accessStatement = 'random values synchronously'
-              additionalInfoLink =
-                'https://nextjs.org/docs/messages/next-prerender-runtime-random'
-              break
-            case 'crypto':
-              accessStatement = 'random cryptographic values synchronously'
-              additionalInfoLink =
-                'https://nextjs.org/docs/messages/next-prerender-runtime-crypto'
-              break
-            default:
-              throw new InvariantError(
-                'Unknown expression type in abortOnSynchronousPlatformIOAccess.'
-              )
-          }
-
-          message = `Route "${workStore.route}" used ${expression} before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing ${accessStatement} in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: ${additionalInfoLink}`
+          syncIOError = createSyncIORuntimeError(
+            workStore.route,
+            expression,
+            type
+          )
         }
 
-        const syncIOError = applyOwnerStack(new Error(message))
+        syncIOError = applyOwnerStack(syncIOError)
         stageController.syncInterruptCurrentStageWithReason(syncIOError)
 
         // A build-time validation render uses a 'request' store type, but may be abortable.
diff --git a/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts b/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts
index cee1a75af164..7de312c56f07 100644
--- a/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts
+++ b/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts
@@ -21,10 +21,10 @@ describe('Cache Components Dev Errors', () => {
     // soft-navigating to the page (see test below).
     await expect(browser).toDisplayCollapsedRedbox(`
      {
-       "code": "E394",
-       "description": "Route "/error" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+       "code": "E1247",
+       "description": "Next.js encountered Math.random() without an explicit rendering intent.",
        "environmentLabel": "Server",
-       "label": "Console Error",
+       "label": "Instant",
        "source": "app/error/page.tsx (2:23) @ Page
      > 2 |   const random = Math.random()
          |                       ^",
@@ -51,10 +51,10 @@ describe('Cache Components Dev Errors', () => {
     // TODO: React should not include the anon stack in the Owner Stack.
     await expect(browser).toDisplayCollapsedRedbox(`
      {
-       "code": "E394",
-       "description": "Route "/error" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+       "code": "E1247",
+       "description": "Next.js encountered Math.random() without an explicit rendering intent.",
        "environmentLabel": "Server",
-       "label": "Console Error",
+       "label": "Instant",
        "source": "app/error/page.tsx (2:23) @ Page
      > 2 |   const random = Math.random()
          |                       ^",
@@ -98,7 +98,7 @@ describe('Cache Components Dev Errors', () => {
 
     await expect(browser).toDisplayCollapsedRedbox(`
      {
-       "code": "E1164",
+       "code": "E1220",
        "description": "Next.js encountered uncached data during the initial render.",
        "environmentLabel": "Server",
        "label": "Instant",
diff --git a/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts b/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts
index b3ba30fc7227..25a90576ebab 100644
--- a/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts
+++ b/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts
@@ -52,7 +52,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -67,7 +67,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -85,7 +85,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -100,7 +100,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -118,7 +118,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -133,7 +133,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -155,7 +155,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -170,7 +170,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -188,7 +188,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -203,7 +203,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -221,7 +221,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -236,7 +236,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -254,7 +254,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -269,7 +269,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -287,7 +287,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -302,7 +302,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -320,7 +320,7 @@ describe('Cache Components Fallback Validation', () => {
     if (isTurbopack) {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -335,7 +335,7 @@ describe('Cache Components Fallback Validation', () => {
     } else {
       await expect(browser).toDisplayCollapsedRedbox(`
        {
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
diff --git a/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts b/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts
index a25b7fe09431..bbf7557db50d 100644
--- a/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts
+++ b/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts
@@ -86,22 +86,10 @@ describe('Cache Components Errors', () => {
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1170",
-             "description": "Data that blocks navigation was accessed inside generateMetadata() in an otherwise prerenderable page
-
-           When Document metadata is the only part of a page that cannot be prerendered Next.js expects you to either make it prerenderable or make some other part of the page non-prerenderable to avoid unintentional partially dynamic pages. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.
-
-           To fix this:
-
-           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender generateMetadata() as part of the HTML document, so it's instantly visible to the user.
-
-           or
-
-           add connection() inside a <Suspense> somewhere in a Page or Layout. This tells Next.js that the page is intended to have some non-prerenderable parts.
-
-           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+             "code": "E1231",
+             "description": "Next.js encountered uncached data in generateMetadata().",
              "environmentLabel": "Server",
-             "label": "Ambiguous Metadata",
+             "label": "Instant",
              "source": "app/dynamic-metadata-static-route/page.tsx (2:9) @ Module.generateMetadata
            > 2 |   await new Promise((r) => setTimeout(r, 0))
                |         ^",
@@ -126,18 +114,36 @@ describe('Cache Components Errors', () => {
 
           if (isDebugPrerender) {
             expect(output).toMatchInlineSnapshot(`
-               "Route "/dynamic-metadata-static-route" has a \`generateMetadata\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) when the rest of the route does not. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-               Error occurred prerendering page "/dynamic-metadata-static-route". Read more: https://nextjs.org/docs/messages/prerender-error
+             "Route "/dynamic-metadata-static-route": Next.js encountered uncached or runtime data in \`generateMetadata()\`.
 
-               > Export encountered errors on 1 path:
-               	/dynamic-metadata-static-route/page: /dynamic-metadata-static-route"
-              `)
+             This route's metadata is blocked, but the rest of its content can be prerendered.
+
+             Ways to fix this:
+               - Use a static metadata export instead of \`generateMetadata()\`
+               - Cache the metadata with \`"use cache"\` in \`generateMetadata()\`
+               - Add a dynamic data access (e.g. \`await connection()\`) to the page to render it at request time
+
+             Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+             Error occurred prerendering page "/dynamic-metadata-static-route". Read more: https://nextjs.org/docs/messages/prerender-error
+
+             > Export encountered errors on 1 path:
+             	/dynamic-metadata-static-route/page: /dynamic-metadata-static-route"
+            `)
           } else {
             expect(output).toMatchInlineSnapshot(`
-               "Route "/dynamic-metadata-static-route" has a \`generateMetadata\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) when the rest of the route does not. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-               Error occurred prerendering page "/dynamic-metadata-static-route". Read more: https://nextjs.org/docs/messages/prerender-error
-               Export encountered an error on /dynamic-metadata-static-route/page: /dynamic-metadata-static-route, exiting the build."
-              `)
+             "Route "/dynamic-metadata-static-route": Next.js encountered uncached or runtime data in \`generateMetadata()\`.
+
+             This route's metadata is blocked, but the rest of its content can be prerendered.
+
+             Ways to fix this:
+               - Use a static metadata export instead of \`generateMetadata()\`
+               - Cache the metadata with \`"use cache"\` in \`generateMetadata()\`
+               - Add a dynamic data access (e.g. \`await connection()\`) to the page to render it at request time
+
+             Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+             Error occurred prerendering page "/dynamic-metadata-static-route". Read more: https://nextjs.org/docs/messages/prerender-error
+             Export encountered an error on /dynamic-metadata-static-route/page: /dynamic-metadata-static-route, exiting the build."
+            `)
           }
         })
       }
@@ -152,7 +158,7 @@ describe('Cache Components Errors', () => {
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -185,11 +191,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-metadata-error-route": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -213,11 +219,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-metadata-error-route": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -237,11 +243,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-metadata-error-route": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -265,11 +271,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-metadata-error-route": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -319,22 +325,10 @@ describe('Cache Components Errors', () => {
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1170",
-             "description": "Data that blocks navigation was accessed inside generateMetadata() in an otherwise prerenderable page
-
-           When Document metadata is the only part of a page that cannot be prerendered Next.js expects you to either make it prerenderable or make some other part of the page non-prerenderable to avoid unintentional partially dynamic pages. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.
-
-           To fix this:
-
-           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender generateMetadata() as part of the HTML document, so it's instantly visible to the user.
-
-           or
-
-           add connection() inside a <Suspense> somewhere in a Page or Layout. This tells Next.js that the page is intended to have some non-prerenderable parts.
-
-           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata",
+             "code": "E1231",
+             "description": "Next.js encountered uncached data in generateMetadata().",
              "environmentLabel": "Server",
-             "label": "Ambiguous Metadata",
+             "label": "Instant",
              "source": "app/dynamic-metadata-static-with-suspense/page.tsx (2:9) @ Module.generateMetadata
            > 2 |   await new Promise((r) => setTimeout(r, 0))
                |         ^",
@@ -359,18 +353,36 @@ describe('Cache Components Errors', () => {
 
           if (isDebugPrerender) {
             expect(output).toMatchInlineSnapshot(`
-               "Route "/dynamic-metadata-static-with-suspense" has a \`generateMetadata\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) when the rest of the route does not. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-               Error occurred prerendering page "/dynamic-metadata-static-with-suspense". Read more: https://nextjs.org/docs/messages/prerender-error
+             "Route "/dynamic-metadata-static-with-suspense": Next.js encountered uncached or runtime data in \`generateMetadata()\`.
 
-               > Export encountered errors on 1 path:
-               	/dynamic-metadata-static-with-suspense/page: /dynamic-metadata-static-with-suspense"
-              `)
+             This route's metadata is blocked, but the rest of its content can be prerendered.
+
+             Ways to fix this:
+               - Use a static metadata export instead of \`generateMetadata()\`
+               - Cache the metadata with \`"use cache"\` in \`generateMetadata()\`
+               - Add a dynamic data access (e.g. \`await connection()\`) to the page to render it at request time
+
+             Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+             Error occurred prerendering page "/dynamic-metadata-static-with-suspense". Read more: https://nextjs.org/docs/messages/prerender-error
+
+             > Export encountered errors on 1 path:
+             	/dynamic-metadata-static-with-suspense/page: /dynamic-metadata-static-with-suspense"
+            `)
           } else {
             expect(output).toMatchInlineSnapshot(`
-               "Route "/dynamic-metadata-static-with-suspense" has a \`generateMetadata\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) when the rest of the route does not. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
-               Error occurred prerendering page "/dynamic-metadata-static-with-suspense". Read more: https://nextjs.org/docs/messages/prerender-error
-               Export encountered an error on /dynamic-metadata-static-with-suspense/page: /dynamic-metadata-static-with-suspense, exiting the build."
-              `)
+             "Route "/dynamic-metadata-static-with-suspense": Next.js encountered uncached or runtime data in \`generateMetadata()\`.
+
+             This route's metadata is blocked, but the rest of its content can be prerendered.
+
+             Ways to fix this:
+               - Use a static metadata export instead of \`generateMetadata()\`
+               - Cache the metadata with \`"use cache"\` in \`generateMetadata()\`
+               - Add a dynamic data access (e.g. \`await connection()\`) to the page to render it at request time
+
+             Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+             Error occurred prerendering page "/dynamic-metadata-static-with-suspense". Read more: https://nextjs.org/docs/messages/prerender-error
+             Export encountered an error on /dynamic-metadata-static-with-suspense/page: /dynamic-metadata-static-with-suspense, exiting the build."
+            `)
           }
         })
       }
@@ -410,22 +422,10 @@ describe('Cache Components Errors', () => {
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1167",
-             "description": "Data that blocks navigation was accessed inside generateViewport()
-
-           Viewport metadata needs to be available on page load so accessing data that waits for a user navigation while producing it prevents Next.js from prerendering an initial UI. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.
-
-           To fix this:
-
-           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender generateViewport() as part of the HTML document, so it's instantly visible to the user.
-
-           or
-
-           Put a <Suspense> around your document <body>.This indicate to Next.js that you are opting into allowing blocking navigations for any page.
-
-           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+             "code": "E1210",
+             "description": "Next.js encountered uncached data in generateViewport().",
              "environmentLabel": "Server",
-             "label": "Blocking Route",
+             "label": "Instant",
              "source": "app/dynamic-viewport-static-route/page.tsx (2:9) @ Module.generateViewport
            > 2 |   await new Promise((r) => setTimeout(r, 0))
                |         ^",
@@ -450,7 +450,17 @@ describe('Cache Components Errors', () => {
 
           if (isDebugPrerender) {
             expect(output).toMatchInlineSnapshot(`
-             "Route "/dynamic-viewport-static-route" has a \`generateViewport\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) without explicitly allowing fully dynamic rendering. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
+             "Route "/dynamic-viewport-static-route": Next.js encountered uncached or runtime data in \`generateViewport()\`.
+
+             This prevents the page from being prerendered, leading to a slower user experience.
+
+             Ways to fix this:
+               - Use a static viewport export instead of \`generateViewport()\`
+               - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`
+               - Wrap your document \`<body>\` in \`<Suspense>\`
+               - Set \`export const instant = false\` to allow a blocking route
+
+             Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
              Error occurred prerendering page "/dynamic-viewport-static-route". Read more: https://nextjs.org/docs/messages/prerender-error
 
              > Export encountered errors on 1 path:
@@ -458,7 +468,17 @@ describe('Cache Components Errors', () => {
             `)
           } else {
             expect(output).toMatchInlineSnapshot(`
-               "Route "/dynamic-viewport-static-route" has a \`generateViewport\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) without explicitly allowing fully dynamic rendering. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
+               "Route "/dynamic-viewport-static-route": Next.js encountered uncached or runtime data in \`generateViewport()\`.
+
+               This prevents the page from being prerendered, leading to a slower user experience.
+
+               Ways to fix this:
+                 - Use a static viewport export instead of \`generateViewport()\`
+                 - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`
+                 - Wrap your document \`<body>\` in \`<Suspense>\`
+                 - Set \`export const instant = false\` to allow a blocking route
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
                Error occurred prerendering page "/dynamic-viewport-static-route". Read more: https://nextjs.org/docs/messages/prerender-error
                Export encountered an error on /dynamic-viewport-static-route/page: /dynamic-viewport-static-route, exiting the build."
               `)
@@ -476,22 +496,10 @@ describe('Cache Components Errors', () => {
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1167",
-             "description": "Data that blocks navigation was accessed inside generateViewport()
-
-           Viewport metadata needs to be available on page load so accessing data that waits for a user navigation while producing it prevents Next.js from prerendering an initial UI. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.
-
-           To fix this:
-
-           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender generateViewport() as part of the HTML document, so it's instantly visible to the user.
-
-           or
-
-           Put a <Suspense> around your document <body>.This indicate to Next.js that you are opting into allowing blocking navigations for any page.
-
-           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+             "code": "E1210",
+             "description": "Next.js encountered uncached data in generateViewport().",
              "environmentLabel": "Server",
-             "label": "Blocking Route",
+             "label": "Instant",
              "source": "app/dynamic-viewport-dynamic-route/page.tsx (4:9) @ Module.generateViewport
            > 4 |   await new Promise((r) => setTimeout(r, 0))
                |         ^",
@@ -516,7 +524,17 @@ describe('Cache Components Errors', () => {
 
           if (isDebugPrerender) {
             expect(output).toMatchInlineSnapshot(`
-             "Route "/dynamic-viewport-dynamic-route" has a \`generateViewport\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) without explicitly allowing fully dynamic rendering. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
+             "Route "/dynamic-viewport-dynamic-route": Next.js encountered uncached or runtime data in \`generateViewport()\`.
+
+             This prevents the page from being prerendered, leading to a slower user experience.
+
+             Ways to fix this:
+               - Use a static viewport export instead of \`generateViewport()\`
+               - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`
+               - Wrap your document \`<body>\` in \`<Suspense>\`
+               - Set \`export const instant = false\` to allow a blocking route
+
+             Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
              Error occurred prerendering page "/dynamic-viewport-dynamic-route". Read more: https://nextjs.org/docs/messages/prerender-error
 
              > Export encountered errors on 1 path:
@@ -524,7 +542,17 @@ describe('Cache Components Errors', () => {
             `)
           } else {
             expect(output).toMatchInlineSnapshot(`
-               "Route "/dynamic-viewport-dynamic-route" has a \`generateViewport\` that depends on Request data (\`cookies()\`, etc...) or uncached external data (\`fetch(...)\`, etc...) without explicitly allowing fully dynamic rendering. See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
+               "Route "/dynamic-viewport-dynamic-route": Next.js encountered uncached or runtime data in \`generateViewport()\`.
+
+               This prevents the page from being prerendered, leading to a slower user experience.
+
+               Ways to fix this:
+                 - Use a static viewport export instead of \`generateViewport()\`
+                 - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`
+                 - Wrap your document \`<body>\` in \`<Suspense>\`
+                 - Set \`export const instant = false\` to allow a blocking route
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
                Error occurred prerendering page "/dynamic-viewport-dynamic-route". Read more: https://nextjs.org/docs/messages/prerender-error
                Export encountered an error on /dynamic-viewport-dynamic-route/page: /dynamic-viewport-dynamic-route, exiting the build."
               `)
@@ -562,7 +590,7 @@ describe('Cache Components Errors', () => {
           await expect(browser).toDisplayCollapsedRedbox(`
            [
              {
-               "code": "E1164",
+               "code": "E1220",
                "description": "Next.js encountered uncached data during the initial render.",
                "environmentLabel": "Server",
                "label": "Instant",
@@ -576,7 +604,7 @@ describe('Cache Components Errors', () => {
                ],
              },
              {
-               "code": "E1164",
+               "code": "E1220",
                "description": "Next.js encountered uncached data during the initial render.",
                "environmentLabel": "Server",
                "label": "Instant",
@@ -610,11 +638,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -632,11 +660,11 @@ describe('Cache Components Errors', () => {
                To debug the issue, start the app in development mode by running \`next dev\`, then open "/dynamic-root" in your browser to investigate the error.
                Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -661,11 +689,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -686,11 +714,11 @@ describe('Cache Components Errors', () => {
                  - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
                Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -710,11 +738,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -732,11 +760,11 @@ describe('Cache Components Errors', () => {
                To debug the issue, start the app in development mode by running \`next dev\`, then open "/dynamic-root" in your browser to investigate the error.
                Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -761,11 +789,11 @@ describe('Cache Components Errors', () => {
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -800,11 +828,11 @@ describe('Cache Components Errors', () => {
                  - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
                Error: Route "/dynamic-root": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -883,10 +911,10 @@ describe('Cache Components Errors', () => {
 
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-random-with-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered Math.random() without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-random-with-fallback/page.tsx (37:23) @ RandomReadingComponent
              > 37 |   const random = Math.random()
                   |                       ^",
@@ -913,7 +941,16 @@ describe('Cache Components Errors', () => {
             if (isDebugPrerender) {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-with-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-with-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at RandomReadingComponent (app/sync-random-with-fallback/page.tsx:37:23)
                      at Page (app/sync-random-with-fallback/page.tsx:18:11)
                    35 |     use(new Promise((r) => process.nextTick(r)))
@@ -931,7 +968,16 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-with-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-with-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at RandomReadingComponent (webpack:///app/sync-random-with-fallback/page.tsx:37:23)
                      at Page (webpack:///app/sync-random-with-fallback/page.tsx:18:11)
                    35 |     use(new Promise((r) => process.nextTick(r)))
@@ -951,7 +997,16 @@ describe('Cache Components Errors', () => {
             } else {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-with-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-with-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at a (app/sync-random-with-fallback/page.tsx:37:23)
                    35 |     use(new Promise((r) => process.nextTick(r)))
                    36 |   }
@@ -968,7 +1023,16 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-with-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-with-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at a (<next-dist-dir>)
                  To get a more detailed stack trace and pinpoint the issue, try one of the following:
                    - Start the app in development mode by running \`next dev\`, then open "/sync-random-with-fallback" in your browser to investigate the error.
@@ -995,10 +1059,10 @@ describe('Cache Components Errors', () => {
 
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-random-without-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered Math.random() without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-random-without-fallback/page.tsx (32:15) @ getRandomNumber
              > 32 |   return Math.random()
                   |               ^",
@@ -1026,7 +1090,16 @@ describe('Cache Components Errors', () => {
             if (isDebugPrerender) {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-without-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-without-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at getRandomNumber (app/sync-random-without-fallback/page.tsx:32:15)
                      at RandomReadingComponent (app/sync-random-without-fallback/page.tsx:40:18)
                      at Page (app/sync-random-without-fallback/page.tsx:18:11)
@@ -1045,7 +1118,16 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-without-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-without-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at getRandomNumber (webpack:///app/sync-random-without-fallback/page.tsx:32:15)
                      at RandomReadingComponent (webpack:///app/sync-random-without-fallback/page.tsx:40:18)
                      at Page (webpack:///app/sync-random-without-fallback/page.tsx:18:11)
@@ -1066,7 +1148,16 @@ describe('Cache Components Errors', () => {
             } else {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-without-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-without-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at a (app/sync-random-without-fallback/page.tsx:32:15)
                    30 |
                    31 | function getRandomNumber() {
@@ -1083,7 +1174,16 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-random-without-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+                 "Error: Route "/sync-random-without-fallback": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+                 This value can change between renders, so it must be either prerendered or computed later.
+
+                 Ways to fix this:
+                   - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                   - Prerender and cache the value with \`"use cache"\`
+                   - Render the value on the client with \`"use client"\`
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-random
                      at a (<next-dist-dir>)
                  To get a more detailed stack trace and pinpoint the issue, try one of the following:
                    - Start the app in development mode by running \`next dev\`, then open "/sync-random-without-fallback" in your browser to investigate the error.
@@ -1899,10 +1999,10 @@ describe('Cache Components Errors', () => {
 
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-attribution/guarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client",
+               "code": "E1228",
+               "description": "Next.js encountered new Date() in a Client Component.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-attribution/guarded-async-unguarded-clientsync/client.tsx (5:16) @ SyncIO
              > 5 |   const data = new Date().toISOString()
                  |                ^",
@@ -1929,7 +2029,15 @@ describe('Cache Components Errors', () => {
             if (isDebugPrerender) {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at SyncIO (app/sync-attribution/guarded-async-unguarded-clientsync/client.tsx:5:16)
                      at Page (app/sync-attribution/guarded-async-unguarded-clientsync/page.tsx:22:9)
                    3 | export function SyncIO() {
@@ -1947,7 +2055,15 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at SyncIO (webpack:///app/sync-attribution/guarded-async-unguarded-clientsync/client.tsx:5:16)
                      at Page (webpack:///app/sync-attribution/guarded-async-unguarded-clientsync/page.tsx:22:9)
                    3 | export function SyncIO() {
@@ -1967,7 +2083,15 @@ describe('Cache Components Errors', () => {
             } else {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at <unknown> (app/sync-attribution/guarded-async-unguarded-clientsync/client.tsx:5:16)
                    3 | export function SyncIO() {
                    4 |   // This is a sync IO access that should not cause an error
@@ -1984,7 +2108,15 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/guarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at a (<next-dist-dir>)
                  To get a more detailed stack trace and pinpoint the issue, try one of the following:
                    - Start the app in development mode by running \`next dev\`, then open "/sync-attribution/guarded-async-unguarded-clientsync" in your browser to investigate the error.
@@ -2011,7 +2143,7 @@ describe('Cache Components Errors', () => {
 
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E1166",
+               "code": "E1221",
                "description": "Next.js encountered runtime data during the initial render.",
                "environmentLabel": "Server",
                "label": "Instant",
@@ -2043,11 +2175,11 @@ describe('Cache Components Errors', () => {
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/sync-attribution/unguarded-async-guarded-clientsync": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -2071,11 +2203,11 @@ describe('Cache Components Errors', () => {
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/sync-attribution/unguarded-async-guarded-clientsync": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -2097,11 +2229,11 @@ describe('Cache Components Errors', () => {
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/sync-attribution/unguarded-async-guarded-clientsync": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -2122,60 +2254,13 @@ describe('Cache Components Errors', () => {
                  	/sync-attribution/unguarded-async-guarded-clientsync/page: /sync-attribution/unguarded-async-guarded-clientsync"
                 `)
               } else {
-                expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/unguarded-async-guarded-clientsync": Next.js encountered uncached or runtime data during the initial render.
-
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
-
-                 Ways to fix this:
-                   - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
-                   - Use \`generateStaticParams\` to make route params static
-                   - Set \`export const instant = false\` to allow a blocking route
-
-                 Learn more: https://nextjs.org/docs/messages/blocking-route
-                     at a (<anonymous>)
-                     at main (<anonymous>)
-                     at b (<next-dist-dir>)
-                     at c (<next-dist-dir>)
-                     at d (<next-dist-dir>)
-                     at e (<next-dist-dir>)
-                     at f (<next-dist-dir>)
-                     at g (<next-dist-dir>)
-                     at h (<next-dist-dir>)
-                     at i (<next-dist-dir>)
-                     at j (<anonymous>)
-                     at k (<next-dist-dir>)
-                     at main (<anonymous>)
-                     at body (<anonymous>)
-                     at html (<anonymous>)
-                     at l (<next-dist-dir>)
-                     at m (<next-dist-dir>)
-                     at n (<next-dist-dir>)
-                     at o (<next-dist-dir>)
-                     at p (<next-dist-dir>)
-                     at q (<next-dist-dir>)
-                     at r (<next-dist-dir>)
-                     at s (<next-dist-dir>)
-                     at t (<anonymous>)
-                     at u (<next-dist-dir>)
-                     at v (<next-dist-dir>)
-                     at w (<next-dist-dir>)
-                     at x (<next-dist-dir>)
-                     at y (<next-dist-dir>)
-                     at z (<next-dist-dir>)
-                     at a (<next-dist-dir>)
-                     at b (<next-dist-dir>)
-                     at c (<next-dist-dir>)
-                     at d (<next-dist-dir>)
-                     at e (<anonymous>)
-                     at f (<next-dist-dir>)
-                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
-                   - Start the app in development mode by running \`next dev\`, then open "/sync-attribution/unguarded-async-guarded-clientsync" in your browser to investigate the error.
-                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
-                 Error occurred prerendering page "/sync-attribution/unguarded-async-guarded-clientsync". Read more: https://nextjs.org/docs/messages/prerender-error
-                 Export encountered an error on /sync-attribution/unguarded-async-guarded-clientsync/page: /sync-attribution/unguarded-async-guarded-clientsync, exiting the build."
-                `)
+                // Webpack does not ignore the stack frames that point into
+                // Next.js internals, and the resolved frames are flaky in
+                // non-debug-prerender mode, so we don't assert on the stack
+                // frames here.
+                expect(output).toInclude(
+                  'Error: Route "/sync-attribution/unguarded-async-guarded-clientsync": Next.js encountered uncached or runtime data during the initial render.'
+                )
               }
             }
           })
@@ -2196,10 +2281,10 @@ describe('Cache Components Errors', () => {
 
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-attribution/unguarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client",
+               "code": "E1228",
+               "description": "Next.js encountered new Date() in a Client Component.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-attribution/unguarded-async-unguarded-clientsync/client.tsx (5:16) @ SyncIO
              > 5 |   const data = new Date().toISOString()
                  |                ^",
@@ -2226,7 +2311,15 @@ describe('Cache Components Errors', () => {
             if (isDebugPrerender) {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at SyncIO (app/sync-attribution/unguarded-async-unguarded-clientsync/client.tsx:5:16)
                      at Page (app/sync-attribution/unguarded-async-unguarded-clientsync/page.tsx:22:9)
                    3 | export function SyncIO() {
@@ -2244,7 +2337,15 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at SyncIO (webpack:///app/sync-attribution/unguarded-async-unguarded-clientsync/client.tsx:5:16)
                      at Page (webpack:///app/sync-attribution/unguarded-async-unguarded-clientsync/page.tsx:22:9)
                    3 | export function SyncIO() {
@@ -2264,7 +2365,15 @@ describe('Cache Components Errors', () => {
             } else {
               if (isTurbopack) {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at <unknown> (app/sync-attribution/unguarded-async-unguarded-clientsync/client.tsx:5:16)
                    3 | export function SyncIO() {
                    4 |   // This is a sync IO access that should not cause an error
@@ -2281,7 +2390,15 @@ describe('Cache Components Errors', () => {
                 `)
               } else {
                 expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+                 "Error: Route "/sync-attribution/unguarded-async-unguarded-clientsync": Next.js encountered \`new Date()\` in a Client Component.
+
+                 This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+                 Ways to fix this:
+                   - Wrap the Client Component in \`<Suspense fallback={...}>\`
+                   - Move the read into a \`useEffect\` or event handler
+
+                 Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                      at a (<next-dist-dir>)
                  To get a more detailed stack trace and pinpoint the issue, try one of the following:
                    - Start the app in development mode by running \`next dev\`, then open "/sync-attribution/unguarded-async-unguarded-clientsync" in your browser to investigate the error.
@@ -2738,7 +2855,7 @@ describe('Cache Components Errors', () => {
 
               await expect(browser).toDisplayCollapsedRedbox(`
                {
-                 "code": "E1166",
+                 "code": "E1221",
                  "description": "Next.js encountered runtime data during the initial render.",
                  "environmentLabel": "Server",
                  "label": "Instant",
@@ -2769,11 +2886,11 @@ describe('Cache Components Errors', () => {
                   expect(output).toMatchInlineSnapshot(`
                    "Error: Route "/use-cache-low-expire/fast": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                    Ways to fix this:
                      - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
+                     - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                      - Use \`generateStaticParams\` to make route params static
                      - Set \`export const instant = false\` to allow a blocking route
 
@@ -2796,11 +2913,11 @@ describe('Cache Components Errors', () => {
                   expect(output).toMatchInlineSnapshot(`
                    "Error: Route "/use-cache-low-expire/fast": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                    Ways to fix this:
                      - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
+                     - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                      - Use \`generateStaticParams\` to make route params static
                      - Set \`export const instant = false\` to allow a blocking route
 
@@ -2823,69 +2940,30 @@ describe('Cache Components Errors', () => {
                   expect(output).toInclude(
                     `Error: Route "/use-cache-low-expire/fast": Next.js encountered uncached or runtime data during the initial render.
 
-\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
 Ways to fix this:
   - Cache the data access with \`"use cache"\`
-  - Move the data access into a child component within a <Suspense> boundary
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
   - Use \`generateStaticParams\` to make route params static
   - Set \`export const instant = false\` to allow a blocking route
 
 Learn more: https://nextjs.org/docs/messages/blocking-route`
                   )
                 } else {
-                  expect(output).toMatchInlineSnapshot(`
-                   "Error: Route "/use-cache-low-expire/fast": Next.js encountered uncached or runtime data during the initial render.
+                  expect(output).toInclude(
+                    `Error: Route "/use-cache-low-expire/fast": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
-                   Ways to fix this:
-                     - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
-                     - Use \`generateStaticParams\` to make route params static
-                     - Set \`export const instant = false\` to allow a blocking route
+Ways to fix this:
+  - Cache the data access with \`"use cache"\`
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
+  - Use \`generateStaticParams\` to make route params static
+  - Set \`export const instant = false\` to allow a blocking route
 
-                   Learn more: https://nextjs.org/docs/messages/blocking-route
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                       at f (<next-dist-dir>)
-                       at g (<next-dist-dir>)
-                       at h (<next-dist-dir>)
-                       at i (<next-dist-dir>)
-                       at j (<next-dist-dir>)
-                       at k (<next-dist-dir>)
-                       at l (<next-dist-dir>)
-                       at m (<next-dist-dir>)
-                       at n (<next-dist-dir>)
-                       at o (<next-dist-dir>)
-                       at p (<next-dist-dir>)
-                       at q (<next-dist-dir>)
-                       at r (<next-dist-dir>)
-                       at s (<next-dist-dir>)
-                       at t (<next-dist-dir>)
-                       at main (<anonymous>)
-                       at body (<anonymous>)
-                       at html (<anonymous>)
-                       at u (<next-dist-dir>)
-                       at v (<next-dist-dir>)
-                       at w (<next-dist-dir>)
-                       at x (<next-dist-dir>)
-                       at y (<next-dist-dir>)
-                       at z (<next-dist-dir>)
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                   To get a more detailed stack trace and pinpoint the issue, try one of the following:
-                     - Start the app in development mode by running \`next dev\`, then open "/use-cache-low-expire/fast" in your browser to investigate the error.
-                     - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
-                   Error occurred prerendering page "/use-cache-low-expire/fast". Read more: https://nextjs.org/docs/messages/prerender-error
-                   Export encountered an error on /use-cache-low-expire/fast/page: /use-cache-low-expire/fast, exiting the build."
-                  `)
+Learn more: https://nextjs.org/docs/messages/blocking-route`
+                  )
                 }
               }
             })
@@ -2899,7 +2977,7 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
               await expect(browser).toDisplayCollapsedRedbox(`
                {
-                 "code": "E1166",
+                 "code": "E1221",
                  "description": "Next.js encountered runtime data during the initial render.",
                  "environmentLabel": "Server",
                  "label": "Instant",
@@ -2930,11 +3008,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toMatchInlineSnapshot(`
                    "Error: Route "/use-cache-low-expire/slow": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                    Ways to fix this:
                      - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
+                     - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                      - Use \`generateStaticParams\` to make route params static
                      - Set \`export const instant = false\` to allow a blocking route
 
@@ -2957,11 +3035,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toMatchInlineSnapshot(`
                    "Error: Route "/use-cache-low-expire/slow": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                    Ways to fix this:
                      - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
+                     - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                      - Use \`generateStaticParams\` to make route params static
                      - Set \`export const instant = false\` to allow a blocking route
 
@@ -2984,69 +3062,30 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toInclude(
                     `Error: Route "/use-cache-low-expire/slow": Next.js encountered uncached or runtime data during the initial render.
 
-\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
 Ways to fix this:
   - Cache the data access with \`"use cache"\`
-  - Move the data access into a child component within a <Suspense> boundary
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
   - Use \`generateStaticParams\` to make route params static
   - Set \`export const instant = false\` to allow a blocking route
 
 Learn more: https://nextjs.org/docs/messages/blocking-route`
                   )
                 } else {
-                  expect(output).toMatchInlineSnapshot(`
-                   "Error: Route "/use-cache-low-expire/slow": Next.js encountered uncached or runtime data during the initial render.
+                  expect(output).toInclude(
+                    `Error: Route "/use-cache-low-expire/slow": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
-                   Ways to fix this:
-                     - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
-                     - Use \`generateStaticParams\` to make route params static
-                     - Set \`export const instant = false\` to allow a blocking route
+Ways to fix this:
+  - Cache the data access with \`"use cache"\`
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
+  - Use \`generateStaticParams\` to make route params static
+  - Set \`export const instant = false\` to allow a blocking route
 
-                   Learn more: https://nextjs.org/docs/messages/blocking-route
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                       at f (<next-dist-dir>)
-                       at g (<next-dist-dir>)
-                       at h (<next-dist-dir>)
-                       at i (<next-dist-dir>)
-                       at j (<next-dist-dir>)
-                       at k (<next-dist-dir>)
-                       at l (<next-dist-dir>)
-                       at m (<next-dist-dir>)
-                       at n (<next-dist-dir>)
-                       at o (<next-dist-dir>)
-                       at p (<next-dist-dir>)
-                       at q (<next-dist-dir>)
-                       at r (<next-dist-dir>)
-                       at s (<next-dist-dir>)
-                       at t (<next-dist-dir>)
-                       at main (<anonymous>)
-                       at body (<anonymous>)
-                       at html (<anonymous>)
-                       at u (<next-dist-dir>)
-                       at v (<next-dist-dir>)
-                       at w (<next-dist-dir>)
-                       at x (<next-dist-dir>)
-                       at y (<next-dist-dir>)
-                       at z (<next-dist-dir>)
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                   To get a more detailed stack trace and pinpoint the issue, try one of the following:
-                     - Start the app in development mode by running \`next dev\`, then open "/use-cache-low-expire/slow" in your browser to investigate the error.
-                     - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
-                   Error occurred prerendering page "/use-cache-low-expire/slow". Read more: https://nextjs.org/docs/messages/prerender-error
-                   Export encountered an error on /use-cache-low-expire/slow/page: /use-cache-low-expire/slow, exiting the build."
-                  `)
+Learn more: https://nextjs.org/docs/messages/blocking-route`
+                  )
                 }
               }
             })
@@ -3165,7 +3204,7 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
               await expect(browser).toDisplayCollapsedRedbox(`
                {
-                 "code": "E1166",
+                 "code": "E1221",
                  "description": "Next.js encountered runtime data during the initial render.",
                  "environmentLabel": "Server",
                  "label": "Instant",
@@ -3196,11 +3235,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toMatchInlineSnapshot(`
                    "Error: Route "/use-cache-revalidate-0/fast": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                    Ways to fix this:
                      - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
+                     - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                      - Use \`generateStaticParams\` to make route params static
                      - Set \`export const instant = false\` to allow a blocking route
 
@@ -3223,11 +3262,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toMatchInlineSnapshot(`
                    "Error: Route "/use-cache-revalidate-0/fast": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                    Ways to fix this:
                      - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
+                     - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                      - Use \`generateStaticParams\` to make route params static
                      - Set \`export const instant = false\` to allow a blocking route
 
@@ -3250,69 +3289,30 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toInclude(
                     `Error: Route "/use-cache-revalidate-0/fast": Next.js encountered uncached or runtime data during the initial render.
 
-\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
 Ways to fix this:
   - Cache the data access with \`"use cache"\`
-  - Move the data access into a child component within a <Suspense> boundary
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
   - Use \`generateStaticParams\` to make route params static
   - Set \`export const instant = false\` to allow a blocking route
 
 Learn more: https://nextjs.org/docs/messages/blocking-route`
                   )
                 } else {
-                  expect(output).toMatchInlineSnapshot(`
-                   "Error: Route "/use-cache-revalidate-0/fast": Next.js encountered uncached or runtime data during the initial render.
-
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                  expect(output).toInclude(
+                    `Error: Route "/use-cache-revalidate-0/fast": Next.js encountered uncached or runtime data during the initial render.
 
-                   Ways to fix this:
-                     - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
-                     - Use \`generateStaticParams\` to make route params static
-                     - Set \`export const instant = false\` to allow a blocking route
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
-                   Learn more: https://nextjs.org/docs/messages/blocking-route
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                       at f (<next-dist-dir>)
-                       at g (<next-dist-dir>)
-                       at h (<next-dist-dir>)
-                       at i (<next-dist-dir>)
-                       at j (<next-dist-dir>)
-                       at k (<next-dist-dir>)
-                       at l (<next-dist-dir>)
-                       at m (<next-dist-dir>)
-                       at n (<next-dist-dir>)
-                       at o (<next-dist-dir>)
-                       at p (<next-dist-dir>)
-                       at q (<next-dist-dir>)
-                       at r (<next-dist-dir>)
-                       at s (<next-dist-dir>)
-                       at t (<next-dist-dir>)
-                       at main (<anonymous>)
-                       at body (<anonymous>)
-                       at html (<anonymous>)
-                       at u (<next-dist-dir>)
-                       at v (<next-dist-dir>)
-                       at w (<next-dist-dir>)
-                       at x (<next-dist-dir>)
-                       at y (<next-dist-dir>)
-                       at z (<next-dist-dir>)
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                   To get a more detailed stack trace and pinpoint the issue, try one of the following:
-                     - Start the app in development mode by running \`next dev\`, then open "/use-cache-revalidate-0/fast" in your browser to investigate the error.
-                     - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
-                   Error occurred prerendering page "/use-cache-revalidate-0/fast". Read more: https://nextjs.org/docs/messages/prerender-error
-                   Export encountered an error on /use-cache-revalidate-0/fast/page: /use-cache-revalidate-0/fast, exiting the build."
-                  `)
+Ways to fix this:
+  - Cache the data access with \`"use cache"\`
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
+  - Use \`generateStaticParams\` to make route params static
+  - Set \`export const instant = false\` to allow a blocking route
+
+Learn more: https://nextjs.org/docs/messages/blocking-route`
+                  )
                 }
               }
             })
@@ -3326,7 +3326,7 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
               await expect(browser).toDisplayCollapsedRedbox(`
                {
-                 "code": "E1166",
+                 "code": "E1221",
                  "description": "Next.js encountered runtime data during the initial render.",
                  "environmentLabel": "Server",
                  "label": "Instant",
@@ -3357,11 +3357,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toMatchInlineSnapshot(`
                    "Error: Route "/use-cache-revalidate-0/slow": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                    Ways to fix this:
                      - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
+                     - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                      - Use \`generateStaticParams\` to make route params static
                      - Set \`export const instant = false\` to allow a blocking route
 
@@ -3384,11 +3384,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toMatchInlineSnapshot(`
                     "Error: Route "/use-cache-revalidate-0/slow": Next.js encountered uncached or runtime data during the initial render.
 
-                    \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                    \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                     Ways to fix this:
                       - Cache the data access with \`"use cache"\`
-                      - Move the data access into a child component within a <Suspense> boundary
+                      - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                       - Use \`generateStaticParams\` to make route params static
                       - Set \`export const instant = false\` to allow a blocking route
 
@@ -3411,69 +3411,30 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   expect(output).toInclude(
                     `Error: Route "/use-cache-revalidate-0/slow": Next.js encountered uncached or runtime data during the initial render.
 
-\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
 Ways to fix this:
   - Cache the data access with \`"use cache"\`
-  - Move the data access into a child component within a <Suspense> boundary
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
   - Use \`generateStaticParams\` to make route params static
   - Set \`export const instant = false\` to allow a blocking route
 
 Learn more: https://nextjs.org/docs/messages/blocking-route`
                   )
                 } else {
-                  expect(output).toMatchInlineSnapshot(`
-                   "Error: Route "/use-cache-revalidate-0/slow": Next.js encountered uncached or runtime data during the initial render.
+                  expect(output).toInclude(
+                    `Error: Route "/use-cache-revalidate-0/slow": Next.js encountered uncached or runtime data during the initial render.
 
-                   \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
-                   Ways to fix this:
-                     - Cache the data access with \`"use cache"\`
-                     - Move the data access into a child component within a <Suspense> boundary
-                     - Use \`generateStaticParams\` to make route params static
-                     - Set \`export const instant = false\` to allow a blocking route
+Ways to fix this:
+  - Cache the data access with \`"use cache"\`
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
+  - Use \`generateStaticParams\` to make route params static
+  - Set \`export const instant = false\` to allow a blocking route
 
-                   Learn more: https://nextjs.org/docs/messages/blocking-route
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                       at f (<next-dist-dir>)
-                       at g (<next-dist-dir>)
-                       at h (<next-dist-dir>)
-                       at i (<next-dist-dir>)
-                       at j (<next-dist-dir>)
-                       at k (<next-dist-dir>)
-                       at l (<next-dist-dir>)
-                       at m (<next-dist-dir>)
-                       at n (<next-dist-dir>)
-                       at o (<next-dist-dir>)
-                       at p (<next-dist-dir>)
-                       at q (<next-dist-dir>)
-                       at r (<next-dist-dir>)
-                       at s (<next-dist-dir>)
-                       at t (<next-dist-dir>)
-                       at main (<anonymous>)
-                       at body (<anonymous>)
-                       at html (<anonymous>)
-                       at u (<next-dist-dir>)
-                       at v (<next-dist-dir>)
-                       at w (<next-dist-dir>)
-                       at x (<next-dist-dir>)
-                       at y (<next-dist-dir>)
-                       at z (<next-dist-dir>)
-                       at a (<next-dist-dir>)
-                       at b (<next-dist-dir>)
-                       at c (<next-dist-dir>)
-                       at d (<next-dist-dir>)
-                       at e (<next-dist-dir>)
-                   To get a more detailed stack trace and pinpoint the issue, try one of the following:
-                     - Start the app in development mode by running \`next dev\`, then open "/use-cache-revalidate-0/slow" in your browser to investigate the error.
-                     - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
-                   Error occurred prerendering page "/use-cache-revalidate-0/slow". Read more: https://nextjs.org/docs/messages/prerender-error
-                   Export encountered an error on /use-cache-revalidate-0/slow/page: /use-cache-revalidate-0/slow, exiting the build."
-                  `)
+Learn more: https://nextjs.org/docs/messages/blocking-route`
+                  )
                 }
               }
             })
@@ -3593,7 +3554,7 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E1166",
+               "code": "E1221",
                "description": "Next.js encountered runtime data during the initial render.",
                "environmentLabel": "Server",
                "label": "Instant",
@@ -3622,11 +3583,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/use-cache-params/[slug]": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -3647,11 +3608,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/use-cache-params/[slug]": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -3675,58 +3636,9 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                   `Error: Route "/use-cache-params/[slug]": Next.js encountered uncached or runtime data during the initial render.`
                 )
               } else {
-                expect(output).toMatchInlineSnapshot(`
-                 "Error: Route "/use-cache-params/[slug]": Next.js encountered uncached or runtime data during the initial render.
-
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
-
-                 Ways to fix this:
-                   - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
-                   - Use \`generateStaticParams\` to make route params static
-                   - Set \`export const instant = false\` to allow a blocking route
-
-                 Learn more: https://nextjs.org/docs/messages/blocking-route
-                     at a (<next-dist-dir>)
-                     at b (<next-dist-dir>)
-                     at c (<next-dist-dir>)
-                     at d (<next-dist-dir>)
-                     at e (<next-dist-dir>)
-                     at f (<next-dist-dir>)
-                     at g (<next-dist-dir>)
-                     at h (<next-dist-dir>)
-                     at i (<next-dist-dir>)
-                     at j (<next-dist-dir>)
-                     at k (<next-dist-dir>)
-                     at l (<next-dist-dir>)
-                     at m (<next-dist-dir>)
-                     at n (<next-dist-dir>)
-                     at o (<next-dist-dir>)
-                     at p (<next-dist-dir>)
-                     at q (<next-dist-dir>)
-                     at r (<next-dist-dir>)
-                     at s (<next-dist-dir>)
-                     at t (<next-dist-dir>)
-                     at main (<anonymous>)
-                     at body (<anonymous>)
-                     at html (<anonymous>)
-                     at u (<next-dist-dir>)
-                     at v (<next-dist-dir>)
-                     at w (<next-dist-dir>)
-                     at x (<next-dist-dir>)
-                     at y (<next-dist-dir>)
-                     at z (<next-dist-dir>)
-                     at a (<next-dist-dir>)
-                     at b (<next-dist-dir>)
-                     at c (<next-dist-dir>)
-                     at d (<next-dist-dir>)
-                     at e (<next-dist-dir>)
-                 To get a more detailed stack trace and pinpoint the issue, try one of the following:
-                   - Start the app in development mode by running \`next dev\`, then open "/use-cache-params/[slug]" in your browser to investigate the error.
-                   - Rerun the production build with \`next build --debug-prerender\` to generate better stack traces.
-                 Error occurred prerendering page "/use-cache-params/[slug]". Read more: https://nextjs.org/docs/messages/prerender-error
-                 Export encountered an error on /use-cache-params/[slug]/page: /use-cache-params/[slug], exiting the build."
-                `)
+                expect(output).toInclude(
+                  `Error: Route "/use-cache-params/[slug]": Next.js encountered uncached or runtime data during the initial render.`
+                )
               }
             }
           })
@@ -4544,7 +4456,7 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E1166",
+               "code": "E1221",
                "description": "Next.js encountered runtime data during the initial render.",
                "environmentLabel": "Server",
                "label": "Instant",
@@ -4576,11 +4488,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/use-cache-private-without-suspense": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -4604,11 +4516,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/use-cache-private-without-suspense": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -4631,11 +4543,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                 expect(output).toInclude(
                   `Error: Route "/use-cache-private-without-suspense": Next.js encountered uncached or runtime data during the initial render.
 
-\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+\`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
 Ways to fix this:
   - Cache the data access with \`"use cache"\`
-  - Move the data access into a child component within a <Suspense> boundary
+  - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
   - Use \`generateStaticParams\` to make route params static
   - Set \`export const instant = false\` to allow a blocking route
 
@@ -4645,11 +4557,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
                 expect(output).toMatchInlineSnapshot(`
                  "Error: Route "/use-cache-private-without-suspense": Next.js encountered uncached or runtime data during the initial render.
 
-                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+                 \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                  Ways to fix this:
                    - Cache the data access with \`"use cache"\`
-                   - Move the data access into a child component within a <Suspense> boundary
+                   - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                    - Use \`generateStaticParams\` to make route params static
                    - Set \`export const instant = false\` to allow a blocking route
 
@@ -4747,10 +4659,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E394",
-             "description": "Route "/sync-io-current-time/date" used \`Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
+             "code": "E1247",
+             "description": "Next.js encountered Date.now() without an explicit rendering intent.",
              "environmentLabel": "Server",
-             "label": "Console Error",
+             "label": "Instant",
              "source": "app/sync-io-current-time/date/page.tsx (19:16) @ DateReadingComponent
            > 19 |   return <div>{Date()}</div>
                 |                ^",
@@ -4777,7 +4689,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isDebugPrerender) {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date" used \`Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date": Next.js encountered \`Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at DateReadingComponent (app/sync-io-current-time/date/page.tsx:19:16)
                    at Page (app/sync-io-current-time/date/page.tsx:11:9)
                  17 | async function DateReadingComponent() {
@@ -4794,7 +4716,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date" used \`Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date": Next.js encountered \`Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at DateReadingComponent (webpack:///app/sync-io-current-time/date/page.tsx:19:16)
                    at Page (webpack:///app/sync-io-current-time/date/page.tsx:11:9)
                  17 | async function DateReadingComponent() {
@@ -4813,7 +4745,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date" used \`Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date": Next.js encountered \`Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at a (app/sync-io-current-time/date/page.tsx:19:16)
                  17 | async function DateReadingComponent() {
                  18 |   await new Promise((r) => process.nextTick(r))
@@ -4829,7 +4771,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date" used \`Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date": Next.js encountered \`Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-current-time/date" in your browser to investigate the error.
@@ -4852,10 +4804,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E394",
-             "description": "Route "/sync-io-current-time/date-now" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
+             "code": "E1247",
+             "description": "Next.js encountered Date.now() without an explicit rendering intent.",
              "environmentLabel": "Server",
-             "label": "Console Error",
+             "label": "Instant",
              "source": "app/sync-io-current-time/date-now/page.tsx (19:21) @ DateReadingComponent
            > 19 |   return <div>{Date.now()}</div>
                 |                     ^",
@@ -4882,7 +4834,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isDebugPrerender) {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date-now" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date-now": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at DateReadingComponent (app/sync-io-current-time/date-now/page.tsx:19:21)
                    at Page (app/sync-io-current-time/date-now/page.tsx:11:9)
                  17 | async function DateReadingComponent() {
@@ -4899,7 +4861,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date-now" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date-now": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at DateReadingComponent (webpack:///app/sync-io-current-time/date-now/page.tsx:19:21)
                    at Page (webpack:///app/sync-io-current-time/date-now/page.tsx:11:9)
                  17 | async function DateReadingComponent() {
@@ -4918,7 +4890,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date-now" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date-now": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at a (app/sync-io-current-time/date-now/page.tsx:19:21)
                  17 | async function DateReadingComponent() {
                  18 |   await new Promise((r) => process.nextTick(r))
@@ -4934,7 +4916,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/date-now" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/date-now": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-current-time/date-now" in your browser to investigate the error.
@@ -4957,10 +4949,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E394",
-             "description": "Route "/sync-io-current-time/new-date" used \`new Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
+             "code": "E1247",
+             "description": "Next.js encountered Date.now() without an explicit rendering intent.",
              "environmentLabel": "Server",
-             "label": "Console Error",
+             "label": "Instant",
              "source": "app/sync-io-current-time/new-date/page.tsx (19:16) @ DateReadingComponent
            > 19 |   return <div>{new Date().toString()}</div>
                 |                ^",
@@ -4987,7 +4979,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isDebugPrerender) {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/new-date" used \`new Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/new-date": Next.js encountered \`new Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at DateReadingComponent (app/sync-io-current-time/new-date/page.tsx:19:16)
                    at Page (app/sync-io-current-time/new-date/page.tsx:11:9)
                  17 | async function DateReadingComponent() {
@@ -5004,7 +5006,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/new-date" used \`new Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/new-date": Next.js encountered \`new Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at DateReadingComponent (webpack:///app/sync-io-current-time/new-date/page.tsx:19:16)
                    at Page (webpack:///app/sync-io-current-time/new-date/page.tsx:11:9)
                  17 | async function DateReadingComponent() {
@@ -5023,7 +5035,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/new-date" used \`new Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/new-date": Next.js encountered \`new Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at a (app/sync-io-current-time/new-date/page.tsx:19:16)
                  17 | async function DateReadingComponent() {
                  18 |   await new Promise((r) => process.nextTick(r))
@@ -5039,7 +5061,17 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-current-time/new-date" used \`new Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
+               "Error: Route "/sync-io-current-time/new-date": Next.js encountered \`new Date()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+                 - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-current-time
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-current-time/new-date" in your browser to investigate the error.
@@ -5062,10 +5094,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E394",
-             "description": "Route "/sync-io-random/math-random" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+             "code": "E1247",
+             "description": "Next.js encountered Math.random() without an explicit rendering intent.",
              "environmentLabel": "Server",
-             "label": "Console Error",
+             "label": "Instant",
              "source": "app/sync-io-random/math-random/page.tsx (19:21) @ SyncIOComponent
            > 19 |   return <div>{Math.random()}</div>
                 |                     ^",
@@ -5092,7 +5124,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isDebugPrerender) {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-random/math-random" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-random/math-random": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-random/math-random/page.tsx:19:21)
                    at Page (app/sync-io-random/math-random/page.tsx:11:9)
                  17 | async function SyncIOComponent() {
@@ -5109,7 +5150,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-random/math-random" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-random/math-random": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-random/math-random/page.tsx:19:21)
                    at Page (webpack:///app/sync-io-random/math-random/page.tsx:11:9)
                  17 | async function SyncIOComponent() {
@@ -5128,7 +5178,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-random/math-random" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-random/math-random": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-random/math-random/page.tsx:19:21)
                  17 | async function SyncIOComponent() {
                  18 |   await new Promise((r) => process.nextTick(r))
@@ -5144,7 +5203,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-random/math-random" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-random/math-random": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-random/math-random" in your browser to investigate the error.
@@ -5167,10 +5235,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E394",
-             "description": "Route "/sync-io-web-crypto/get-random-value" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
+             "code": "E1247",
+             "description": "Next.js encountered crypto.getRandomValues() without an explicit rendering intent.",
              "environmentLabel": "Server",
-             "label": "Console Error",
+             "label": "Instant",
              "source": "app/sync-io-web-crypto/get-random-value/page.tsx (20:10) @ SyncIOComponent
            > 20 |   crypto.getRandomValues(buffer)
                 |          ^",
@@ -5197,7 +5265,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isDebugPrerender) {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/get-random-value" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/get-random-value": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at SyncIOComponent (app/sync-io-web-crypto/get-random-value/page.tsx:20:10)
                    at Page (app/sync-io-web-crypto/get-random-value/page.tsx:11:9)
                  18 |   await new Promise((r) => process.nextTick(r))
@@ -5215,7 +5292,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/get-random-value" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/get-random-value": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at SyncIOComponent (webpack:///app/sync-io-web-crypto/get-random-value/page.tsx:20:10)
                    at Page (webpack:///app/sync-io-web-crypto/get-random-value/page.tsx:11:9)
                  18 |   await new Promise((r) => process.nextTick(r))
@@ -5235,7 +5321,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/get-random-value" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/get-random-value": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at a (app/sync-io-web-crypto/get-random-value/page.tsx:20:10)
                  18 |   await new Promise((r) => process.nextTick(r))
                  19 |   const buffer = new Uint8Array(8)
@@ -5252,7 +5347,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/get-random-value" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/get-random-value": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-web-crypto/get-random-value" in your browser to investigate the error.
@@ -5275,10 +5379,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E394",
-             "description": "Route "/sync-io-web-crypto/random-uuid" used \`crypto.randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
+             "code": "E1247",
+             "description": "Next.js encountered crypto.randomUUID() without an explicit rendering intent.",
              "environmentLabel": "Server",
-             "label": "Console Error",
+             "label": "Instant",
              "source": "app/sync-io-web-crypto/random-uuid/page.tsx (19:23) @ SyncIOComponent
            > 19 |   return <div>{crypto.randomUUID()}</div>
                 |                       ^",
@@ -5305,7 +5409,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isDebugPrerender) {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/random-uuid" used \`crypto.randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/random-uuid": Next.js encountered \`crypto.randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at SyncIOComponent (app/sync-io-web-crypto/random-uuid/page.tsx:19:23)
                    at Page (app/sync-io-web-crypto/random-uuid/page.tsx:11:9)
                  17 | async function SyncIOComponent() {
@@ -5322,7 +5435,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/random-uuid" used \`crypto.randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/random-uuid": Next.js encountered \`crypto.randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at SyncIOComponent (webpack:///app/sync-io-web-crypto/random-uuid/page.tsx:19:23)
                    at Page (webpack:///app/sync-io-web-crypto/random-uuid/page.tsx:11:9)
                  17 | async function SyncIOComponent() {
@@ -5341,7 +5463,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isTurbopack) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/random-uuid" used \`crypto.randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/random-uuid": Next.js encountered \`crypto.randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at a (app/sync-io-web-crypto/random-uuid/page.tsx:19:23)
                  17 | async function SyncIOComponent() {
                  18 |   await new Promise((r) => process.nextTick(r))
@@ -5357,7 +5488,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-web-crypto/random-uuid" used \`crypto.randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-web-crypto/random-uuid": Next.js encountered \`crypto.randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-web-crypto/random-uuid" in your browser to investigate the error.
@@ -5381,10 +5521,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/generate-key-pair-sync" used \`require('node:crypto').generateKeyPairSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').generateKeyPairSync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/generate-key-pair-sync/page.tsx (20:24) @ SyncIOComponent
              > 20 |   const first = crypto.generateKeyPairSync('rsa', keyGenOptions)
                   |                        ^",
@@ -5397,10 +5537,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/generate-key-pair-sync" used \`require('node:crypto').generateKeyPairSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').generateKeyPairSync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/generate-key-pair-sync/page.tsx (20:17) @ SyncIOComponent
              > 20 |   const first = crypto.generateKeyPairSync('rsa', keyGenOptions)
                   |                 ^",
@@ -5428,7 +5568,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync" used \`require('node:crypto').generateKeyPairSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync": Next.js encountered \`require('node:crypto').generateKeyPairSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/generate-key-pair-sync/page.tsx:20:24)
                    at Page (app/sync-io-node-crypto/generate-key-pair-sync/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -5446,7 +5595,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync" used \`require('node:crypto').generateKeyPairSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync": Next.js encountered \`require('node:crypto').generateKeyPairSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/generate-key-pair-sync/page.tsx:20:24)
                  18 | async function SyncIOComponent() {
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -5465,7 +5623,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync" used \`require('node:crypto').generateKeyPairSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync": Next.js encountered \`require('node:crypto').generateKeyPairSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/generate-key-pair-sync/page.tsx:20:17)
                    at Page (webpack:///app/sync-io-node-crypto/generate-key-pair-sync/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -5483,7 +5650,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync" used \`require('node:crypto').generateKeyPairSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-pair-sync": Next.js encountered \`require('node:crypto').generateKeyPairSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/generate-key-pair-sync" in your browser to investigate the error.
@@ -5507,10 +5683,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/generate-key-sync" used \`require('node:crypto').generateKeySync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').generateKeySync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/generate-key-sync/page.tsx (21:6) @ SyncIOComponent
              > 21 |     .generateKeySync('hmac', {
                   |      ^",
@@ -5523,10 +5699,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/generate-key-sync" used \`require('node:crypto').generateKeySync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').generateKeySync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/generate-key-sync/page.tsx (20:17) @ SyncIOComponent
              > 20 |   const first = crypto
                   |                 ^",
@@ -5554,7 +5730,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-sync" used \`require('node:crypto').generateKeySync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-sync": Next.js encountered \`require('node:crypto').generateKeySync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/generate-key-sync/page.tsx:21:6)
                    at Page (app/sync-io-node-crypto/generate-key-sync/page.tsx:12:9)
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -5572,7 +5757,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-sync" used \`require('node:crypto').generateKeySync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-sync": Next.js encountered \`require('node:crypto').generateKeySync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/generate-key-sync/page.tsx:21:6)
                  19 |   await new Promise((r) => process.nextTick(r))
                  20 |   const first = crypto
@@ -5591,7 +5785,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-sync" used \`require('node:crypto').generateKeySync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-sync": Next.js encountered \`require('node:crypto').generateKeySync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/generate-key-sync/page.tsx:20:17)
                    at Page (webpack:///app/sync-io-node-crypto/generate-key-sync/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -5609,7 +5812,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-key-sync" used \`require('node:crypto').generateKeySync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-key-sync": Next.js encountered \`require('node:crypto').generateKeySync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/generate-key-sync" in your browser to investigate the error.
@@ -5633,10 +5845,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/generate-prime-sync" used \`require('node:crypto').generatePrimeSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').generatePrimeSync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/generate-prime-sync/page.tsx (20:39) @ SyncIOComponent
              > 20 |   const first = new Uint8Array(crypto.generatePrimeSync(128))
                   |                                       ^",
@@ -5649,10 +5861,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/generate-prime-sync" used \`require('node:crypto').generatePrimeSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').generatePrimeSync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/generate-prime-sync/page.tsx (20:32) @ SyncIOComponent
              > 20 |   const first = new Uint8Array(crypto.generatePrimeSync(128))
                   |                                ^",
@@ -5680,7 +5892,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-prime-sync" used \`require('node:crypto').generatePrimeSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-prime-sync": Next.js encountered \`require('node:crypto').generatePrimeSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/generate-prime-sync/page.tsx:20:39)
                    at Page (app/sync-io-node-crypto/generate-prime-sync/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -5698,7 +5919,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-prime-sync" used \`require('node:crypto').generatePrimeSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-prime-sync": Next.js encountered \`require('node:crypto').generatePrimeSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/generate-prime-sync/page.tsx:20:39)
                  18 | async function SyncIOComponent() {
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -5717,7 +5947,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-prime-sync" used \`require('node:crypto').generatePrimeSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-prime-sync": Next.js encountered \`require('node:crypto').generatePrimeSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/generate-prime-sync/page.tsx:20:32)
                    at Page (webpack:///app/sync-io-node-crypto/generate-prime-sync/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -5735,7 +5974,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/generate-prime-sync" used \`require('node:crypto').generatePrimeSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/generate-prime-sync": Next.js encountered \`require('node:crypto').generatePrimeSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/generate-prime-sync" in your browser to investigate the error.
@@ -5759,10 +6007,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/get-random-values" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
+               "code": "E1247",
+               "description": "Next.js encountered crypto.getRandomValues() without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/get-random-values/page.tsx (21:10) @ SyncIOComponent
              > 21 |   crypto.getRandomValues(first)
                   |          ^",
@@ -5775,10 +6023,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/get-random-values" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
+               "code": "E1247",
+               "description": "Next.js encountered crypto.getRandomValues() without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/get-random-values/page.tsx (21:3) @ SyncIOComponent
              > 21 |   crypto.getRandomValues(first)
                   |   ^",
@@ -5806,7 +6054,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/get-random-values" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-node-crypto/get-random-values": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at SyncIOComponent (app/sync-io-node-crypto/get-random-values/page.tsx:21:10)
                    at Page (app/sync-io-node-crypto/get-random-values/page.tsx:12:9)
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -5824,7 +6081,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/get-random-values" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-node-crypto/get-random-values": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at a (app/sync-io-node-crypto/get-random-values/page.tsx:21:10)
                  19 |   await new Promise((r) => process.nextTick(r))
                  20 |   const first = new Uint8Array(8)
@@ -5843,7 +6109,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/get-random-values" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-node-crypto/get-random-values": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/get-random-values/page.tsx:21:3)
                    at Page (webpack:///app/sync-io-node-crypto/get-random-values/page.tsx:12:9)
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -5861,7 +6136,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/get-random-values" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
+               "Error: Route "/sync-io-node-crypto/get-random-values": Next.js encountered \`crypto.getRandomValues()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-crypto
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/get-random-values" in your browser to investigate the error.
@@ -5885,10 +6169,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-bytes" used \`require('node:crypto').randomBytes(size)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomBytes(size) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-bytes/page.tsx (20:24) @ SyncIOComponent
              > 20 |   const first = crypto.randomBytes(8)
                   |                        ^",
@@ -5901,10 +6185,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-bytes" used \`require('node:crypto').randomBytes(size)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomBytes(size) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-bytes/page.tsx (20:17) @ SyncIOComponent
              > 20 |   const first = crypto.randomBytes(8)
                   |                 ^",
@@ -5932,7 +6216,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-bytes" used \`require('node:crypto').randomBytes(size)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-bytes": Next.js encountered \`require('node:crypto').randomBytes(size)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/random-bytes/page.tsx:20:24)
                    at Page (app/sync-io-node-crypto/random-bytes/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -5950,7 +6243,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-bytes" used \`require('node:crypto').randomBytes(size)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-bytes": Next.js encountered \`require('node:crypto').randomBytes(size)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/random-bytes/page.tsx:20:24)
                  18 | async function SyncIOComponent() {
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -5969,7 +6271,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-bytes" used \`require('node:crypto').randomBytes(size)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-bytes": Next.js encountered \`require('node:crypto').randomBytes(size)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/random-bytes/page.tsx:20:17)
                    at Page (webpack:///app/sync-io-node-crypto/random-bytes/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -5987,7 +6298,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-bytes" used \`require('node:crypto').randomBytes(size)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-bytes": Next.js encountered \`require('node:crypto').randomBytes(size)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/random-bytes" in your browser to investigate the error.
@@ -6011,10 +6331,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-fill-sync" used \`require('node:crypto').randomFillSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomFillSync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-fill-sync/page.tsx (21:10) @ SyncIOComponent
              > 21 |   crypto.randomFillSync(first, 4, 8)
                   |          ^",
@@ -6027,10 +6347,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-fill-sync" used \`require('node:crypto').randomFillSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomFillSync(...) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-fill-sync/page.tsx (21:3) @ SyncIOComponent
              > 21 |   crypto.randomFillSync(first, 4, 8)
                   |   ^",
@@ -6058,7 +6378,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-fill-sync" used \`require('node:crypto').randomFillSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-fill-sync": Next.js encountered \`require('node:crypto').randomFillSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/random-fill-sync/page.tsx:21:10)
                    at Page (app/sync-io-node-crypto/random-fill-sync/page.tsx:12:9)
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -6076,7 +6405,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-fill-sync" used \`require('node:crypto').randomFillSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-fill-sync": Next.js encountered \`require('node:crypto').randomFillSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/random-fill-sync/page.tsx:21:10)
                  19 |   await new Promise((r) => process.nextTick(r))
                  20 |   const first = new Uint8Array(16)
@@ -6095,7 +6433,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-fill-sync" used \`require('node:crypto').randomFillSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-fill-sync": Next.js encountered \`require('node:crypto').randomFillSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/random-fill-sync/page.tsx:21:3)
                    at Page (webpack:///app/sync-io-node-crypto/random-fill-sync/page.tsx:12:9)
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -6113,7 +6460,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-fill-sync" used \`require('node:crypto').randomFillSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-fill-sync": Next.js encountered \`require('node:crypto').randomFillSync(...)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/random-fill-sync" in your browser to investigate the error.
@@ -6137,10 +6493,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-int-between" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomInt(min, max) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-int-between/page.tsx (20:24) @ SyncIOComponent
              > 20 |   const first = crypto.randomInt(128, 256)
                   |                        ^",
@@ -6153,10 +6509,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-int-between" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomInt(min, max) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-int-between/page.tsx (20:17) @ SyncIOComponent
              > 20 |   const first = crypto.randomInt(128, 256)
                   |                 ^",
@@ -6184,7 +6540,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-between" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-between": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/random-int-between/page.tsx:20:24)
                    at Page (app/sync-io-node-crypto/random-int-between/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -6202,7 +6567,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-between" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-between": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/random-int-between/page.tsx:20:24)
                  18 | async function SyncIOComponent() {
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -6221,7 +6595,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-between" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-between": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/random-int-between/page.tsx:20:17)
                    at Page (webpack:///app/sync-io-node-crypto/random-int-between/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -6239,7 +6622,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-between" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-between": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/random-int-between" in your browser to investigate the error.
@@ -6263,10 +6655,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-int-up-to" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomInt(min, max) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-int-up-to/page.tsx (20:24) @ SyncIOComponent
              > 20 |   const first = crypto.randomInt(128)
                   |                        ^",
@@ -6279,10 +6671,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-int-up-to" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomInt(min, max) without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-int-up-to/page.tsx (20:17) @ SyncIOComponent
              > 20 |   const first = crypto.randomInt(128)
                   |                 ^",
@@ -6310,7 +6702,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-up-to" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-up-to": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/random-int-up-to/page.tsx:20:24)
                    at Page (app/sync-io-node-crypto/random-int-up-to/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -6328,7 +6729,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-up-to" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-up-to": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/random-int-up-to/page.tsx:20:24)
                  18 | async function SyncIOComponent() {
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -6347,7 +6757,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-up-to" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-up-to": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/random-int-up-to/page.tsx:20:17)
                    at Page (webpack:///app/sync-io-node-crypto/random-int-up-to/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -6365,7 +6784,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-int-up-to" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-int-up-to": Next.js encountered \`require('node:crypto').randomInt(min, max)\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/random-int-up-to" in your browser to investigate the error.
@@ -6389,10 +6817,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-uuid" used \`require('node:crypto').randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomUUID() without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-uuid/page.tsx (20:24) @ SyncIOComponent
              > 20 |   const first = crypto.randomUUID()
                   |                        ^",
@@ -6405,10 +6833,10 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             await expect(browser).toDisplayCollapsedRedbox(`
              {
-               "code": "E394",
-               "description": "Route "/sync-io-node-crypto/random-uuid" used \`require('node:crypto').randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+               "code": "E1247",
+               "description": "Next.js encountered require('node:crypto').randomUUID() without an explicit rendering intent.",
                "environmentLabel": "Server",
-               "label": "Console Error",
+               "label": "Instant",
                "source": "app/sync-io-node-crypto/random-uuid/page.tsx (20:17) @ SyncIOComponent
              > 20 |   const first = crypto.randomUUID()
                   |                 ^",
@@ -6436,7 +6864,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           if (isTurbopack) {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-uuid" used \`require('node:crypto').randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-uuid": Next.js encountered \`require('node:crypto').randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (app/sync-io-node-crypto/random-uuid/page.tsx:20:24)
                    at Page (app/sync-io-node-crypto/random-uuid/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -6454,7 +6891,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-uuid" used \`require('node:crypto').randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-uuid": Next.js encountered \`require('node:crypto').randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (app/sync-io-node-crypto/random-uuid/page.tsx:20:24)
                  18 | async function SyncIOComponent() {
                  19 |   await new Promise((r) => process.nextTick(r))
@@ -6473,7 +6919,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
           } else {
             if (isDebugPrerender) {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-uuid" used \`require('node:crypto').randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-uuid": Next.js encountered \`require('node:crypto').randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at SyncIOComponent (webpack:///app/sync-io-node-crypto/random-uuid/page.tsx:20:17)
                    at Page (webpack:///app/sync-io-node-crypto/random-uuid/page.tsx:12:9)
                  18 | async function SyncIOComponent() {
@@ -6491,7 +6946,16 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               `)
             } else {
               expect(output).toMatchInlineSnapshot(`
-               "Error: Route "/sync-io-node-crypto/random-uuid" used \`require('node:crypto').randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+               "Error: Route "/sync-io-node-crypto/random-uuid": Next.js encountered \`require('node:crypto').randomUUID()\` without an explicit rendering intent.
+
+               This value can change between renders, so it must be either prerendered or computed later.
+
+               Ways to fix this:
+                 - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+                 - Prerender and cache the value with \`"use cache"\`
+                 - Render the value on the client with \`"use client"\`
+
+               Learn more: https://nextjs.org/docs/messages/next-prerender-random
                    at a (<next-dist-dir>)
                To get a more detailed stack trace and pinpoint the issue, try one of the following:
                  - Start the app in development mode by running \`next dev\`, then open "/sync-io-node-crypto/random-uuid" in your browser to investigate the error.
@@ -6514,7 +6978,7 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
 
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -6546,11 +7010,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/client-awaited-io": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -6574,11 +7038,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/client-awaited-io": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -6605,11 +7069,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/client-awaited-io": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
@@ -6633,11 +7097,11 @@ Learn more: https://nextjs.org/docs/messages/blocking-route`
               expect(output).toMatchInlineSnapshot(`
                "Error: Route "/client-awaited-io": Next.js encountered uncached or runtime data during the initial render.
 
-               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+               \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
                Ways to fix this:
                  - Cache the data access with \`"use cache"\`
-                 - Move the data access into a child component within a <Suspense> boundary
+                 - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
                  - Use \`generateStaticParams\` to make route params static
                  - Set \`export const instant = false\` to allow a blocking route
 
diff --git a/test/e2e/app-dir/instant-validation-build/instant-validation-build.test.ts b/test/e2e/app-dir/instant-validation-build/instant-validation-build.test.ts
index 35097dbd3313..b776555f0046 100644
--- a/test/e2e/app-dir/instant-validation-build/instant-validation-build.test.ts
+++ b/test/e2e/app-dir/instant-validation-build/instant-validation-build.test.ts
@@ -65,11 +65,11 @@ describe('instant-validation-build', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/invalid-missing-suspense-around-runtime": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
diff --git a/test/e2e/app-dir/instant-validation-causes/instant-validation-causes.test.ts b/test/e2e/app-dir/instant-validation-causes/instant-validation-causes.test.ts
index 3abb242117d9..d79b24574e98 100644
--- a/test/e2e/app-dir/instant-validation-causes/instant-validation-causes.test.ts
+++ b/test/e2e/app-dir/instant-validation-causes/instant-validation-causes.test.ts
@@ -105,7 +105,7 @@ describe('instant validation causes', () => {
            ],
          },
        ],
-       "code": "E1166",
+       "code": "E1221",
        "description": "Next.js encountered runtime data during the initial render.",
        "environmentLabel": "Server",
        "label": "Instant",
@@ -136,7 +136,7 @@ describe('instant validation causes', () => {
            ],
          },
        ],
-       "code": "E1166",
+       "code": "E1221",
        "description": "Next.js encountered runtime data during the initial render.",
        "environmentLabel": "Server",
        "label": "Instant",
@@ -167,7 +167,7 @@ describe('instant validation causes', () => {
            ],
          },
        ],
-       "code": "E1166",
+       "code": "E1221",
        "description": "Next.js encountered runtime data during the initial render.",
        "environmentLabel": "Server",
        "label": "Instant",
@@ -201,7 +201,7 @@ describe('instant validation causes', () => {
            ],
          },
        ],
-       "code": "E1166",
+       "code": "E1221",
        "description": "Next.js encountered runtime data during the initial render.",
        "environmentLabel": "Server",
        "label": "Instant",
diff --git a/test/e2e/app-dir/instant-validation-level-error/instant-validation-level-error.test.ts b/test/e2e/app-dir/instant-validation-level-error/instant-validation-level-error.test.ts
index 6efb0cc335a7..84417eae91f7 100644
--- a/test/e2e/app-dir/instant-validation-level-error/instant-validation-level-error.test.ts
+++ b/test/e2e/app-dir/instant-validation-level-error/instant-validation-level-error.test.ts
@@ -60,7 +60,7 @@ describe('instant validation - level error', () => {
         const browser = await next.browser('/bare')
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -90,7 +90,7 @@ describe('instant validation - level error', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -120,7 +120,7 @@ describe('instant validation - level error', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -150,7 +150,7 @@ describe('instant validation - level error', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -177,7 +177,7 @@ describe('instant validation - level error', () => {
         const browser = await next.browser('/layered')
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -199,11 +199,11 @@ describe('instant validation - level error', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/bare": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -225,11 +225,11 @@ describe('instant validation - level error', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/explicit-error": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -251,11 +251,11 @@ describe('instant validation - level error', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/explicit-true": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -290,11 +290,11 @@ describe('instant validation - level error', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/layered": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
diff --git a/test/e2e/app-dir/instant-validation-level-manual-error/instant-validation-level-manual-error.test.ts b/test/e2e/app-dir/instant-validation-level-manual-error/instant-validation-level-manual-error.test.ts
index 3009736fffdb..1b78c6d380b2 100644
--- a/test/e2e/app-dir/instant-validation-level-manual-error/instant-validation-level-manual-error.test.ts
+++ b/test/e2e/app-dir/instant-validation-level-manual-error/instant-validation-level-manual-error.test.ts
@@ -79,7 +79,7 @@ describe('instant validation - level manual-error', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -109,7 +109,7 @@ describe('instant validation - level manual-error', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -139,7 +139,7 @@ describe('instant validation - level manual-error', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -182,11 +182,11 @@ describe('instant validation - level manual-error', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/explicit-error": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -208,11 +208,11 @@ describe('instant validation - level manual-error', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/explicit-true": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
diff --git a/test/e2e/app-dir/instant-validation-level-manual-warning/instant-validation-level-manual-warning.test.ts b/test/e2e/app-dir/instant-validation-level-manual-warning/instant-validation-level-manual-warning.test.ts
index 09477970b986..3f0e9e88a20f 100644
--- a/test/e2e/app-dir/instant-validation-level-manual-warning/instant-validation-level-manual-warning.test.ts
+++ b/test/e2e/app-dir/instant-validation-level-manual-warning/instant-validation-level-manual-warning.test.ts
@@ -93,7 +93,7 @@ describe('instant validation - level manual-warning', () => {
                  ],
                },
              ],
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -125,7 +125,7 @@ describe('instant validation - level manual-warning', () => {
                  ],
                },
              ],
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -157,7 +157,7 @@ describe('instant validation - level manual-warning', () => {
                  ],
                },
              ],
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -194,11 +194,11 @@ describe('instant validation - level manual-warning', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/with-root-suspense/explicit-error": Next.js encountered uncached data during the initial render.
 
-           \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
              - Cache the data access with \`"use cache"\`
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Set \`export const instant = false\` to allow a blocking route
 
            Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -229,7 +229,7 @@ describe('instant validation - level manual-warning', () => {
           // did not run under 'manual-warning'.
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -249,7 +249,7 @@ describe('instant validation - level manual-warning', () => {
           )
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -269,7 +269,7 @@ describe('instant validation - level manual-warning', () => {
           )
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -289,7 +289,7 @@ describe('instant validation - level manual-warning', () => {
           )
           await expect(browser).toDisplayCollapsedRedbox(`
            {
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -332,11 +332,11 @@ describe('instant validation - level manual-warning', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/without-root-suspense/bare": Next.js encountered uncached or runtime data during the initial render.
 
-           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
              - Cache the data access with \`"use cache"\`
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -358,11 +358,11 @@ describe('instant validation - level manual-warning', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/without-root-suspense/explicit-true": Next.js encountered uncached or runtime data during the initial render.
 
-           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
              - Cache the data access with \`"use cache"\`
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -386,11 +386,11 @@ describe('instant validation - level manual-warning', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/without-root-suspense/explicit-warning": Next.js encountered uncached or runtime data during the initial render.
 
-           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
              - Cache the data access with \`"use cache"\`
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -418,11 +418,11 @@ describe('instant validation - level manual-warning', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/without-root-suspense/explicit-error": Next.js encountered uncached or runtime data during the initial render.
 
-           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`fetch(...)\`, \`cookies()\`, \`headers()\`, \`params\`, \`searchParams\`, or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
              - Cache the data access with \`"use cache"\`
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
diff --git a/test/e2e/app-dir/instant-validation-level-warning/instant-validation-level-warning.test.ts b/test/e2e/app-dir/instant-validation-level-warning/instant-validation-level-warning.test.ts
index c837d42b1def..f5cbb87854cf 100644
--- a/test/e2e/app-dir/instant-validation-level-warning/instant-validation-level-warning.test.ts
+++ b/test/e2e/app-dir/instant-validation-level-warning/instant-validation-level-warning.test.ts
@@ -60,7 +60,7 @@ describe('instant validation - level warning', () => {
         const browser = await next.browser('/bare')
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -90,7 +90,7 @@ describe('instant validation - level warning', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -120,7 +120,7 @@ describe('instant validation - level warning', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -150,7 +150,7 @@ describe('instant validation - level warning', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -177,7 +177,7 @@ describe('instant validation - level warning', () => {
         const browser = await next.browser('/layered')
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -204,11 +204,11 @@ describe('instant validation - level warning', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/explicit-error": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
diff --git a/test/e2e/app-dir/instant-validation-static-shells/instant-validation-static-shells.test.ts b/test/e2e/app-dir/instant-validation-static-shells/instant-validation-static-shells.test.ts
index 24018ccf3b7b..98eb6665f65f 100644
--- a/test/e2e/app-dir/instant-validation-static-shells/instant-validation-static-shells.test.ts
+++ b/test/e2e/app-dir/instant-validation-static-shells/instant-validation-static-shells.test.ts
@@ -45,7 +45,7 @@ describe('instant validation', () => {
         await browser.elementByCss('main')
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
diff --git a/test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts b/test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts
index 940e48a490f7..bd8e8cb95165 100644
--- a/test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts
+++ b/test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts
@@ -124,7 +124,7 @@ describe('instant validation - parallel slot configs', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -144,10 +144,10 @@ describe('instant validation - parallel slot configs', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/parallel/slot-config-only": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -184,7 +184,7 @@ describe('instant validation - parallel slot configs', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -204,10 +204,10 @@ describe('instant validation - parallel slot configs', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/parallel/slot-layout-config": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -244,7 +244,7 @@ describe('instant validation - parallel slot configs', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -264,10 +264,10 @@ describe('instant validation - parallel slot configs', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/parallel/slot-runtime-config": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -306,7 +306,7 @@ describe('instant validation - parallel slot configs', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -326,10 +326,10 @@ describe('instant validation - parallel slot configs', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/parallel/children-config-with-slot": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -368,7 +368,7 @@ describe('instant validation - parallel slot configs', () => {
                    ],
                  },
                ],
-               "code": "E1166",
+               "code": "E1221",
                "description": "Next.js encountered runtime data during the initial render.",
                "environmentLabel": "Server",
                "label": "Instant",
@@ -392,7 +392,7 @@ describe('instant validation - parallel slot configs', () => {
                    ],
                  },
                ],
-               "code": "E1166",
+               "code": "E1221",
                "description": "Next.js encountered runtime data during the initial render.",
                "environmentLabel": "Server",
                "label": "Instant",
@@ -413,10 +413,10 @@ describe('instant validation - parallel slot configs', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/parallel/fork-layout-config-with-slot": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -427,10 +427,10 @@ describe('instant validation - parallel slot configs', () => {
                at a (<anonymous>)
            Error: Route "/suspense-in-root/parallel/fork-layout-config-with-slot": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -535,7 +535,7 @@ describe('instant validation - parallel slot configs', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -553,10 +553,10 @@ describe('instant validation - parallel slot configs', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-both/blocked": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -629,7 +629,7 @@ describe('instant validation - parallel slot configs', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -647,10 +647,10 @@ describe('instant validation - parallel slot configs', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/blocked": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
diff --git a/test/e2e/app-dir/instant-validation/instant-validation.test.ts b/test/e2e/app-dir/instant-validation/instant-validation.test.ts
index 2b8af700ee14..17ad0f77d8a2 100644
--- a/test/e2e/app-dir/instant-validation/instant-validation.test.ts
+++ b/test/e2e/app-dir/instant-validation/instant-validation.test.ts
@@ -180,7 +180,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1166",
+           "code": "E1221",
            "description": "Next.js encountered runtime data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -200,10 +200,10 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/static/missing-suspense-around-runtime": Next.js encountered runtime data during the initial render.
 
-         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Use \`generateStaticParams\` to make route params static
            - Set \`export const instant = false\` to allow a blocking route
 
@@ -240,7 +240,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -260,11 +260,11 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/static/missing-suspense-around-dynamic": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -300,7 +300,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -321,11 +321,11 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/runtime/missing-suspense-around-dynamic": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -363,7 +363,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1166",
+           "code": "E1221",
            "description": "Next.js encountered runtime data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -383,10 +383,10 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/static/missing-suspense-around-dynamic-layout": Next.js encountered runtime data during the initial render.
 
-         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Use \`generateStaticParams\` to make route params static
            - Set \`export const instant = false\` to allow a blocking route
 
@@ -423,7 +423,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -443,11 +443,11 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/runtime/missing-suspense-around-dynamic-layout": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -486,7 +486,7 @@ describe('instant validation', () => {
              ],
            },
          ],
-         "code": "E1166",
+         "code": "E1221",
          "description": "Next.js encountered runtime data during the initial render.",
          "environmentLabel": "Server",
          "label": "Instant",
@@ -534,7 +534,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1166",
+           "code": "E1221",
            "description": "Next.js encountered runtime data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -554,10 +554,10 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/static/missing-suspense-around-search-params": Next.js encountered runtime data during the initial render.
 
-         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Use \`generateStaticParams\` to make route params static
            - Set \`export const instant = false\` to allow a blocking route
 
@@ -629,7 +629,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1166",
+           "code": "E1221",
            "description": "Next.js encountered runtime data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -649,10 +649,10 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/static/suspense-too-high": Next.js encountered runtime data during the initial render.
 
-         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Use \`generateStaticParams\` to make route params static
            - Set \`export const instant = false\` to allow a blocking route
 
@@ -692,7 +692,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -713,11 +713,11 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/runtime/suspense-too-high": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -744,10 +744,10 @@ describe('instant validation', () => {
         )
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E394",
-           "description": "Route "/suspense-in-root/runtime/invalid-sync-io" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time",
+           "code": "E1247",
+           "description": "Next.js encountered Date.now() without an explicit rendering intent.",
            "environmentLabel": "Server",
-           "label": "Console Error",
+           "label": "Instant",
            "source": "app/suspense-in-root/runtime/invalid-sync-io/page.tsx (8:20) @ Page
          >  8 |   const now = Date.now()
               |                    ^",
@@ -763,7 +763,17 @@ describe('instant validation', () => {
         )
         expect(extractBuildValidationError(result.cliOutput))
           .toMatchInlineSnapshot(`
-         "Error: Route "/suspense-in-root/runtime/invalid-sync-io" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         "Error: Route "/suspense-in-root/runtime/invalid-sync-io": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at a (app/suspense-in-root/runtime/invalid-sync-io/page.tsx:8:20)
             6 | export default async function Page() {
             7 |   await cookies()
@@ -772,7 +782,17 @@ describe('instant validation', () => {
             9 |   return (
            10 |     <main>
            11 |       <p>This page uses sync IO after awaiting cookies(): {now}</p>
-         Error: Route "/suspense-in-root/runtime/invalid-sync-io" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         Error: Route "/suspense-in-root/runtime/invalid-sync-io": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at b (app/suspense-in-root/runtime/invalid-sync-io/page.tsx:8:20)
             6 | export default async function Page() {
             7 |   await cookies()
@@ -802,10 +822,10 @@ describe('instant validation', () => {
         )
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E394",
-           "description": "Route "/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time",
+           "code": "E1247",
+           "description": "Next.js encountered Date.now() without an explicit rendering intent.",
            "environmentLabel": "Server",
-           "label": "Console Error",
+           "label": "Instant",
            "source": "app/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent/page.tsx (12:20) @ Page
          > 12 |   const now = Date.now()
               |                    ^",
@@ -821,7 +841,17 @@ describe('instant validation', () => {
         )
         expect(extractBuildValidationError(result.cliOutput))
           .toMatchInlineSnapshot(`
-         "Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         "Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at a (app/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent/page.tsx:12:20)
            10 | export default async function Page() {
            11 |   await cookies()
@@ -830,7 +860,17 @@ describe('instant validation', () => {
            13 |   return (
            14 |     <main>
            15 |       <p>Runtime page with sync IO after cookies: {now}</p>
-         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at b (app/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent/page.tsx:12:20)
            10 | export default async function Page() {
            11 |   await cookies()
@@ -839,7 +879,17 @@ describe('instant validation', () => {
            13 |   return (
            14 |     <main>
            15 |       <p>Runtime page with sync IO after cookies: {now}</p>
-         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at c (app/suspense-in-root/runtime/invalid-sync-io-in-runtime-with-valid-static-parent/page.tsx:12:20)
            10 | export default async function Page() {
            11 |   await cookies()
@@ -875,10 +925,10 @@ describe('instant validation', () => {
         )
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E394",
-           "description": "Route "/suspense-in-root/runtime/invalid-sync-io-after-cache-with-cookie-input" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time",
+           "code": "E1247",
+           "description": "Next.js encountered Date.now() without an explicit rendering intent.",
            "environmentLabel": "Server",
-           "label": "Console Error",
+           "label": "Instant",
            "source": "app/suspense-in-root/runtime/invalid-sync-io-after-cache-with-cookie-input/page.tsx (28:20) @ Page
          > 28 |   const now = Date.now()
               |                    ^",
@@ -943,10 +993,10 @@ describe('instant validation', () => {
         )
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E394",
-           "description": "Route "/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time",
+           "code": "E1247",
+           "description": "Next.js encountered Date.now() without an explicit rendering intent.",
            "environmentLabel": "Server",
-           "label": "Console Error",
+           "label": "Instant",
            "source": "app/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata/page.tsx (9:20) @ Module.generateMetadata
          >  9 |   const now = Date.now()
               |                    ^",
@@ -962,7 +1012,17 @@ describe('instant validation', () => {
         )
         expect(extractBuildValidationError(result.cliOutput))
           .toMatchInlineSnapshot(`
-         "Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         "Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at Module.e [as generateMetadata] (app/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata/page.tsx:9:20)
             7 | export async function generateMetadata() {
             8 |   await cookies()
@@ -971,7 +1031,17 @@ describe('instant validation', () => {
            10 |   return {
            11 |     title: \`Sync IO in metadata: \${now}\`,
            12 |   }
-         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at Module.e [as generateMetadata] (app/suspense-in-root/runtime/invalid-sync-io-in-generate-metadata/page.tsx:9:20)
             7 | export async function generateMetadata() {
             8 |   await cookies()
@@ -1019,10 +1089,10 @@ describe('instant validation', () => {
         )
         await expect(browser).toDisplayCollapsedRedbox(`
          {
-           "code": "E394",
-           "description": "Route "/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time",
+           "code": "E1247",
+           "description": "Next.js encountered Date.now() without an explicit rendering intent.",
            "environmentLabel": "Server",
-           "label": "Console Error",
+           "label": "Instant",
            "source": "app/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata/layout.tsx (11:20) @ Module.generateMetadata
          > 11 |   const now = Date.now()
               |                    ^",
@@ -1038,7 +1108,17 @@ describe('instant validation', () => {
         )
         expect(extractBuildValidationError(result.cliOutput))
           .toMatchInlineSnapshot(`
-         "Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         "Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at Module.d [as generateMetadata] (app/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata/layout.tsx:11:20)
             9 | export async function generateMetadata() {
            10 |   await cookies()
@@ -1047,7 +1127,17 @@ describe('instant validation', () => {
            12 |   return {
            13 |     title: \`Layout metadata with sync IO: \${now}\`,
            14 |   }
-         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at Module.d [as generateMetadata] (app/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata/layout.tsx:11:20)
             9 | export async function generateMetadata() {
            10 |   await cookies()
@@ -1056,7 +1146,17 @@ describe('instant validation', () => {
            12 |   return {
            13 |     title: \`Layout metadata with sync IO: \${now}\`,
            14 |   }
-         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or awaiting \`connection()\`. When configured for Runtime prefetching, accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
+         Error: Route "/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata": Next.js encountered \`Date.now()\` without an explicit rendering intent.
+
+         This value can change between renders, so it must be either prerendered or computed later.
+
+         Ways to fix this:
+           - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+           - Prerender and cache the value with \`"use cache"\`
+           - Render the value on the client with \`"use client"\`
+           - Measure elapsed time with \`performance.now()\` instead of \`Date.now()\`
+
+         Learn more: https://nextjs.org/docs/messages/next-prerender-runtime-current-time
              at Module.d [as generateMetadata] (app/suspense-in-root/runtime/invalid-sync-io-in-layout-generate-metadata/layout.tsx:11:20)
             9 | export async function generateMetadata() {
            10 |   await cookies()
@@ -1131,7 +1231,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -1152,11 +1252,11 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/static/invalid-loading-above-route-group": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -1195,7 +1295,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1164",
+           "code": "E1220",
            "description": "Next.js encountered uncached data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -1216,11 +1316,11 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/static/invalid-dynamic-layout-with-loading": Next.js encountered uncached data during the initial render.
 
-         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
            - Cache the data access with \`"use cache"\`
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Set \`export const instant = false\` to allow a blocking route
 
          Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -1272,7 +1372,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -1292,10 +1392,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/blocking-layout/missing-suspense-around-dynamic": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -1360,7 +1460,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -1380,10 +1480,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/invalid-blocking-inside-static": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -1421,7 +1521,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -1441,11 +1541,11 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/runtime/invalid-blocking-inside-runtime": Next.js encountered uncached data during the initial render.
 
-           \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
              - Cache the data access with \`"use cache"\`
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Set \`export const instant = false\` to allow a blocking route
 
            Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -1485,7 +1585,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -1505,10 +1605,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/missing-suspense-in-parallel-route": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -1547,7 +1647,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -1567,10 +1667,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/missing-suspense-in-parallel-route/foo": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -1609,7 +1709,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -1629,10 +1729,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/missing-suspense-in-parallel-route/bar": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2262,24 +2362,10 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1165",
-             "description": "Runtime data was accessed inside generateViewport()
-
-           Viewport metadata needs to be available on page load so accessing data that comes from a user Request while producing it prevents Next.js from prerendering an initial UI.cookies(), headers(), params, and searchParams are examples of Runtime data that can only come from a user request.
-
-           To fix this:
-
-           Remove the Runtime data requirement from generateViewport. This allows Next.js to statically prerender generateViewport() as part of the HTML document, so it's instantly visible to the user.
-
-           or
-
-           Put a <Suspense> around your document <body>.This indicate to Next.js that you are opting into allowing blocking navigations for any page.
-
-           params are usually considered Runtime data but if all params are provided a value using generateStaticParams they can be statically prerendered.
-
-           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+             "code": "E1208",
+             "description": "Next.js encountered runtime data in generateViewport().",
              "environmentLabel": "Server",
-             "label": "Blocking Route",
+             "label": "Instant",
              "source": "app/suspense-in-root/head/invalid-runtime-viewport-in-static/page.tsx (11:16) @ Module.generateViewport
            > 11 |   await cookies()
                 |                ^",
@@ -2294,7 +2380,16 @@ describe('instant validation', () => {
           )
           expect(extractBuildValidationError(result.cliOutput))
             .toMatchInlineSnapshot(`
-           "Error: Route "/suspense-in-root/head/invalid-runtime-viewport-in-static": Next.js encountered runtime data such as \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` inside \`generateViewport\`. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
+           "Error: Route "/suspense-in-root/head/invalid-runtime-viewport-in-static": Next.js encountered runtime data in \`generateViewport()\`.
+
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` in \`generateViewport()\` prevents the page from being prerendered, leading to a slower user experience.
+
+           Ways to fix this:
+             - Use a static viewport export instead of \`generateViewport()\`
+             - Wrap your document \`<body>\` in \`<Suspense>\`
+             - Set \`export const instant = false\` to allow a blocking route
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
                at ignore-listed frames
            Build-time instant validation failed for route "/suspense-in-root/head/invalid-runtime-viewport-in-static".
            To get a more detailed stack trace and pinpoint the issue, try one of the following:
@@ -2327,22 +2422,10 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1167",
-             "description": "Data that blocks navigation was accessed inside generateViewport()
-
-           Viewport metadata needs to be available on page load so accessing data that waits for a user navigation while producing it prevents Next.js from prerendering an initial UI. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.
-
-           To fix this:
-
-           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender generateViewport() as part of the HTML document, so it's instantly visible to the user.
-
-           or
-
-           Put a <Suspense> around your document <body>.This indicate to Next.js that you are opting into allowing blocking navigations for any page.
-
-           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+             "code": "E1210",
+             "description": "Next.js encountered uncached data in generateViewport().",
              "environmentLabel": "Server",
-             "label": "Blocking Route",
+             "label": "Instant",
              "source": "app/suspense-in-root/head/invalid-dynamic-viewport-in-runtime/page.tsx (11:19) @ Module.generateViewport
            > 11 |   await connection()
                 |                   ^",
@@ -2357,7 +2440,16 @@ describe('instant validation', () => {
           )
           expect(extractBuildValidationError(result.cliOutput))
             .toMatchInlineSnapshot(`
-           "Error: Route "/suspense-in-root/head/invalid-dynamic-viewport-in-runtime": Next.js encountered uncached data such as \`fetch(...)\` or \`connection()\` inside \`generateViewport\`. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
+           "Error: Route "/suspense-in-root/head/invalid-dynamic-viewport-in-runtime": Next.js encountered uncached data in \`generateViewport()\`.
+
+           \`fetch(...)\` or \`connection()\` in \`generateViewport()\` prevents the page from being prerendered, leading to a slower user experience.
+
+           Ways to fix this:
+             - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`
+             - Wrap your document \`<body>\` in \`<Suspense>\`
+             - Set \`export const instant = false\` to allow a blocking route
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
                at ignore-listed frames
            Build-time instant validation failed for route "/suspense-in-root/head/invalid-dynamic-viewport-in-runtime".
            To get a more detailed stack trace and pinpoint the issue, try one of the following:
@@ -2428,22 +2520,10 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1167",
-             "description": "Data that blocks navigation was accessed inside generateViewport()
-
-           Viewport metadata needs to be available on page load so accessing data that waits for a user navigation while producing it prevents Next.js from prerendering an initial UI. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.
-
-           To fix this:
-
-           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender generateViewport() as part of the HTML document, so it's instantly visible to the user.
-
-           or
-
-           Put a <Suspense> around your document <body>.This indicate to Next.js that you are opting into allowing blocking navigations for any page.
-
-           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport",
+             "code": "E1210",
+             "description": "Next.js encountered uncached data in generateViewport().",
              "environmentLabel": "Server",
-             "label": "Blocking Route",
+             "label": "Instant",
              "source": "app/suspense-in-root/head/invalid-dynamic-viewport-in-blocking-inside-static/page.tsx (6:23) @ Module.generateViewport
            > 6 | export async function generateViewport(): Promise<Viewport> {
                |                       ^",
@@ -2458,7 +2538,16 @@ describe('instant validation', () => {
           )
           expect(extractBuildValidationError(result.cliOutput))
             .toMatchInlineSnapshot(`
-           "Error: Route "/suspense-in-root/head/invalid-dynamic-viewport-in-blocking-inside-static": Next.js encountered uncached data such as \`fetch(...)\` or \`connection()\` inside \`generateViewport\`. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
+           "Error: Route "/suspense-in-root/head/invalid-dynamic-viewport-in-blocking-inside-static": Next.js encountered uncached data in \`generateViewport()\`.
+
+           \`fetch(...)\` or \`connection()\` in \`generateViewport()\` prevents the page from being prerendered, leading to a slower user experience.
+
+           Ways to fix this:
+             - Cache the viewport data with \`"use cache"\` in \`generateViewport()\`
+             - Wrap your document \`<body>\` in \`<Suspense>\`
+             - Set \`export const instant = false\` to allow a blocking route
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-viewport
                at ignore-listed frames
            Build-time instant validation failed for route "/suspense-in-root/head/invalid-dynamic-viewport-in-blocking-inside-static".
            To get a more detailed stack trace and pinpoint the issue, try one of the following:
@@ -2491,7 +2580,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2511,10 +2600,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/route-group-config-only": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2552,7 +2641,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2572,10 +2661,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/route-group-config-and-segment-config": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2614,7 +2703,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2634,10 +2723,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/route-group-segment-config-only": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2676,7 +2765,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2696,10 +2785,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/route-group-config-with-deeper-segment/inner": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2738,7 +2827,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2758,10 +2847,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/route-group-deeper-segment-config/inner": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2807,7 +2896,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2827,10 +2916,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/route-group-shared-boundary": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2883,7 +2972,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2903,10 +2992,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/parallel-group-depths-deep-slot-hole": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -2953,7 +3042,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -2973,10 +3062,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/parallel-group-depths-shallow-slot-hole": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -3024,7 +3113,7 @@ describe('instant validation', () => {
                ],
              },
            ],
-           "code": "E1166",
+           "code": "E1221",
            "description": "Next.js encountered runtime data during the initial render.",
            "environmentLabel": "Server",
            "label": "Instant",
@@ -3044,10 +3133,10 @@ describe('instant validation', () => {
           .toMatchInlineSnapshot(`
          "Error: Route "/suspense-in-root/runtime/static-layout-above-runtime-config/inner": Next.js encountered runtime data during the initial render.
 
-         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+         \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
          Ways to fix this:
-           - Move the data access into a child component within a <Suspense> boundary
+           - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
            - Use \`generateStaticParams\` to make route params static
            - Set \`export const instant = false\` to allow a blocking route
 
@@ -3092,7 +3181,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -3143,7 +3232,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -3163,10 +3252,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/config-depth-preference-slot-wins/deeper/[...rest]": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -3207,7 +3296,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -3227,10 +3316,10 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/static/config-children-preferred": Next.js encountered runtime data during the initial render.
 
-           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`cookies()\`, \`headers()\`, \`params\`, or \`searchParams\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Use \`generateStaticParams\` to make route params static
              - Set \`export const instant = false\` to allow a blocking route
 
@@ -3272,7 +3361,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1166",
+             "code": "E1221",
              "description": "Next.js encountered runtime data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
@@ -3410,11 +3499,11 @@ describe('instant validation', () => {
             .toMatchInlineSnapshot(`
            "Error: Route "/suspense-in-root/disable-validation/disable-dev": Next.js encountered uncached data during the initial render.
 
-           \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` blocks navigation, leading to a slower user experience.
+           \`fetch(...)\` or \`connection()\` accessed outside of \`<Suspense>\` prevents the route from being prerendered, blocking navigation and leading to a slower user experience.
 
            Ways to fix this:
              - Cache the data access with \`"use cache"\`
-             - Move the data access into a child component within a <Suspense> boundary
+             - Provide a placeholder with \`<Suspense fallback={...}>\` around the data access
              - Set \`export const instant = false\` to allow a blocking route
 
            Learn more: https://nextjs.org/docs/messages/blocking-route
@@ -3450,7 +3539,7 @@ describe('instant validation', () => {
                  ],
                },
              ],
-             "code": "E1164",
+             "code": "E1220",
              "description": "Next.js encountered uncached data during the initial render.",
              "environmentLabel": "Server",
              "label": "Instant",
diff --git a/test/e2e/app-dir/metadata-static-file/metadata-static-file-dynamic-route.test.ts b/test/e2e/app-dir/metadata-static-file/metadata-static-file-dynamic-route.test.ts
index ea1382c12ba9..1ef66e9c1d40 100644
--- a/test/e2e/app-dir/metadata-static-file/metadata-static-file-dynamic-route.test.ts
+++ b/test/e2e/app-dir/metadata-static-file/metadata-static-file-dynamic-route.test.ts
@@ -5,9 +5,17 @@ describe('metadata-files-static-output-dynamic-route', () => {
   if (process.env.__NEXT_CACHE_COMPONENTS) {
     // Cache Components build fails when metadata files are inside a dynamic route.
     //
-    // Route "/dynamic/[id]" has a `generateMetadata` that depends on Request data (`cookies()`, etc...)
-    // or uncached external data (`fetch(...)`, etc...) when the rest of the route does not.
-    // See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+    // Route "/dynamic/[id]": Next.js encountered uncached or runtime data in `generateMetadata()`.
+    //
+    // This prevents the page from being prerendered, leading to a slower user experience.
+    //
+    // Ways to fix this:
+    //   - Use a static metadata export instead of `generateMetadata()`
+    //   - Cache the metadata with `"use cache"` in `generateMetadata()`
+    //   - Add a dynamic data access (e.g. `await connection()`) to the page to render it at request time
+    //   - Set `export const instant = false` to allow a blocking route
+    //
+    // Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
     // Error occurred prerendering page "/dynamic/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
     // Export encountered an error on /dynamic/[id]/page: /dynamic/[id], exiting the build.
     //
diff --git a/test/e2e/app-dir/metadata-static-file/metadata-static-file-group-route.test.ts b/test/e2e/app-dir/metadata-static-file/metadata-static-file-group-route.test.ts
index 516d7d01ae2a..43ba4e6e9b3c 100644
--- a/test/e2e/app-dir/metadata-static-file/metadata-static-file-group-route.test.ts
+++ b/test/e2e/app-dir/metadata-static-file/metadata-static-file-group-route.test.ts
@@ -5,9 +5,17 @@ describe('metadata-files-static-output-group-route', () => {
   if (process.env.__NEXT_CACHE_COMPONENTS) {
     // Cache Components build fails when metadata files are inside a dynamic route.
     //
-    // Route "/dynamic/[id]" has a `generateMetadata` that depends on Request data (`cookies()`, etc...)
-    // or uncached external data (`fetch(...)`, etc...) when the rest of the route does not.
-    // See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+    // Route "/dynamic/[id]": Next.js encountered uncached or runtime data in `generateMetadata()`.
+    //
+    // This prevents the page from being prerendered, leading to a slower user experience.
+    //
+    // Ways to fix this:
+    //   - Use a static metadata export instead of `generateMetadata()`
+    //   - Cache the metadata with `"use cache"` in `generateMetadata()`
+    //   - Add a dynamic data access (e.g. `await connection()`) to the page to render it at request time
+    //   - Set `export const instant = false` to allow a blocking route
+    //
+    // Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
     // Error occurred prerendering page "/dynamic/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
     // Export encountered an error on /dynamic/[id]/page: /dynamic/[id], exiting the build.
     //
diff --git a/test/e2e/app-dir/metadata-static-file/metadata-static-file-intercepting-route.test.ts b/test/e2e/app-dir/metadata-static-file/metadata-static-file-intercepting-route.test.ts
index dcf292423839..2b0e97190f0c 100644
--- a/test/e2e/app-dir/metadata-static-file/metadata-static-file-intercepting-route.test.ts
+++ b/test/e2e/app-dir/metadata-static-file/metadata-static-file-intercepting-route.test.ts
@@ -5,9 +5,17 @@ describe('metadata-files-static-output-intercepting-route', () => {
   if (process.env.__NEXT_CACHE_COMPONENTS) {
     // Cache Components build fails when metadata files are inside a dynamic route.
     //
-    // Route "/dynamic/[id]" has a `generateMetadata` that depends on Request data (`cookies()`, etc...)
-    // or uncached external data (`fetch(...)`, etc...) when the rest of the route does not.
-    // See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+    // Route "/dynamic/[id]": Next.js encountered uncached or runtime data in `generateMetadata()`.
+    //
+    // This prevents the page from being prerendered, leading to a slower user experience.
+    //
+    // Ways to fix this:
+    //   - Use a static metadata export instead of `generateMetadata()`
+    //   - Cache the metadata with `"use cache"` in `generateMetadata()`
+    //   - Add a dynamic data access (e.g. `await connection()`) to the page to render it at request time
+    //   - Set `export const instant = false` to allow a blocking route
+    //
+    // Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
     // Error occurred prerendering page "/dynamic/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
     // Export encountered an error on /dynamic/[id]/page: /dynamic/[id], exiting the build.
     //
diff --git a/test/e2e/app-dir/metadata-static-file/metadata-static-file-parallel-route.test.ts b/test/e2e/app-dir/metadata-static-file/metadata-static-file-parallel-route.test.ts
index bd01323ab9b7..98cce40ed59f 100644
--- a/test/e2e/app-dir/metadata-static-file/metadata-static-file-parallel-route.test.ts
+++ b/test/e2e/app-dir/metadata-static-file/metadata-static-file-parallel-route.test.ts
@@ -5,9 +5,17 @@ describe('metadata-files-static-output-parallel-route', () => {
   if (process.env.__NEXT_CACHE_COMPONENTS) {
     // Cache Components build fails when metadata files are inside a dynamic route.
     //
-    // Route "/dynamic/[id]" has a `generateMetadata` that depends on Request data (`cookies()`, etc...)
-    // or uncached external data (`fetch(...)`, etc...) when the rest of the route does not.
-    // See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+    // Route "/dynamic/[id]": Next.js encountered uncached or runtime data in `generateMetadata()`.
+    //
+    // This prevents the page from being prerendered, leading to a slower user experience.
+    //
+    // Ways to fix this:
+    //   - Use a static metadata export instead of `generateMetadata()`
+    //   - Cache the metadata with `"use cache"` in `generateMetadata()`
+    //   - Add a dynamic data access (e.g. `await connection()`) to the page to render it at request time
+    //   - Set `export const instant = false` to allow a blocking route
+    //
+    // Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
     // Error occurred prerendering page "/dynamic/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
     // Export encountered an error on /dynamic/[id]/page: /dynamic/[id], exiting the build.
     //
diff --git a/test/e2e/app-dir/metadata-static-file/metadata-static-file-root-route.test.ts b/test/e2e/app-dir/metadata-static-file/metadata-static-file-root-route.test.ts
index 79235024d846..bba93eafb416 100644
--- a/test/e2e/app-dir/metadata-static-file/metadata-static-file-root-route.test.ts
+++ b/test/e2e/app-dir/metadata-static-file/metadata-static-file-root-route.test.ts
@@ -5,9 +5,17 @@ describe('metadata-files-static-output-root-route', () => {
   if (process.env.__NEXT_CACHE_COMPONENTS) {
     // Cache Components build fails when metadata files are inside a dynamic route.
     //
-    // Route "/dynamic/[id]" has a `generateMetadata` that depends on Request data (`cookies()`, etc...)
-    // or uncached external data (`fetch(...)`, etc...) when the rest of the route does not.
-    // See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+    // Route "/dynamic/[id]": Next.js encountered uncached or runtime data in `generateMetadata()`.
+    //
+    // This prevents the page from being prerendered, leading to a slower user experience.
+    //
+    // Ways to fix this:
+    //   - Use a static metadata export instead of `generateMetadata()`
+    //   - Cache the metadata with `"use cache"` in `generateMetadata()`
+    //   - Add a dynamic data access (e.g. `await connection()`) to the page to render it at request time
+    //   - Set `export const instant = false` to allow a blocking route
+    //
+    // Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
     // Error occurred prerendering page "/dynamic/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
     // Export encountered an error on /dynamic/[id]/page: /dynamic/[id], exiting the build.
     //
diff --git a/test/e2e/app-dir/metadata-static-file/metadata-static-file-static-route.test.ts b/test/e2e/app-dir/metadata-static-file/metadata-static-file-static-route.test.ts
index 7f2bf0683ca2..d94eceb23b25 100644
--- a/test/e2e/app-dir/metadata-static-file/metadata-static-file-static-route.test.ts
+++ b/test/e2e/app-dir/metadata-static-file/metadata-static-file-static-route.test.ts
@@ -5,9 +5,17 @@ describe('metadata-files-static-output-static-route', () => {
   if (process.env.__NEXT_CACHE_COMPONENTS) {
     // Cache Components build fails when metadata files are inside a dynamic route.
     //
-    // Route "/dynamic/[id]" has a `generateMetadata` that depends on Request data (`cookies()`, etc...)
-    // or uncached external data (`fetch(...)`, etc...) when the rest of the route does not.
-    // See more info here: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
+    // Route "/dynamic/[id]": Next.js encountered uncached or runtime data in `generateMetadata()`.
+    //
+    // This prevents the page from being prerendered, leading to a slower user experience.
+    //
+    // Ways to fix this:
+    //   - Use a static metadata export instead of `generateMetadata()`
+    //   - Cache the metadata with `"use cache"` in `generateMetadata()`
+    //   - Add a dynamic data access (e.g. `await connection()`) to the page to render it at request time
+    //   - Set `export const instant = false` to allow a blocking route
+    //
+    // Learn more: https://nextjs.org/docs/messages/next-prerender-dynamic-metadata
     // Error occurred prerendering page "/dynamic/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
     // Export encountered an error on /dynamic/[id]/page: /dynamic/[id], exiting the build.
     //
diff --git a/test/production/app-dir/build-output-prerender/build-output-prerender.test.ts b/test/production/app-dir/build-output-prerender/build-output-prerender.test.ts
index 9c3b6d755a6e..f7266425ec67 100644
--- a/test/production/app-dir/build-output-prerender/build-output-prerender.test.ts
+++ b/test/production/app-dir/build-output-prerender/build-output-prerender.test.ts
@@ -71,7 +71,15 @@ describe('build-output-prerender', () => {
         if (isTurbopack) {
           // TODO(veil): Why is the location incomplete unless we enable --no-mangling?
           expect(getPrerenderOutput(next.cliOutput)).toMatchInlineSnapshot(`
-           "Error: Route "/client" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+           "Error: Route "/client": Next.js encountered \`new Date()\` in a Client Component.
+
+           This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+           Ways to fix this:
+             - Wrap the Client Component in \`<Suspense fallback={...}>\`
+             - Move the read into a \`useEffect\` or event handler
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                at <unknown> (app/client/page.tsx:4:28)
              2 |
              3 | export default function Page() {
@@ -87,7 +95,15 @@ describe('build-output-prerender', () => {
           `)
         } else {
           expect(getPrerenderOutput(next.cliOutput)).toMatchInlineSnapshot(`
-           "Error: Route "/client" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+           "Error: Route "/client": Next.js encountered \`new Date()\` in a Client Component.
+
+           This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+           Ways to fix this:
+             - Wrap the Client Component in \`<Suspense fallback={...}>\`
+             - Move the read into a \`useEffect\` or event handler
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                at x (<next-dist-dir>)
            To get a more detailed stack trace and pinpoint the issue, try one of the following:
              - Start the app in development mode by running \`next dev\`, then open "/client" in your browser to investigate the error.
@@ -194,7 +210,15 @@ describe('build-output-prerender', () => {
       it('shows all prerender errors with readable stacks and code frames', async () => {
         if (isTurbopack) {
           expect(getPrerenderOutput(next.cliOutput)).toMatchInlineSnapshot(`
-           "Error: Route "/client" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+           "Error: Route "/client": Next.js encountered \`new Date()\` in a Client Component.
+
+           This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+           Ways to fix this:
+             - Wrap the Client Component in \`<Suspense fallback={...}>\`
+             - Move the read into a \`useEffect\` or event handler
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                at Page (app/client/page.tsx:4:28)
              2 |
              3 | export default function Page() {
@@ -204,7 +228,16 @@ describe('build-output-prerender', () => {
              6 |
            To debug the issue, start the app in development mode by running \`next dev\`, then open "/client" in your browser to investigate the error.
            Error occurred prerendering page "/client". Read more: https://nextjs.org/docs/messages/prerender-error
-           Error: Route "/server" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+           Error: Route "/server": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+           This value can change between renders, so it must be either prerendered or computed later.
+
+           Ways to fix this:
+             - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+             - Prerender and cache the value with \`"use cache"\`
+             - Render the value on the client with \`"use client"\`
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-random
                at Page (app/server/page.tsx:13:27)
                at Page (<anonymous>)
              11 |   await cachedDelay()
@@ -223,7 +256,15 @@ describe('build-output-prerender', () => {
         } else {
           // TODO(veil): Bundler protocols should not appear in stackframes.
           expect(getPrerenderOutput(next.cliOutput)).toMatchInlineSnapshot(`
-           "Error: Route "/client" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client
+           "Error: Route "/client": Next.js encountered \`new Date()\` in a Client Component.
+
+           This value would be evaluated during the prerender and fixed at build time, instead of recomputed on each visit.
+
+           Ways to fix this:
+             - Wrap the Client Component in \`<Suspense fallback={...}>\`
+             - Move the read into a \`useEffect\` or event handler
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-current-time-client
                at Page (webpack:///app/client/page.tsx:4:28)
                at ClientPageRoot (webpack:///src/client/components/client-page.tsx:61:12)
              2 |
@@ -234,7 +275,16 @@ describe('build-output-prerender', () => {
              6 |
            To debug the issue, start the app in development mode by running \`next dev\`, then open "/client" in your browser to investigate the error.
            Error occurred prerendering page "/client". Read more: https://nextjs.org/docs/messages/prerender-error
-           Error: Route "/server" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random
+           Error: Route "/server": Next.js encountered \`Math.random()\` without an explicit rendering intent.
+
+           This value can change between renders, so it must be either prerendered or computed later.
+
+           Ways to fix this:
+             - Render at request time by adding a dynamic data access (e.g. \`await connection()\`) before this call
+             - Prerender and cache the value with \`"use cache"\`
+             - Render the value on the client with \`"use client"\`
+
+           Learn more: https://nextjs.org/docs/messages/next-prerender-random
                at Page (webpack:///app/server/page.tsx:13:27)
                at Page (<anonymous>)
              11 |   await cachedDelay()
diff --git a/test/production/next-server-nft/next-server-nft.test.ts b/test/production/next-server-nft/next-server-nft.test.ts
index b15db84c8cfa..95c8a0f7bcff 100644
--- a/test/production/next-server-nft/next-server-nft.test.ts
+++ b/test/production/next-server-nft/next-server-nft.test.ts
@@ -662,6 +662,7 @@ async function readNormalizedNFT(next, name) {
            "/node_modules/next/dist/server/app-render/module-loading/track-module-loading.external.js",
            "/node_modules/next/dist/server/app-render/module-loading/track-module-loading.instance.js",
            "/node_modules/next/dist/server/app-render/staged-rendering.js",
+           "/node_modules/next/dist/server/app-render/sync-io-messages.js",
            "/node_modules/next/dist/server/app-render/work-async-storage-instance.js",
            "/node_modules/next/dist/server/app-render/work-async-storage.external.js",
            "/node_modules/next/dist/server/app-render/work-unit-async-storage-instance.js",

From 9a48c22c17ed834ec83c2412acf392972280243b Mon Sep 17 00:00:00 2001
From: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com>
Date: Mon, 11 May 2026 22:27:11 +0200
Subject: [PATCH 3/5] Turbopack: expose hashes of source files to adapters
 (#93539)

- [x] fix tests
- [ ] add experimental flag and only enable in adapter? or is this cheap
enough to just always do?
- [x] disable for webpack




Closes PACK-6541

For https://github.com/nextjs/adapter-vercel/pull/24
Newer version of https://github.com/vercel/next.js/pull/89534

- Add a hashes mapping to the NFT file
- Forward that information to the adapter via `assetsHashes` for
functions


Basically zero-cost:
```
commit ad728b15a6431a6372eea3d3d766b328569811b4 (HEAD -> mischnic/server-paths-manifest-2, origin/mischnic/server-paths-manifest-2)
pnpm next build   351.22s user, 51.55s system, 811% cpu, 49.654 total
pnpm next build   354.52s user, 53.39s system, 837% cpu, 48.706 total
pnpm next build   344.02s user, 63.62s system, 749% cpu, 54.368 total
pnpm next build   353.74s user, 54.25s system, 833% cpu, 48.970 total

commit 04294cb47a6d67adf73c8b6f196ed6a2ddcb2b0e (origin/canary, origin/HEAD)
pnpm next build   344.24s user, 53.88s system, 798% cpu, 49.845 total
pnpm next build   340.89s user, 52.40s system, 784% cpu, 50.138 total
pnpm next build   347.26s user, 51.91s system, 802% cpu, 49.741 total
pnpm next build   347.04s user, 52.65s system, 803% cpu, 49.764 total
```
---
 crates/next-api/src/next_server_nft.rs        |  31 +-
 crates/next-api/src/nft_json.rs               |  34 +-
 crates/next-api/src/paths.rs                  |   8 +-
 crates/next-api/src/routes_hashes_manifest.rs |  26 +-
 .../next/src/build/adapter/build-complete.ts  | 501 +++++++++++-------
 .../adapter-content-hashes.test.ts            |  66 +++
 .../cache-components/next.config.js           |   1 +
 .../cache-components/proxy.ts                 |   9 +
 .../deterministic-build/deployment-id.test.ts |  26 +-
 test/production/deterministic-build/files.ts  |  28 +
 .../deterministic-build/my-adapter.mjs        |   9 +
 .../standard/next.config.js                   |   1 +
 turbopack/crates/turbo-tasks-fs/src/lib.rs    |   5 +-
 turbopack/crates/turbopack-core/src/asset.rs  |  17 +-
 14 files changed, 507 insertions(+), 255 deletions(-)
 create mode 100644 test/production/deterministic-build/adapter-content-hashes.test.ts
 create mode 100644 test/production/deterministic-build/cache-components/proxy.ts
 create mode 100644 test/production/deterministic-build/files.ts
 create mode 100644 test/production/deterministic-build/my-adapter.mjs

diff --git a/crates/next-api/src/next_server_nft.rs b/crates/next-api/src/next_server_nft.rs
index dea9d670c68e..dad21b243f25 100644
--- a/crates/next-api/src/next_server_nft.rs
+++ b/crates/next-api/src/next_server_nft.rs
@@ -13,6 +13,7 @@ use turbo_tasks::{
 use turbo_tasks_fs::{
     DirectoryContent, DirectoryEntry, File, FileContent, FileSystemPath, glob::Glob,
 };
+use turbo_tasks_hash::HashAlgorithm;
 use turbopack::externals_tracing_module_context;
 use turbopack_core::{
     asset::{Asset, AssetContent},
@@ -117,9 +118,12 @@ impl Asset for ServerNftJsonAsset {
                 .await?
                 .iter()
                 .map(async |m| {
-                    base_dir
-                        .get_relative_path_to(&*m.path().await?)
-                        .context("failed to compute relative path for server NFT JSON")
+                    Ok((
+                        base_dir
+                            .get_relative_path_to(&*m.path().await?)
+                            .context("failed to compute relative path for server NFT JSON")?,
+                        m.content().hash(HashAlgorithm::Xxh3Hash128Hex).await?,
+                    ))
                 })
                 .try_join()
                 .await?;
@@ -128,11 +132,15 @@ impl Asset for ServerNftJsonAsset {
         for ty in ["app-page", "pages"] {
             let dir = next_dir.join(&format!("dist/server/route-modules/{ty}"))?;
             let module_path = dir.join("module.compiled.js")?;
-            server_output_assets.push(
+            server_output_assets.push((
                 base_dir
                     .get_relative_path_to(&module_path)
                     .context("failed to compute relative path for server NFT JSON")?,
-            );
+                module_path
+                    .read()
+                    .hash(HashAlgorithm::Xxh3Hash128Hex)
+                    .await?,
+            ));
 
             let contexts_dir = dir.join("vendored/contexts")?;
             let DirectoryContent::Entries(contexts_files) = &*contexts_dir.read_dir().await? else {
@@ -146,24 +154,27 @@ impl Asset for ServerNftJsonAsset {
                     continue;
                 };
                 if file.extension() == Some("js") {
-                    server_output_assets.push(
+                    server_output_assets.push((
                         base_dir
                             .get_relative_path_to(file)
                             .context("failed to compute relative path for server NFT JSON")?,
-                    )
+                        file.read().hash(HashAlgorithm::Xxh3Hash128Hex).await?,
+                    ))
                 }
             }
         }
 
-        server_output_assets.sort();
+        server_output_assets.sort_unstable();
         // Dedupe as some entries may be duplicates: a file might be referenced multiple times,
         // e.g. as a RawModule (from an FS operation) and as an EcmascriptModuleAsset because it
         // was required.
         server_output_assets.dedup();
 
+        let (files, file_hashes): (Vec<_>, Vec<_>) = server_output_assets.into_iter().unzip();
         let json = json!({
-          "version": 1,
-          "files": server_output_assets
+            "version": 1,
+            "files": files,
+            "fileHashes": file_hashes
         });
 
         Ok(AssetContent::file(
diff --git a/crates/next-api/src/nft_json.rs b/crates/next-api/src/nft_json.rs
index 3c2cd4ec1416..5f6b8bba9baa 100644
--- a/crates/next-api/src/nft_json.rs
+++ b/crates/next-api/src/nft_json.rs
@@ -1,4 +1,4 @@
-use std::collections::{BTreeSet, HashSet, VecDeque};
+use std::collections::{BTreeMap, BTreeSet, HashSet, VecDeque};
 
 use anyhow::{Result, bail};
 use async_trait::async_trait;
@@ -14,6 +14,7 @@ use turbo_tasks_fs::{
     DirectoryEntry, File, FileContent, FileSystem, FileSystemPath,
     glob::{Glob, GlobOptions},
 };
+use turbo_tasks_hash::HashAlgorithm;
 use turbopack_core::{
     asset::{Asset, AssetContent},
     issue::{Issue, IssueExt, IssueSeverity, IssueStage, StyledString},
@@ -106,14 +107,14 @@ async fn apply_includes(
     project_root_path: FileSystemPath,
     glob: Vc<Glob>,
     ident_folder: &FileSystemPath,
-) -> Result<BTreeSet<RcStr>> {
+) -> Result<BTreeMap<RcStr, ReadRef<RcStr>>> {
     debug_assert_eq!(project_root_path.fs, ident_folder.fs);
     // Read files matching the glob pattern from the project root
     // This result itself has random order, but the BTreeSet will ensure a deterministic ordering.
     let glob_result = project_root_path.read_glob(glob).await?;
 
     // Walk the full glob_result using an explicit stack to avoid async recursion overheads.
-    let mut result = BTreeSet::new();
+    let mut result = BTreeMap::new();
     let mut stack = VecDeque::new();
     stack.push_back(glob_result);
     while let Some(glob_result) = stack.pop_back() {
@@ -128,7 +129,10 @@ async fn apply_includes(
             // unwrap is safe because project_root_path and ident_folder have the same filesystem
             // and paths produced by read_glob stay in the filesystem
             let relative_path = ident_folder.get_relative_path_to(file_path).unwrap();
-            result.insert(relative_path);
+            result.insert(
+                relative_path,
+                file_path.read().hash(HashAlgorithm::Xxh3Hash128Hex).await?,
+            );
         }
 
         for nested_result in glob_result.inner.values() {
@@ -149,7 +153,7 @@ impl Asset for NftJsonAsset {
             path = display(self.path().to_string().await?)
         );
         async move {
-            let mut result: BTreeSet<RcStr> = BTreeSet::new();
+            let mut result: BTreeMap<RcStr, ReadRef<RcStr>> = BTreeMap::new();
             let project_path = this.project.project_path().owned().await?;
 
             let output_root_ref = this.project.output_fs().root().await?;
@@ -320,7 +324,13 @@ impl Asset for NftJsonAsset {
                     }
                 };
 
-                result.insert(specifier);
+                result.insert(
+                    specifier,
+                    referenced_chunk
+                        .content()
+                        .hash(HashAlgorithm::Xxh3Hash128Hex)
+                        .await?,
+                );
             }
 
             // Apply outputFileTracingIncludes and outputFileTracingExcludes
@@ -371,9 +381,19 @@ impl Asset for NftJsonAsset {
                 result.extend(includes.into_iter().flatten());
             }
 
+            let (files, file_hashes): (Vec<_>, Vec<_>) = result.into_iter().unzip();
+            // We can't just add this into "files" because Next.js sometimes decides to delete
+            // output files such as `.next/server/pages/index.js` if that page was prerendered and
+            // is fully static. An alternative would be to postprocess the nft file so that
+            // non-adapter consumers (which includes output:standalone) don't experience a breaking
+            // change, but instead we just add it as a separate field that only build-complete
+            // reads.
+            let entry_hash = chunk.content().hash(HashAlgorithm::Xxh3Hash128Hex).await?;
             let json = json!({
               "version": 1,
-              "files": result
+              "files": files,
+              "fileHashes": file_hashes,
+              "entryHash": entry_hash,
             });
 
             Ok(AssetContent::file(
diff --git a/crates/next-api/src/paths.rs b/crates/next-api/src/paths.rs
index bcb0475cb7c0..d07b9ebb2012 100644
--- a/crates/next-api/src/paths.rs
+++ b/crates/next-api/src/paths.rs
@@ -4,7 +4,7 @@ use tracing::Instrument;
 use turbo_rcstr::RcStr;
 use turbo_tasks::{ResolvedVc, TryFlatJoinIterExt, TryJoinIterExt, Vc};
 use turbo_tasks_fs::FileSystemPath;
-use turbo_tasks_hash::{HashAlgorithm, encode_hex};
+use turbo_tasks_hash::HashAlgorithm;
 use turbopack_core::{
     asset::{Asset, no_hash_salt},
     output::{OutputAsset, OutputAssets},
@@ -44,7 +44,11 @@ async fn asset_path(
                     .await?
                     .context("asset content not found")?
             } else {
-                encode_hex(*asset.content().hash().await?).into()
+                asset
+                    .content()
+                    .hash(HashAlgorithm::Xxh3Hash128Hex)
+                    .owned()
+                    .await?
             };
             Some(AssetPath {
                 path: RcStr::from(path),
diff --git a/crates/next-api/src/routes_hashes_manifest.rs b/crates/next-api/src/routes_hashes_manifest.rs
index 5dd2a32d0ddf..6c0d1365b51a 100644
--- a/crates/next-api/src/routes_hashes_manifest.rs
+++ b/crates/next-api/src/routes_hashes_manifest.rs
@@ -3,7 +3,7 @@ use serde::Serialize;
 use turbo_rcstr::RcStr;
 use turbo_tasks::{FxIndexMap, FxIndexSet, ResolvedVc, TryFlatJoinIterExt, TryJoinIterExt, Vc};
 use turbo_tasks_fs::{FileContent, FileSystemPath};
-use turbo_tasks_hash::{DeterministicHash, Xxh3Hash64Hasher};
+use turbo_tasks_hash::{DeterministicHash, HashAlgorithm, Xxh3Hash64Hasher, hash_xxh3_hash64};
 use turbopack_core::{
     asset::{Asset, AssetContent},
     module::{Module, Modules},
@@ -77,19 +77,11 @@ pub async fn outputs_hash(outputs: Vc<OutputAssets>) -> Result<Vc<u64>> {
     .await?;
     let outputs_hashes = output_assets
         .iter()
-        .map(|asset| asset.content().hash())
+        .map(|asset| asset.content().hash(HashAlgorithm::Xxh3Hash128Hex))
         .try_join()
         .await?;
 
-    let outputs_hash = {
-        let mut hasher = Xxh3Hash64Hasher::new();
-        for hash in outputs_hashes.iter() {
-            hash.deterministic_hash(&mut hasher);
-        }
-        hasher.finish()
-    };
-
-    Ok(Vc::cell(outputs_hash))
+    Ok(Vc::cell(hash_xxh3_hash64(outputs_hashes)))
 }
 
 #[turbo_tasks::function]
@@ -159,19 +151,11 @@ pub async fn sources_hash(module_graph: Vc<ModuleGraph>, modules: Vc<Modules>) -
         .try_flat_join()
         .await?
         .into_iter()
-        .map(|source| source.content().hash())
+        .map(|source| source.content().hash(HashAlgorithm::Xxh3Hash128Hex))
         .try_join()
         .await?;
 
-    let sources_hash = {
-        let mut hasher = Xxh3Hash64Hasher::new();
-        for source in sources.iter() {
-            source.deterministic_hash(&mut hasher);
-        }
-        hasher.finish()
-    };
-
-    Ok(Vc::cell(sources_hash))
+    Ok(Vc::cell(hash_xxh3_hash64(sources)))
 }
 
 #[derive(Serialize)]
diff --git a/packages/next/src/build/adapter/build-complete.ts b/packages/next/src/build/adapter/build-complete.ts
index f2c53d4e6275..051481893861 100644
--- a/packages/next/src/build/adapter/build-complete.ts
+++ b/packages/next/src/build/adapter/build-complete.ts
@@ -1,4 +1,5 @@
 import path from 'path'
+import crypto from 'crypto'
 import fs from 'fs/promises'
 import { pathToFileURL } from 'url'
 import * as Log from '../output/log'
@@ -75,18 +76,22 @@ interface SharedRouteFields {
    * runtime is which runtime the entrypoint is built for
    */
   runtime: 'nodejs' | 'edge'
+
   /**
    * assets are all necessary traced assets that could be
    * loaded by the output to handle a request e.g. traced
    * node_modules or necessary manifests for Next.js.
-   * The key is the relative path from the repo root and the value
-   * is the absolute path to the file
+   * The key is the relative path from the repo root
    */
   assets: Record<string, string>
 
   /**
-   * wasmAssets are bundled wasm files with mapping of name
-   * to filePath on disk
+   * Hashes of the contents of each `assets` entry (not including the output path!)
+   */
+  assetsHashes: Record<string, string>
+
+  /**
+   * wasmAssets are bundled wasm files. The key is the (opaque) name of asset
    */
   wasmAssets?: Record<string, string>
 
@@ -558,158 +563,50 @@ export async function handleBuildComplete({
         })
       }
 
-      const sharedNodeAssets: Record<string, string> = {}
-      const pagesSharedNodeAssets: Record<string, string> = {}
-      const appPagesSharedNodeAssets: Record<string, string> = {}
-
-      for (const file of requiredServerFiles) {
-        // add to shared node assets
-        const filePath = path.join(dir, file)
-        const fileOutputPath = path.relative(tracingRoot, filePath)
-        sharedNodeAssets[fileOutputPath] = filePath
-      }
-
-      // add "next/setup-node-env" stub so it can be required top-level
-      // TODO: should we make this always available without adapters
-      const setupNodeStubPath = path.join(
-        path.dirname(require.resolve('next/package.json')),
-        'setup-node-env.js'
-      )
-      sharedNodeAssets[path.relative(tracingRoot, setupNodeStubPath)] =
-        require.resolve('next/dist/build/adapter/setup-node-env.external')
-
-      const moduleTypes = ['app-page', 'pages'] as const
-
-      for (const type of moduleTypes) {
-        const currentDependencies: string[] = []
-        const modulePath = require.resolve(
-          `next/dist/server/route-modules/${type}/module.compiled`
-        )
-        currentDependencies.push(modulePath)
-
-        const contextDir = path.join(
-          path.dirname(modulePath),
-          'vendored',
-          'contexts'
-        )
-
-        for (const item of await fs.readdir(contextDir)) {
-          if (item.match(/\.(mjs|cjs|js)$/)) {
-            currentDependencies.push(path.join(contextDir, item))
-          }
-        }
-
-        for (const dependencyPath of currentDependencies) {
-          const rootRelativeFilePath = path.relative(
-            tracingRoot,
-            dependencyPath
-          )
-
-          if (type === 'pages') {
-            pagesSharedNodeAssets[rootRelativeFilePath] = path.join(
-              tracingRoot,
-              rootRelativeFilePath
-            )
-          } else {
-            appPagesSharedNodeAssets[rootRelativeFilePath] = path.join(
-              tracingRoot,
-              rootRelativeFilePath
-            )
-          }
-        }
-      }
-
-      if (bundler !== Bundler.Turbopack) {
-        const { nodeFileTrace } =
-          require('next/dist/compiled/@vercel/nft') as typeof import('next/dist/compiled/@vercel/nft')
-        const { makeIgnoreFn } =
-          require('../collect-build-traces') as typeof import('../collect-build-traces')
-
-        const sharedTraceIgnores = [
-          '**/next/dist/compiled/next-server/**/*.dev.js',
-          '**/next/dist/compiled/webpack/*',
-          '**/node_modules/webpack5/**/*',
-          '**/next/dist/server/lib/route-resolver*',
-          'next/dist/compiled/semver/semver/**/*.js',
-          '**/node_modules/react{,-dom,-dom-server-turbopack}/**/*.development.js',
-          '**/*.d.ts',
-          '**/*.map',
-          '**/next/dist/pages/**/*',
-          '**/node_modules/sharp/**/*',
-          '**/@img/sharp-libvips*/**/*',
-          '**/next/dist/compiled/edge-runtime/**/*',
-          '**/next/dist/server/web/sandbox/**/*',
-          '**/next/dist/server/post-process.js',
-        ]
-        const sharedIgnoreFn = makeIgnoreFn(tracingRoot, sharedTraceIgnores)
-
-        // These are modules that are necessary for bootstrapping node env
-        const necessaryNodeDependencies = [
-          require.resolve('next/dist/server/node-environment'),
-          require.resolve('next/dist/server/require-hook'),
-          require.resolve('next/dist/server/node-polyfill-crypto'),
-          ...Object.values(defaultOverrides).filter((item) =>
-            path.extname(item)
-          ),
-        ]
-
-        const { fileList, esmFileList } = await nodeFileTrace(
-          necessaryNodeDependencies,
-          {
-            base: tracingRoot,
-            ignore: sharedIgnoreFn,
-          }
-        )
-        esmFileList.forEach((item) => fileList.add(item))
-
-        for (const rootRelativeFilePath of fileList) {
-          sharedNodeAssets[rootRelativeFilePath] = path.join(
-            tracingRoot,
-            rootRelativeFilePath
-          )
-        }
-      }
-
-      if (hasInstrumentationHook) {
-        const assets = await handleTraceFiles(
-          path.join(distDir, 'server', 'instrumentation.js.nft.json'),
-          'neutral'
-        )
-        const fileOutputPath = path.relative(
-          tracingRoot,
-          path.join(distDir, 'server', 'instrumentation.js')
-        )
-        sharedNodeAssets[fileOutputPath] = path.join(
-          distDir,
-          'server',
-          'instrumentation.js'
-        )
-        Object.assign(sharedNodeAssets, assets)
-      }
+      const {
+        sharedNodeAssets,
+        sharedNodeAssetsHashes,
+        pagesSharedNodeAssets,
+        pagesSharedNodeAssetsHashes,
+        appPagesSharedNodeAssets,
+        appPagesSharedNodeAssetsHashes,
+      } = await getSharedNodeAssets({
+        distDir,
+        requiredServerFiles,
+        dir,
+        tracingRoot,
+        bundler,
+        hasInstrumentationHook,
+      })
 
       async function handleTraceFiles(
-        traceFilePath: string,
+        entryFilePath: string,
         type: 'pages' | 'app' | 'neutral'
-      ): Promise<Record<string, string>> {
-        const assets: Record<string, string> = Object.assign(
-          {},
+      ) {
+        const assets: Record<string, string> = {}
+        const assetsHashes: Record<string, string> = {}
+        const { entryHash } = await loadNFT(
+          assets,
+          assetsHashes,
+          tracingRoot,
+          `${entryFilePath}.nft.json`
+        )
+        Object.assign(
+          assets,
           sharedNodeAssets,
           type === 'pages' ? pagesSharedNodeAssets : {},
           type === 'app' ? appPagesSharedNodeAssets : {}
         )
-        const traceData = JSON.parse(
-          await fs.readFile(traceFilePath, 'utf8')
-        ) as {
-          files: string[]
-        }
-        const traceFileDir = path.dirname(traceFilePath)
-
-        for (const relativeFile of traceData.files) {
-          const tracedFilePath = path.join(traceFileDir, relativeFile)
-          const fileOutputPath = path.relative(tracingRoot, tracedFilePath)
-          assets[fileOutputPath] = tracedFilePath
+        Object.assign(
+          assetsHashes,
+          sharedNodeAssetsHashes,
+          type === 'pages' ? pagesSharedNodeAssetsHashes : {},
+          type === 'app' ? appPagesSharedNodeAssetsHashes : {}
+        )
+        if (entryHash) {
+          assetsHashes[path.relative(tracingRoot, entryFilePath)] = entryHash
         }
-        return assets
+        return { assets, assetsHashes, entryHash }
       }
 
       async function handleEdgeFunction(
@@ -767,30 +664,23 @@ export async function handleBuildComplete({
             handlerExport: 'handler',
           },
           assets: {},
+          assetsHashes: {},
+          // Computing assetsHash for edge functions isn't implemented for now
           wasmAssets: {},
           config: {
             env: page.env,
           },
         }
 
-        function handleFile(file: string) {
+        for (const file of page.files) {
           const originalPath = path.join(distDir, file)
           const fileOutputPath = path.relative(
             config.distDir,
             path.join(path.relative(tracingRoot, distDir), file)
           )
-          if (!output.assets) {
-            output.assets = {}
-          }
           output.assets[fileOutputPath] = originalPath
         }
-        for (const file of page.files) {
-          handleFile(file)
-        }
         for (const item of [...(page.assets || [])]) {
-          if (!output.assets) {
-            output.assets = {}
-          }
           output.assets[item.name] = path.join(distDir, item.filePath)
         }
         for (const item of page.wasm || []) {
@@ -940,15 +830,15 @@ export async function handleBuildComplete({
           continue
         }
 
-        const pageTraceFile = `${pageFile}.nft.json`
-        const assets = await handleTraceFiles(pageTraceFile, 'pages').catch(
-          (err) => {
-            if (err.code !== 'ENOENT' || (page !== '/404' && page !== '/500')) {
-              Log.warn(`Failed to locate traced assets for ${pageFile}`, err)
-            }
-            return {} as Record<string, string>
+        const { assets, assetsHashes } = await handleTraceFiles(
+          pageFile,
+          'pages'
+        ).catch((err) => {
+          if (err.code !== 'ENOENT' || (page !== '/404' && page !== '/500')) {
+            Log.warn(`Failed to locate traced assets for ${pageFile}`, err)
           }
-        )
+          return { assets: {}, assetsHashes: {} }
+        })
         const functionConfig = functionsConfigManifest.functions[route] || {}
         let sourcePage = route.replace(/^\//, '')
 
@@ -959,10 +849,11 @@ export async function handleBuildComplete({
           type: page.startsWith('/api')
             ? AdapterOutputType.PAGES_API
             : AdapterOutputType.PAGES,
-          filePath: pageTraceFile.replace(/\.nft\.json$/, ''),
+          filePath: pageFile,
           pathname: route,
           sourcePage,
           assets,
+          assetsHashes,
           runtime: 'nodejs',
           config: {
             maxDuration: functionConfig.maxDuration,
@@ -1039,8 +930,10 @@ export async function handleBuildComplete({
 
       if (hasNodeMiddleware) {
         const middlewareFile = path.join(distDir, 'server', 'middleware.js')
-        const middlewareTrace = `${middlewareFile}.nft.json`
-        const assets = await handleTraceFiles(middlewareTrace, 'neutral')
+        const { assets, assetsHashes } = await handleTraceFiles(
+          middlewareFile,
+          'neutral'
+        )
         const functionConfig =
           functionsConfigManifest.functions['/_middleware'] || {}
 
@@ -1049,6 +942,7 @@ export async function handleBuildComplete({
           id: '/_middleware',
           sourcePage: 'middleware',
           assets,
+          assetsHashes,
           type: AdapterOutputType.MIDDLEWARE,
           runtime: 'nodejs',
           filePath: middlewareFile,
@@ -1109,22 +1003,27 @@ export async function handleBuildComplete({
             continue
           }
           const pageFile = path.join(appDistDir, `${page}.js`)
-          const pageTraceFile = `${pageFile}.nft.json`
-          const assets = await handleTraceFiles(pageTraceFile, 'app').catch(
-            (err) => {
-              Log.warn(`Failed to copy traced files for ${pageFile}`, err)
-              return {} as Record<string, string>
-            }
-          )
+          let { assets, assetsHashes } = await handleTraceFiles(
+            pageFile,
+            'app'
+          ).catch((err) => {
+            Log.warn(`Failed to copy traced files for ${pageFile}`, err)
+            return { assets: {}, assetsHashes: {} }
+          })
 
           // If this is a parallel route we just need to merge
           // the assets as they share the same pathname
           const existingOutput = appOutputMap[normalizedPage]
           if (existingOutput) {
             Object.assign(existingOutput.assets, assets)
-            existingOutput.assets[path.relative(tracingRoot, pageFile)] =
-              pageFile
-
+            Object.assign(existingOutput.assetsHashes, assetsHashes)
+            await pushAsset(
+              existingOutput.assets,
+              existingOutput.assetsHashes,
+              path.relative(tracingRoot, pageFile),
+              pageFile,
+              bundler
+            )
             continue
           }
 
@@ -1137,6 +1036,7 @@ export async function handleBuildComplete({
               id: normalizedPage,
               sourcePage: page,
               assets,
+              assetsHashes,
               type: page.endsWith('/route')
                 ? AdapterOutputType.APP_ROUTE
                 : AdapterOutputType.APP_PAGE,
@@ -2213,3 +2113,246 @@ export async function handleBuildComplete({
     }
   }
 }
+
+async function getSharedNodeAssets({
+  dir,
+  bundler,
+  distDir,
+  tracingRoot,
+  requiredServerFiles,
+  hasInstrumentationHook,
+}: {
+  dir: string
+  bundler: Bundler
+  distDir: string
+  tracingRoot: string
+  requiredServerFiles: string[]
+  hasInstrumentationHook: boolean
+}) {
+  const sharedNodeAssets: Record<string, string> = {}
+  const sharedNodeAssetsHashes: Record<string, string> = {}
+  const pagesSharedNodeAssets: Record<string, string> = {}
+  const pagesSharedNodeAssetsHashes: Record<string, string> = {}
+  const appPagesSharedNodeAssets: Record<string, string> = {}
+  const appPagesSharedNodeAssetsHashes: Record<string, string> = {}
+
+  const moduleTypes = ['app-page', 'pages'] as const
+
+  for (const type of moduleTypes) {
+    const currentDependencies: string[] = []
+    const modulePath = require.resolve(
+      `next/dist/server/route-modules/${type}/module.compiled`
+    )
+    currentDependencies.push(modulePath)
+
+    const contextDir = path.join(
+      path.dirname(modulePath),
+      'vendored',
+      'contexts'
+    )
+
+    for (const item of await fs.readdir(contextDir)) {
+      if (item.match(/\.(mjs|cjs|js)$/)) {
+        currentDependencies.push(path.join(contextDir, item))
+      }
+    }
+
+    for (const dependencyPath of currentDependencies) {
+      const rootRelativeFilePath = path.relative(tracingRoot, dependencyPath)
+
+      if (type === 'pages') {
+        await pushAsset(
+          pagesSharedNodeAssets,
+          pagesSharedNodeAssetsHashes,
+          rootRelativeFilePath,
+          path.join(tracingRoot, rootRelativeFilePath),
+          bundler
+        )
+      } else {
+        await pushAsset(
+          appPagesSharedNodeAssets,
+          appPagesSharedNodeAssetsHashes,
+          rootRelativeFilePath,
+          path.join(tracingRoot, rootRelativeFilePath),
+          bundler
+        )
+      }
+    }
+  }
+
+  // add "next/setup-node-env" stub so it can be required top-level
+  // TODO: should we make this always available without adapters
+  const setupNodeStubPath = path.join(
+    path.dirname(require.resolve('next/package.json')),
+    'setup-node-env.js'
+  )
+  await pushAsset(
+    sharedNodeAssets,
+    sharedNodeAssetsHashes,
+    path.relative(tracingRoot, setupNodeStubPath),
+    require.resolve('next/dist/build/adapter/setup-node-env.external'),
+    bundler
+  )
+
+  if (bundler !== Bundler.Turbopack) {
+    const { nodeFileTrace } =
+      require('next/dist/compiled/@vercel/nft') as typeof import('next/dist/compiled/@vercel/nft')
+    const { makeIgnoreFn } =
+      require('../collect-build-traces') as typeof import('../collect-build-traces')
+
+    const sharedTraceIgnores = [
+      '**/next/dist/compiled/next-server/**/*.dev.js',
+      '**/next/dist/compiled/webpack/*',
+      '**/node_modules/webpack5/**/*',
+      '**/next/dist/server/lib/route-resolver*',
+      'next/dist/compiled/semver/semver/**/*.js',
+      '**/node_modules/react{,-dom,-dom-server-turbopack}/**/*.development.js',
+      '**/*.d.ts',
+      '**/*.map',
+      '**/next/dist/pages/**/*',
+      '**/node_modules/sharp/**/*',
+      '**/@img/sharp-libvips*/**/*',
+      '**/next/dist/compiled/edge-runtime/**/*',
+      '**/next/dist/server/web/sandbox/**/*',
+      '**/next/dist/server/post-process.js',
+    ]
+    const sharedIgnoreFn = makeIgnoreFn(tracingRoot, sharedTraceIgnores)
+
+    // These are modules that are necessary for bootstrapping node env
+    const necessaryNodeDependencies = [
+      require.resolve('next/dist/server/node-environment'),
+      require.resolve('next/dist/server/require-hook'),
+      require.resolve('next/dist/server/node-polyfill-crypto'),
+      ...Object.values(defaultOverrides).filter((item) => path.extname(item)),
+    ]
+
+    const { fileList, esmFileList } = await nodeFileTrace(
+      necessaryNodeDependencies,
+      {
+        base: tracingRoot,
+        ignore: sharedIgnoreFn,
+      }
+    )
+    esmFileList.forEach((item) => fileList.add(item))
+
+    for (const rootRelativeFilePath of fileList) {
+      await pushAsset(
+        sharedNodeAssets,
+        sharedNodeAssetsHashes,
+        rootRelativeFilePath,
+        path.join(tracingRoot, rootRelativeFilePath),
+        bundler
+      )
+    }
+  }
+
+  if (hasInstrumentationHook) {
+    const { entryHash: instrumentationEntryHash } = await loadNFT(
+      sharedNodeAssets,
+      sharedNodeAssetsHashes,
+      tracingRoot,
+      path.join(distDir, 'server', 'instrumentation.js.nft.json')
+    )
+
+    const fileOutputPath = path.relative(
+      tracingRoot,
+      path.join(distDir, 'server', 'instrumentation.js')
+    )
+    await pushAsset(
+      sharedNodeAssets,
+      sharedNodeAssetsHashes,
+      fileOutputPath,
+      path.join(distDir, 'server', 'instrumentation.js'),
+      bundler,
+      instrumentationEntryHash
+    )
+  }
+
+  // Run after hasInstrumentationHook, which inserts the NFT-provided file hash for .next/server/instrumentation.js
+  for (const file of requiredServerFiles) {
+    // add to shared node assets
+    const filePath = path.join(dir, file)
+    const fileOutputPath = path.relative(tracingRoot, filePath)
+    await pushAsset(
+      sharedNodeAssets,
+      sharedNodeAssetsHashes,
+      fileOutputPath,
+      filePath,
+      bundler
+    )
+  }
+
+  return {
+    sharedNodeAssets,
+    sharedNodeAssetsHashes,
+    pagesSharedNodeAssets,
+    pagesSharedNodeAssetsHashes,
+    appPagesSharedNodeAssets,
+    appPagesSharedNodeAssetsHashes,
+  }
+}
+
+async function pushAsset(
+  assets: Record<string, string>,
+  assetsHashes: Record<string, string>,
+  targetFilePath: string,
+  sourceFilePath: string,
+  bundler: Bundler,
+  hashOverride?: string
+) {
+  if (!(targetFilePath in assets)) {
+    assets[targetFilePath] = sourceFilePath
+    if (bundler === Bundler.Turbopack) {
+      assetsHashes[targetFilePath] =
+        hashOverride ?? (await hashFile(sourceFilePath))
+    }
+  }
+}
+
+async function loadNFT(
+  assets: Record<string, string>,
+  assetsHashes: Record<string, string>,
+  tracingRoot: string,
+  traceFilePath: string
+): Promise<{ entryHash?: string }> {
+  const { files, fileHashes, entryHash } = (await JSON.parse(
+    await fs.readFile(traceFilePath, 'utf8')
+  )) as {
+    files: string[]
+    fileHashes?: string[]
+    entryHash?: string
+  }
+
+  const traceFileDir = path.dirname(traceFilePath)
+  for (let i = 0; i < files.length; i++) {
+    const relativeFile = files[i]
+    const contentHash = fileHashes?.[i]
+    const tracedFilePath = path.join(traceFileDir, relativeFile)
+    const fileOutputPath = path.relative(tracingRoot, tracedFilePath)
+    assets[fileOutputPath] = tracedFilePath
+    if (contentHash) {
+      assetsHashes[fileOutputPath] = contentHash
+    }
+  }
+  return { entryHash }
+}
+
+async function hashFile(filePath: string): Promise<string> {
+  const hash = crypto.createHash('sha256')
+  try {
+    // Try symlink first, since readFile just transparently resolves those (or fails if it's a
+    // directory symlink).
+    const linkTarget = await fs.readlink(filePath)
+    hash.update('link')
+    hash.update(linkTarget)
+  } catch (e: any) {
+    if (e.code === 'EINVAL') {
+      // Not a symlink
+      hash.update('file:')
+      hash.update(await fs.readFile(filePath))
+    } else {
+      throw e
+    }
+  }
+  return hash.digest('hex')
+}
diff --git a/test/production/deterministic-build/adapter-content-hashes.test.ts b/test/production/deterministic-build/adapter-content-hashes.test.ts
new file mode 100644
index 000000000000..ece2fe51b989
--- /dev/null
+++ b/test/production/deterministic-build/adapter-content-hashes.test.ts
@@ -0,0 +1,66 @@
+import { nextTestSetup } from 'e2e-utils'
+import path from 'path'
+import type { NextAdapter } from 'next'
+
+import { FILES } from './files'
+
+// Webpack itself isn't deterministic
+;(process.env.IS_TURBOPACK_TEST ? describe : describe.skip)(
+  'adapter-content-hashes',
+  () => {
+    describe.each([
+      { name: 'standard', files: FILES.standard },
+      { name: 'cache components', files: FILES.cacheComponents },
+    ])('for $name', ({ name, files }) => {
+      const { next } = nextTestSetup({
+        files,
+        env: {
+          NEXT_ADAPTER_PATH: path.join(__dirname, './my-adapter.mjs'),
+        },
+      })
+
+      it('should emit server-side hashes to adapter', async () => {
+        const {
+          repoRoot,
+          outputs,
+        }: Parameters<NextAdapter['onBuildComplete']>[0] = await next.readJSON(
+          'build-complete.json'
+        )
+
+        function validateOutput(output: {
+          runtime?: 'edge' | 'nodejs'
+          filePath: string
+          assets?: Record<string, string>
+          assetsHashes?: Record<string, string>
+        }) {
+          try {
+            expect(output).toBeDefined()
+
+            // TODO ideally we would also provide hashes for edge functions
+            if (output.runtime === 'edge') return
+
+            const { assets, assetsHashes, filePath } = output
+            expect(assets).toBeObject()
+            expect(assets).not.toBeEmpty()
+            expect(assetsHashes).toBeObject()
+            for (const file in assets) {
+              expect(assetsHashes[file]).toBeString()
+            }
+
+            expect(filePath).toBeString()
+            expect(assetsHashes[path.relative(repoRoot, filePath)]).toBeString()
+          } catch (err) {
+            console.error('Validation failed for output:', output)
+            throw err
+          }
+        }
+
+        outputs.pages.forEach(validateOutput)
+        outputs.appPages.forEach(validateOutput)
+        validateOutput(outputs.middleware)
+        outputs.pagesApi.forEach(validateOutput)
+        outputs.appRoutes.forEach(validateOutput)
+      })
+    })
+  }
+)
diff --git a/test/production/deterministic-build/cache-components/next.config.js b/test/production/deterministic-build/cache-components/next.config.js
index b177783b57a3..fb44fca26e73 100644
--- a/test/production/deterministic-build/cache-components/next.config.js
+++ b/test/production/deterministic-build/cache-components/next.config.js
@@ -7,4 +7,5 @@ module.exports = {
     // turbopackModuleIds: 'named',
     // turbopackScopeHoisting: false,
   },
+  adapterPath: process.env.NEXT_ADAPTER_PATH,
 }
diff --git a/test/production/deterministic-build/cache-components/proxy.ts b/test/production/deterministic-build/cache-components/proxy.ts
new file mode 100644
index 000000000000..c3ef772cbdaa
--- /dev/null
+++ b/test/production/deterministic-build/cache-components/proxy.ts
@@ -0,0 +1,9 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function proxy(req: NextRequest) {
+  if (req.nextUrl.toString().endsWith('/proxy')) {
+    return Response.json({ data: 'hello' })
+  }
+
+  return NextResponse.next()
+}
diff --git a/test/production/deterministic-build/deployment-id.test.ts b/test/production/deterministic-build/deployment-id.test.ts
index 31cd918af48e..be5419bf5697 100644
--- a/test/production/deterministic-build/deployment-id.test.ts
+++ b/test/production/deterministic-build/deployment-id.test.ts
@@ -1,4 +1,4 @@
-import { FileRef, NextInstance, nextTestSetup } from 'e2e-utils'
+import { NextInstance, nextTestSetup } from 'e2e-utils'
 import path from 'path'
 import fs from 'fs/promises'
 import { promisify } from 'util'
@@ -7,6 +7,7 @@ import crypto from 'crypto'
 import globOrig from 'glob'
 import { diff } from 'jest-diff'
 const glob = promisify(globOrig)
+import { FILES } from './files'
 
 const IGNORE_CONTENT_NEXT_REGEX = new RegExp(
   [
@@ -180,29 +181,6 @@ async function runTest(
   return { run1, run2 }
 }
 
-const FILES = {
-  standard: {
-    app: new FileRef(path.join(__dirname, 'standard', 'app')),
-    pages: new FileRef(path.join(__dirname, 'standard', 'pages')),
-    public: new FileRef(path.join(__dirname, 'standard', 'public')),
-    'instrumentation.ts': new FileRef(
-      path.join(__dirname, 'standard', 'instrumentation.ts')
-    ),
-    'middleware.ts': new FileRef(
-      path.join(__dirname, 'standard', 'middleware.ts')
-    ),
-    'next.config.js': new FileRef(
-      path.join(__dirname, 'standard', 'next.config.js')
-    ),
-  },
-  cacheComponents: {
-    app: new FileRef(path.join(__dirname, 'cache-components', 'app')),
-    'next.config.js': new FileRef(
-      path.join(__dirname, 'cache-components', 'next.config.js')
-    ),
-  },
-}
-
 // Webpack itself isn't deterministic
 ;(process.env.IS_TURBOPACK_TEST ? describe : describe.skip)(
   'deterministic build - changing deployment id',
diff --git a/test/production/deterministic-build/files.ts b/test/production/deterministic-build/files.ts
new file mode 100644
index 000000000000..29343035d7cd
--- /dev/null
+++ b/test/production/deterministic-build/files.ts
@@ -0,0 +1,28 @@
+import { FileRef } from 'e2e-utils'
+import path from 'path'
+
+export const FILES = {
+  standard: {
+    app: new FileRef(path.join(__dirname, 'standard', 'app')),
+    pages: new FileRef(path.join(__dirname, 'standard', 'pages')),
+    public: new FileRef(path.join(__dirname, 'standard', 'public')),
+    'instrumentation.ts': new FileRef(
+      path.join(__dirname, 'standard', 'instrumentation.ts')
+    ),
+    'middleware.ts': new FileRef(
+      path.join(__dirname, 'standard', 'middleware.ts')
+    ),
+    'next.config.js': new FileRef(
+      path.join(__dirname, 'standard', 'next.config.js')
+    ),
+  },
+  cacheComponents: {
+    app: new FileRef(path.join(__dirname, 'cache-components', 'app')),
+    'next.config.js': new FileRef(
+      path.join(__dirname, 'cache-components', 'next.config.js')
+    ),
+    'proxy.ts': new FileRef(
+      path.join(__dirname, 'cache-components', 'proxy.ts')
+    ),
+  },
+}
diff --git a/test/production/deterministic-build/my-adapter.mjs b/test/production/deterministic-build/my-adapter.mjs
new file mode 100644
index 000000000000..97c5590586a2
--- /dev/null
+++ b/test/production/deterministic-build/my-adapter.mjs
@@ -0,0 +1,9 @@
+import fs from 'fs/promises'
+
+/** @type {import('next').NextAdapter } */
+export default {
+  name: 'deterministic-build',
+  async onBuildComplete(ctx) {
+    await fs.writeFile('build-complete.json', JSON.stringify(ctx, null, 2))
+  },
+}
diff --git a/test/production/deterministic-build/standard/next.config.js b/test/production/deterministic-build/standard/next.config.js
index f31ed39a9735..871db1dab253 100644
--- a/test/production/deterministic-build/standard/next.config.js
+++ b/test/production/deterministic-build/standard/next.config.js
@@ -6,4 +6,5 @@ module.exports = {
     // turbopackModuleIds: 'named',
     // turbopackScopeHoisting: false,
   },
+  adapterPath: process.env.NEXT_ADAPTER_PATH,
 }
diff --git a/turbopack/crates/turbo-tasks-fs/src/lib.rs b/turbopack/crates/turbo-tasks-fs/src/lib.rs
index 7520aa607b08..6cb96168156c 100644
--- a/turbopack/crates/turbo-tasks-fs/src/lib.rs
+++ b/turbopack/crates/turbo-tasks-fs/src/lib.rs
@@ -2448,8 +2448,9 @@ impl FileContent {
     }
 
     #[turbo_tasks::function]
-    pub async fn hash(&self) -> Result<Vc<u64>> {
-        Ok(Vc::cell(hash_xxh3_hash64(self)))
+    pub fn hash(&self, algorithm: HashAlgorithm) -> Vc<RcStr> {
+        // no_hash_salt
+        Vc::cell(RcStr::from(deterministic_hash("", self, algorithm)))
     }
 
     /// Converts this [`FileContent`] into a [`PersistedFileContent`] by cloning.
diff --git a/turbopack/crates/turbopack-core/src/asset.rs b/turbopack/crates/turbopack-core/src/asset.rs
index 1ef3c0073cc2..65cf0e7ecb3f 100644
--- a/turbopack/crates/turbopack-core/src/asset.rs
+++ b/turbopack/crates/turbopack-core/src/asset.rs
@@ -4,7 +4,7 @@ use turbo_tasks::{ResolvedVc, Vc};
 use turbo_tasks_fs::{
     FileContent, FileJsonContent, FileLinesContent, FileSystemPath, LinkContent, LinkType,
 };
-use turbo_tasks_hash::{HashAlgorithm, Xxh3Hash64Hasher};
+use turbo_tasks_hash::{HashAlgorithm, deterministic_hash};
 
 use crate::version::{VersionedAssetContent, VersionedContent};
 
@@ -131,16 +131,13 @@ impl AssetContent {
     }
 
     #[turbo_tasks::function]
-    pub async fn hash(&self) -> Result<Vc<u64>> {
+    pub fn hash(&self, algorithm: HashAlgorithm) -> Vc<RcStr> {
         match self {
-            AssetContent::File(content) => Ok(content.hash()),
-            AssetContent::Redirect { target, link_type } => {
-                use turbo_tasks_hash::DeterministicHash;
-                let mut hasher = Xxh3Hash64Hasher::new();
-                target.deterministic_hash(&mut hasher);
-                link_type.deterministic_hash(&mut hasher);
-                Ok(Vc::cell(hasher.finish()))
-            }
+            AssetContent::File(content) => content.hash(algorithm),
+            AssetContent::Redirect { target, link_type } => Vc::cell(RcStr::from(
+                // no_hash_salt
+                deterministic_hash("", (target, link_type), algorithm),
+            )),
         }
     }
 

From 63cd4233b46c3b3f2561a84ecff7ba240ed45bfc Mon Sep 17 00:00:00 2001
From: Joseph <joseph.chamochumbi@vercel.com>
Date: Tue, 12 May 2026 01:19:03 +0200
Subject: [PATCH 4/5] docs: clarify cacheTag limit - it is per call (#93768)

x-ref: https://vercel.slack.com/archives/C03S8ED1DKM/p1778515581719889
---
 docs/01-app/03-api-reference/04-functions/cacheTag.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/01-app/03-api-reference/04-functions/cacheTag.mdx b/docs/01-app/03-api-reference/04-functions/cacheTag.mdx
index dc65be606b63..9710a30d935d 100644
--- a/docs/01-app/03-api-reference/04-functions/cacheTag.mdx
+++ b/docs/01-app/03-api-reference/04-functions/cacheTag.mdx
@@ -98,7 +98,7 @@ export default async function submit() {
 cacheTag('tag-one', 'tag-two')
 ```
 
-- **Limits**: The max length for a custom tag is 256 characters and the max tag items is 128.
+- **Limits**: A single `cacheTag()` call accepts up to 128 tags, each with a maximum length of 256 characters. Tags longer than 256 characters are skipped, and any tags past the 128th in one call are dropped. Both cases log a console warning.
 
 ## Examples
 

From 56d95137fd6d84f4bc1e5ef2bb31e0136d5fad9c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 11 May 2026 20:01:42 -0400
Subject: [PATCH 5/5] bfcacheId: Opt out of state preservation (#93633)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When `cacheComponents` is enabled, the App Router preserves state across
navigations by rendering inactive routes inside React `<Activity>`
boundaries.

As a default behavior, this is a huge convenience because it lets you
navigate between routes without resetting or losing ephemeral UI state
(scroll position, expand/collapse, in-progress form edits). Previously
the only way to do this was to explicitly track each state with an
external state manager, or hoist it to a parent component.

It's still the often the case that you should be explicitly tracking all
important UI state, anyway, so that it survives a hard refresh of the
app, or the browser window being accidentally closed. For example, forms
draft states should be persisted to a server-side database or local
storage engine. If you're already doing that, then it doesn't matter so
much whether client state is preserved via `<Activity>` boundaries or
not.

For the long tail of ephemeral state that is not tracked, Next.js's
philosophy is that it's a better UX default to preserve as much
emphemeral state as possible. It's easier to model the cases where you
_do_ want state to be reset on navigation as exceptions, compared to the
other way around.

However, this is a significant change compared to the pre-Cache
Components previous behavior of Next.js, and compared to other web
frameworks, and indeed the browser's own native bfcache (which
implements state restoration for history traversal navigations only, not
push/replace).

There's are also lots of existing codebases that may rely on the current
behavior, and may break subtly under these new semantics. Even if this
new default unlocks better UX patterns, we don't want to force everyone
to migrate all their code all at once.

So, this PR introduces a drop-in mechanism for opting out of state
preservation when navigating to a previously visited route.

The API is exposed as `useRouter().bfcacheId`. It's intended to be
passed to a React `key`:

  <form key={useRouter().bfcacheId}>

The id is contextual: read from a layout, you get the layout's id; read
from a page, you get the page's id. It's stable across back/forward
navigations, `router.refresh()`, server actions that call `refresh()`,
and search-param- or hash-only navigations — i.e., any time the
surrounding segment is preserved. It changes when the segment is freshly
created by a push or replace into a different route.

An important detail is that the previous id is restored during a back/
foward navigation. So state preservation will still work if you navigate
via the browser's back button.

Why add this to `useRouter()` instead of giving it its own hook? The
intent is communicate that `bfcacheId` is not considered an idiomatic
pattern — the recommended fix for "I want this state to reset on
navigation" is almost always something else: an explicit reset in a
submit handler, or a key derived from the underlying data (e.g., a draft
id from the server). `useRouter` is the hook where we expose low-level
APIs that are supported but are only recommended for advanced or
exceptional cases. (For example, instead of `router.push()`, you should
almost always use a `<Link>` component instead.)
---
 .../04-functions/use-router.mdx               |  23 +++
 .../client/components/app-router-instance.ts  |   3 +
 .../next/src/client/components/navigation.ts  |  24 ++-
 .../router-reducer/ppr-navigations.ts         | 140 +++++++++++---
 .../components/segment-cache/bfcache.ts       |  24 ++-
 .../lib/app-router-context.shared-runtime.ts  |  19 ++
 .../next/src/shared/lib/app-router-types.ts   |  12 ++
 .../next/src/shared/lib/router/adapters.tsx   |   3 +
 .../app/[group]/[page]/leaf-content.tsx       |  51 ++++++
 .../app/[group]/[page]/page.tsx               |  22 +++
 .../app/[group]/layout.tsx                    |  22 +++
 .../use-router-bfcache-id/app/actions.ts      |   7 +
 .../use-router-bfcache-id/app/layout.tsx      |   9 +
 .../use-router-bfcache-id/app/page.tsx        |  17 ++
 .../components/link-accordion.tsx             |  33 ++++
 .../use-router-bfcache-id/next.config.js      |   8 +
 .../use-router-bfcache-id.test.ts             | 172 ++++++++++++++++++
 17 files changed, 564 insertions(+), 25 deletions(-)
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/leaf-content.tsx
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/page.tsx
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/app/[group]/layout.tsx
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/app/actions.ts
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/app/layout.tsx
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/app/page.tsx
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/components/link-accordion.tsx
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/next.config.js
 create mode 100644 test/e2e/app-dir/use-router-bfcache-id/use-router-bfcache-id.test.ts

diff --git a/docs/01-app/03-api-reference/04-functions/use-router.mdx b/docs/01-app/03-api-reference/04-functions/use-router.mdx
index c85c567fedc4..92a7060c6690 100644
--- a/docs/01-app/03-api-reference/04-functions/use-router.mdx
+++ b/docs/01-app/03-api-reference/04-functions/use-router.mdx
@@ -47,6 +47,7 @@ export default function Page() {
 - `router.prefetch(href: string, options?: { onInvalidate?: () => void })`: [Prefetch](/docs/app/getting-started/linking-and-navigating#prefetching) the provided route for faster client-side transitions. The optional `onInvalidate` callback is called when the [prefetched data becomes stale](/docs/app/guides/prefetching#extending-or-ejecting-link).
 - `router.back()`: Navigate back to the previous route in the browser’s history stack.
 - `router.forward()`: Navigate forwards to the next page in the browser’s history stack.
+- `router.bfcacheId`: An opaque string identifier scoped to the current route segment. It changes when the surrounding segment is freshly created by a push or replace navigation, and stays the same for back/forward navigations, `router.refresh()`, and search-param- or hash-only navigations. See [`bfcacheId`](#bfcacheid) below for details.
 
 > **Good to know**:
 >
@@ -156,6 +157,28 @@ export default function Page() {
 }
 ```
 
+### `bfcacheId`
+
+`router.bfcacheId` is an opaque string identifier scoped to the current route segment. It changes when the surrounding segment is freshly created by a push or replace navigation, and stays the same for back/forward navigations, `router.refresh()`, and search-param- or hash-only navigations.
+
+The recommended use is to pass it as a React `key` to opt out of state preservation on fresh navigations, while still restoring it during a back/forward navigation:
+
+```tsx filename="app/example/page.tsx"
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function Page() {
+  const { bfcacheId } = useRouter()
+  return <form key={bfcacheId}>{/* ... */}</form>
+}
+```
+
+When `cacheComponents` is enabled, the App Router preserves Client Component state across navigations using React `<Activity>`. Keying a component on `bfcacheId` resets it on each fresh navigation while still preserving its state across browser back/forward navigations.
+
+> **Good to know**:
+> Instead of `bfcacheId`, prefer resetting state explicitly in an event handler (for example, `onSubmit`) or deriving a key from your data (for example, a draft id from the server). Use `bfcacheId` only as a last resort, like when migrating an existing codebase.
+
 ## Version History
 
 | Version   | Changes                                                           |
diff --git a/packages/next/src/client/components/app-router-instance.ts b/packages/next/src/client/components/app-router-instance.ts
index c62f20d84de7..87047119d0b7 100644
--- a/packages/next/src/client/components/app-router-instance.ts
+++ b/packages/next/src/client/components/app-router-instance.ts
@@ -495,6 +495,9 @@ export const publicAppRouterInstance: AppRouterInstance = {
       })
     }
   },
+  // Default value. Each route segment provides its own value at runtime. Refer
+  // to `useRouter()`.
+  bfcacheId: '0',
 }
 
 // Conditionally add experimental_gesturePush when gestureTransition is enabled
diff --git a/packages/next/src/client/components/navigation.ts b/packages/next/src/client/components/navigation.ts
index f7eb557837eb..aa9ee41db300 100644
--- a/packages/next/src/client/components/navigation.ts
+++ b/packages/next/src/client/components/navigation.ts
@@ -179,7 +179,29 @@ export function useRouter(): AppRouterInstance {
     throw new Error('invariant expected app router to be mounted')
   }
 
-  return router
+  // Read the bfcacheId of the closest CacheNode and merge it into the
+  // returned router instance. This is contextual: callers in a shared
+  // layout get the layout's id; callers in a leaf segment get the leaf's.
+  // The id is stored on the CacheNode as a number and materialized as a
+  // string here. The format mirrors React's `useId()` (e.g. `_r_0_`) with
+  // a `b` prefix, so the id can be safely concatenated with other keys
+  // without collision.
+  const layout = useContext(LayoutRouterContext)
+  const bfcacheIdNumber = layout?.parentCacheNode.bfcacheId ?? 0
+  return useMemo<AppRouterInstance>(
+    () => ({
+      back: router.back,
+      forward: router.forward,
+      refresh: router.refresh,
+      hmrRefresh: router.hmrRefresh,
+      push: router.push,
+      replace: router.replace,
+      prefetch: router.prefetch,
+      experimental_gesturePush: router.experimental_gesturePush,
+      bfcacheId: '_b_' + bfcacheIdNumber + '_',
+    }),
+    [router, bfcacheIdNumber]
+  )
 }
 
 /**
diff --git a/packages/next/src/client/components/router-reducer/ppr-navigations.ts b/packages/next/src/client/components/router-reducer/ppr-navigations.ts
index c58235bee616..3350ea1736fd 100644
--- a/packages/next/src/client/components/router-reducer/ppr-navigations.ts
+++ b/packages/next/src/client/components/router-reducer/ppr-navigations.ts
@@ -245,10 +245,14 @@ function updateCacheNodeOnNavigation(
   parentRefreshState: RefreshState | null,
   accumulation: NavigationRequestAccumulation
 ): NavigationTask | null {
-  // Check if this segment matches the one in the previous route.
+  // Check if this segment matches the one in the previous route. A
+  // search-param-only difference at a page segment falls through to the
+  // matched branch — the CacheNode is rebuilt (so data refetches), but the
+  // bfcacheId carries forward as if the segment had matched.
   const oldSegment = oldRouterState[0]
   const newSegment = createSegmentFromRouteTree(newRouteTree)
-  if (!matchSegment(newSegment, oldSegment)) {
+  const segmentMatchKind = compareSegments(newSegment, oldSegment)
+  if (segmentMatchKind === SegmentMatchKind.Change) {
     // This segment does not match the previous route. We're now entering the
     // new part of the target route. Switch to the "create" path.
     if (
@@ -347,7 +351,11 @@ function updateCacheNodeOnNavigation(
     oldCacheNode !== undefined &&
     !shouldRefreshDynamicData &&
     // During a same-page navigation, we always refetch the page segments
-    !(isLeafSegment && isSamePageNavigation)
+    !(isLeafSegment && isSamePageNavigation) &&
+    // A search-param-only change is treated as a refresh of the page segment.
+    // The internal cache key of the data is different, but the identity of
+    // the node in the route tree is the same.
+    segmentMatchKind !== SegmentMatchKind.SearchParamOnlyChange
   ) {
     // Reuse the existing CacheNode
     const dropPrefetchRsc = false
@@ -364,18 +372,34 @@ function updateCacheNodeOnNavigation(
       newMetadataVaryPath,
       seedHead,
       freshness,
-      seedDynamicStaleAt
+      seedDynamicStaleAt,
+      // Carry forward the existing bfcacheId when there's a prior CacheNode:
+      // even though the data is being refreshed, the state identity of the
+      // route hasn't changed. Otherwise (no prior node) mint a fresh one.
+      oldCacheNode !== undefined
+        ? oldCacheNode.bfcacheId
+        : generateBFCacheId(freshness)
     )
     newCacheNode = result.cacheNode
     needsDynamicRequest = result.needsDynamicRequest
 
-    // Carry forward the old node's scrollRef. This preserves scroll
-    // intent when a prior navigation's cache node is replaced by a
-    // refresh before the scroll handler has had a chance to fire —
-    // e.g. when router.push() and router.refresh() are called in the
-    // same startTransition batch.
-    if (oldCacheNode !== undefined) {
-      newCacheNode.scrollRef = oldCacheNode.scrollRef
+    // Scroll handling
+    if (
+      isLeafSegment &&
+      segmentMatchKind === SegmentMatchKind.SearchParamOnlyChange
+    ) {
+      // Special case: A search param change mostly acts the same as a
+      // refresh, except it does trigger a scroll.
+      accumulateScrollRef(freshness, newCacheNode, accumulation)
+    } else {
+      // Normal case: This is a refresh of an existing segment. Carry forward
+      // the old node's scrollRef. This preserves scroll intent when a prior
+      // navigation's CacheNode is replaced by a refresh before the scroll
+      // handler has had a chance to fire — e.g. when router.push() and
+      // router.refresh() are called in the same startTransition batch.
+      if (oldCacheNode !== undefined) {
+        newCacheNode.scrollRef = oldCacheNode.scrollRef
+      }
     }
   }
 
@@ -636,7 +660,10 @@ function createCacheNodeOnNavigation(
     newMetadataVaryPath,
     seedHead,
     freshness,
-    seedDynamicStaleAt
+    seedDynamicStaleAt,
+    // This segment was not part of the previous route, so mint a fresh
+    // bfcacheId.
+    generateBFCacheId(freshness)
   )
   const newCacheNode = result.cacheNode
   const needsDynamicRequest = result.needsDynamicRequest
@@ -879,11 +906,14 @@ function reuseSharedCacheNode(
   // Clone the CacheNode that was already present in the previous tree.
   // Carry forward the scrollRef so scroll intent from a prior navigation
   // survives tree rebuilds (e.g. push + refresh in the same batch).
+  // Carry forward the bfcacheId so shared-layout segments retain stable
+  // identity across navigations.
   return createCacheNode(
     existingCacheNode.rsc,
     dropPrefetchRsc ? null : existingCacheNode.prefetchRsc,
     existingCacheNode.head,
     dropPrefetchRsc ? null : existingCacheNode.prefetchHead,
+    existingCacheNode.bfcacheId,
     existingCacheNode.scrollRef
   )
 }
@@ -895,7 +925,8 @@ function createCacheNodeForSegment(
   metadataVaryPath: PageVaryPath | null,
   seedHead: HeadData | null,
   freshness: FreshnessPolicy,
-  dynamicStaleAt: number
+  dynamicStaleAt: number,
+  bfcacheId: number
 ): { cacheNode: CacheNode; needsDynamicRequest: boolean } {
   // Construct a new CacheNode using data from the BFCache, the client's
   // Segment Cache, or seeded from a server response.
@@ -927,12 +958,17 @@ function createCacheNodeForSegment(
         tree.varyPath
       )
       if (bfcacheEntry !== null) {
+        // A regular navigation that happens to read cached data is still a
+        // fresh navigation, so we use the caller-supplied bfcacheId — the
+        // BFCacheEntry's id is only restored on history-traversal
+        // navigations.
         return {
           cacheNode: createCacheNode(
             bfcacheEntry.rsc,
             bfcacheEntry.prefetchRsc,
             bfcacheEntry.head,
-            bfcacheEntry.prefetchHead
+            bfcacheEntry.prefetchHead,
+            bfcacheId
           ),
           needsDynamicRequest: false,
         }
@@ -967,7 +1003,8 @@ function createCacheNodeForSegment(
         prefetchRsc,
         head,
         prefetchHead,
-        dynamicStaleAt
+        dynamicStaleAt,
+        bfcacheId
       )
       if (isPage && metadataVaryPath !== null) {
         writeHeadToBFCache(
@@ -975,11 +1012,18 @@ function createCacheNodeForSegment(
           metadataVaryPath,
           head,
           prefetchHead,
-          dynamicStaleAt
+          dynamicStaleAt,
+          bfcacheId
         )
       }
       return {
-        cacheNode: createCacheNode(rsc, prefetchRsc, head, prefetchHead),
+        cacheNode: createCacheNode(
+          rsc,
+          prefetchRsc,
+          head,
+          prefetchHead,
+          bfcacheId
+        ),
         needsDynamicRequest: false,
       }
     }
@@ -1000,12 +1044,16 @@ function createCacheNodeForSegment(
         const oldRscDidResolve =
           !isDeferredRsc(oldRsc) || oldRsc.status !== 'pending'
         const dropPrefetchRsc = oldRscDidResolve
+        // Restore the bfcacheId from the cached entry so that back/forward
+        // navigations preserve the original id, regardless of whether
+        // `cacheComponents` Activity preservation is enabled.
         return {
           cacheNode: createCacheNode(
             bfcacheEntry.rsc,
             dropPrefetchRsc ? null : bfcacheEntry.prefetchRsc,
             bfcacheEntry.head,
-            dropPrefetchRsc ? null : bfcacheEntry.prefetchHead
+            dropPrefetchRsc ? null : bfcacheEntry.prefetchHead,
+            bfcacheEntry.bfcacheId
           ),
           needsDynamicRequest: false,
         }
@@ -1208,7 +1256,8 @@ function createCacheNodeForSegment(
       prefetchRsc,
       head,
       prefetchHead,
-      dynamicStaleAt
+      dynamicStaleAt,
+      bfcacheId
     )
     if (isPage && metadataVaryPath !== null) {
       writeHeadToBFCache(
@@ -1216,13 +1265,14 @@ function createCacheNodeForSegment(
         metadataVaryPath,
         head,
         prefetchHead,
-        dynamicStaleAt
+        dynamicStaleAt,
+        bfcacheId
       )
     }
   }
 
   return {
-    cacheNode: createCacheNode(rsc, prefetchRsc, head, prefetchHead),
+    cacheNode: createCacheNode(rsc, prefetchRsc, head, prefetchHead, bfcacheId),
     // TODO: We should store this field on the CacheNode itself. I think we can
     // probably unify NavigationTask, CacheNode, and DeferredRsc into a
     // single type. Or at least CacheNode and DeferredRsc.
@@ -1236,6 +1286,7 @@ function createCacheNode(
   prefetchRsc: React.ReactNode | null,
   head: React.ReactNode | null,
   prefetchHead: HeadData | null,
+  bfcacheId: number,
   scrollRef: ScrollRef | null = null
 ): CacheNode {
   return {
@@ -1245,7 +1296,54 @@ function createCacheNode(
     prefetchHead,
     slots: null,
     scrollRef,
+    bfcacheId,
+  }
+}
+
+// Globally-unique counter for fresh bfcacheIds. Incremented every time a new
+// CacheNode is created on the client. The id surfaces to user code as a
+// string via `useRouter().bfcacheId`.
+let nextBFCacheId = 0
+
+function generateBFCacheId(freshness: FreshnessPolicy): number {
+  // Server-side rendering and the initial client-side hydration tree both
+  // use a fixed sentinel so they reconcile cleanly across hydration. The
+  // counter only advances on real client-side navigations after hydration.
+  if (typeof window === 'undefined') return 0
+  if (freshness === FreshnessPolicy.Hydration) return 0
+  return ++nextBFCacheId
+}
+
+const enum SegmentMatchKind {
+  // Two segments are equivalent: the CacheNode can be reused as-is.
+  Match,
+  // The segments differ in the parts that determine the route (segment kind,
+  // dynamic param value, etc.). The CacheNode must be created fresh.
+  Change,
+  // Two page segments differ only in their search params. Conceptually this
+  // is a refresh of the current page rather than a navigation to a new
+  // route — search params don't contribute to the LayoutRouter state key,
+  // and they shouldn't change the bfcacheId either. The CacheNode is rebuilt
+  // (so data refetches) but the bfcacheId carries forward.
+  SearchParamOnlyChange,
+}
+
+function compareSegments(
+  newSegment: Segment,
+  oldSegment: Segment
+): SegmentMatchKind {
+  if (matchSegment(newSegment, oldSegment)) {
+    return SegmentMatchKind.Match
+  }
+  if (
+    typeof newSegment === 'string' &&
+    typeof oldSegment === 'string' &&
+    newSegment.startsWith(PAGE_SEGMENT_KEY) &&
+    oldSegment.startsWith(PAGE_SEGMENT_KEY)
+  ) {
+    return SegmentMatchKind.SearchParamOnlyChange
   }
+  return SegmentMatchKind.Change
 }
 
 // Represents whether the previuos navigation resulted in a route tree mismatch.
diff --git a/packages/next/src/client/components/segment-cache/bfcache.ts b/packages/next/src/client/components/segment-cache/bfcache.ts
index 4daa89728359..5154f427deb5 100644
--- a/packages/next/src/client/components/segment-cache/bfcache.ts
+++ b/packages/next/src/client/components/segment-cache/bfcache.ts
@@ -34,6 +34,11 @@ export type BFCacheEntry = {
   head: React.ReactNode | null
   prefetchHead: React.ReactNode | null
 
+  // The bfcacheId of the CacheNode that wrote this entry. Restored on
+  // history-traversal navigations so that `useRouter().bfcacheId` is stable
+  // across back/forward, even without `cacheComponents` Activity preservation.
+  bfcacheId: number
+
   ref: UnknownMapEntry | null
   size: number
   // The time at which this data was received. Used to compute the stale time
@@ -64,7 +69,8 @@ export function writeToBFCache(
   prefetchRsc: React.ReactNode,
   head: React.ReactNode,
   prefetchHead: React.ReactNode,
-  dynamicStaleAt: number
+  dynamicStaleAt: number,
+  bfcacheId: number
 ): void {
   if (typeof window === 'undefined') {
     return
@@ -79,6 +85,8 @@ export function writeToBFCache(
     head,
     prefetchHead,
 
+    bfcacheId,
+
     ref: null,
     // TODO: This is just a heuristic. Getting the actual size of the segment
     // isn't feasible because it's part of a larger streaming response. The
@@ -104,10 +112,20 @@ export function writeHeadToBFCache(
   varyPath: SegmentVaryPath,
   head: React.ReactNode,
   prefetchHead: React.ReactNode,
-  dynamicStaleAt: number
+  dynamicStaleAt: number,
+  bfcacheId: number
 ): void {
   // Read the special "segment" that represents the head data.
-  writeToBFCache(now, varyPath, head, prefetchHead, null, null, dynamicStaleAt)
+  writeToBFCache(
+    now,
+    varyPath,
+    head,
+    prefetchHead,
+    null,
+    null,
+    dynamicStaleAt,
+    bfcacheId
+  )
 }
 
 /**
diff --git a/packages/next/src/shared/lib/app-router-context.shared-runtime.ts b/packages/next/src/shared/lib/app-router-context.shared-runtime.ts
index c7476bc0daa4..889bf3cc1dc6 100644
--- a/packages/next/src/shared/lib/app-router-context.shared-runtime.ts
+++ b/packages/next/src/shared/lib/app-router-context.shared-runtime.ts
@@ -68,6 +68,25 @@ export interface AppRouterInstance {
    * @experimental
    */
   experimental_gesturePush?(href: string, options?: NavigateOptions): void
+  /**
+   * An opaque string identifier scoped to the current route segment.
+   *
+   * Changes when the surrounding segment is freshly created by a push or
+   * replace navigation. Stays the same for back/forward navigations,
+   * `router.refresh()`, and search-param/hash-only changes.
+   *
+   * Intended to be passed to a React `key` to opt out of state preservation
+   * on fresh navigations:
+   *
+   * ```tsx
+   * <form key={useRouter().bfcacheId}>
+   * ```
+   *
+   * In most cases, prefer resetting state explicitly in an event handler, or
+   * deriving a key from your data (e.g. a draft id from the server). Use
+   * `bfcacheId` only when those patterns aren't a fit.
+   */
+  bfcacheId: string
 }
 
 export const AppRouterContext = React.createContext<AppRouterInstance | null>(
diff --git a/packages/next/src/shared/lib/app-router-types.ts b/packages/next/src/shared/lib/app-router-types.ts
index 8588dc966aeb..587bd3e8b864 100644
--- a/packages/next/src/shared/lib/app-router-types.ts
+++ b/packages/next/src/shared/lib/app-router-types.ts
@@ -60,6 +60,18 @@ export type CacheNode = {
    * layout segment).
    */
   scrollRef: ScrollRef | null
+
+  /**
+   * Globally-unique identifier minted from a monotonic counter when the
+   * CacheNode is freshly created. Surfaced to user code as a string via
+   * `useRouter().bfcacheId` and intended to be used as a React `key` to
+   * opt out of Activity-based state preservation on fresh navigations.
+   *
+   * Preserved when the CacheNode is reused (shared layouts, refresh,
+   * search/hash-only navigations) or restored from the BFCache during a
+   * back/forward navigation.
+   */
+  bfcacheId: number
 }
 
 /**
diff --git a/packages/next/src/shared/lib/router/adapters.tsx b/packages/next/src/shared/lib/router/adapters.tsx
index cc3e34b3dfd0..0c6869430504 100644
--- a/packages/next/src/shared/lib/router/adapters.tsx
+++ b/packages/next/src/shared/lib/router/adapters.tsx
@@ -32,6 +32,9 @@ export function adaptForAppRouterInstance(
     prefetch(href) {
       void pagesRouter.prefetch(href)
     },
+    // The bfcacheId concept is App Router-only. Surfaced as a stable
+    // placeholder so consumers using this adapter don't crash.
+    bfcacheId: '0',
   }
 }
 
diff --git a/test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/leaf-content.tsx b/test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/leaf-content.tsx
new file mode 100644
index 000000000000..70db17eb8061
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/leaf-content.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { LinkAccordion } from '../../../components/link-accordion'
+import { refreshAction } from '../../actions'
+
+export function DynamicRenderCounterClient({ uuid }: { uuid: string }) {
+  // Counts how many times this component has received a new uuid from the
+  // server. The count lives in React state, so it's preserved when the
+  // bfcacheId is stable across navigations and reset when the segment is
+  // recreated. Useful as a visual signal that the dynamic part re-ran.
+  const [count, setCount] = useState(0)
+  const [prevUuid, setPrevUuid] = useState(uuid)
+  if (prevUuid !== uuid) {
+    setPrevUuid(uuid)
+    setCount(count + 1)
+  }
+  return <p data-testid="dynamic-render-counter">dynamic renders: {count}</p>
+}
+
+export function LeafContent() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const { bfcacheId } = router
+  const search = searchParams.toString()
+  return (
+    <>
+      <h1 data-testid="pathname">{pathname}</h1>
+      <span data-testid="search" data-value={search}>
+        {search}
+      </span>
+      <form key={bfcacheId}>
+        <input data-testid="leaf-input" defaultValue="" />
+      </form>
+      <LinkAccordion href={`${pathname}?q=2`}>same page (?q=2)</LinkAccordion>
+      <LinkAccordion href={`${pathname}#section`}>
+        same page (#section)
+      </LinkAccordion>
+      <button data-testid="refresh" onClick={() => router.refresh()}>
+        refresh
+      </button>
+      <form action={refreshAction}>
+        <button data-testid="server-action-refresh" type="submit">
+          server action refresh
+        </button>
+      </form>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/page.tsx b/test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/page.tsx
new file mode 100644
index 000000000000..1913c607d545
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/app/[group]/[page]/page.tsx
@@ -0,0 +1,22 @@
+import { Suspense } from 'react'
+import { connection } from 'next/server'
+import { DynamicRenderCounterClient, LeafContent } from './leaf-content'
+
+async function DynamicRenderCounter() {
+  // Renders a count of the number of times the client receives new dynamic data
+  // from the server. The count is computed on the client and stored in React
+  // state, so it gets reset if the state of the tree is reset.
+  await connection()
+  return <DynamicRenderCounterClient uuid={crypto.randomUUID()} />
+}
+
+export default function LeafPage() {
+  return (
+    <section>
+      <Suspense fallback={null}>
+        <DynamicRenderCounter />
+      </Suspense>
+      <LeafContent />
+    </section>
+  )
+}
diff --git a/test/e2e/app-dir/use-router-bfcache-id/app/[group]/layout.tsx b/test/e2e/app-dir/use-router-bfcache-id/app/[group]/layout.tsx
new file mode 100644
index 000000000000..f4030a37816b
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/app/[group]/layout.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { ReactNode, Suspense } from 'react'
+import { LinkAccordion } from '../../components/link-accordion'
+
+export default function GroupLayout({ children }: { children: ReactNode }) {
+  const { bfcacheId } = useRouter()
+  return (
+    <div>
+      <nav>
+        <LinkAccordion href="/x/1">/x/1</LinkAccordion>
+        <LinkAccordion href="/x/2">/x/2</LinkAccordion>
+        <LinkAccordion href="/y/1">/y/1</LinkAccordion>
+      </nav>
+      <form key={bfcacheId}>
+        <input data-testid="layout-input" defaultValue="" />
+      </form>
+      <Suspense fallback={null}>{children}</Suspense>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/use-router-bfcache-id/app/actions.ts b/test/e2e/app-dir/use-router-bfcache-id/app/actions.ts
new file mode 100644
index 000000000000..77a5ae6a36b8
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/app/actions.ts
@@ -0,0 +1,7 @@
+'use server'
+
+import { refresh } from 'next/cache'
+
+export async function refreshAction() {
+  refresh()
+}
diff --git a/test/e2e/app-dir/use-router-bfcache-id/app/layout.tsx b/test/e2e/app-dir/use-router-bfcache-id/app/layout.tsx
new file mode 100644
index 000000000000..716a8db36f52
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/app/layout.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/use-router-bfcache-id/app/page.tsx b/test/e2e/app-dir/use-router-bfcache-id/app/page.tsx
new file mode 100644
index 000000000000..a6635e4ce9e6
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/app/page.tsx
@@ -0,0 +1,17 @@
+import { LinkAccordion } from '../components/link-accordion'
+
+export default function Page() {
+  return (
+    <ul>
+      <li>
+        <LinkAccordion href="/x/1">/x/1</LinkAccordion>
+      </li>
+      <li>
+        <LinkAccordion href="/x/2">/x/2</LinkAccordion>
+      </li>
+      <li>
+        <LinkAccordion href="/y/1">/y/1</LinkAccordion>
+      </li>
+    </ul>
+  )
+}
diff --git a/test/e2e/app-dir/use-router-bfcache-id/components/link-accordion.tsx b/test/e2e/app-dir/use-router-bfcache-id/components/link-accordion.tsx
new file mode 100644
index 000000000000..fd8f6781732e
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/components/link-accordion.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import Link, { LinkProps } from 'next/link'
+import { useState } from 'react'
+
+export function LinkAccordion({
+  href,
+  children,
+  prefetch,
+}: {
+  href: string
+  children: React.ReactNode
+  prefetch?: LinkProps['prefetch']
+}) {
+  const [isVisible, setIsVisible] = useState(false)
+  return (
+    <>
+      <input
+        type="checkbox"
+        checked={isVisible}
+        onChange={() => setIsVisible(!isVisible)}
+        data-link-accordion={href}
+      />
+      {isVisible ? (
+        <Link href={href} prefetch={prefetch}>
+          {children}
+        </Link>
+      ) : (
+        `${children} (link is hidden)`
+      )}
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/use-router-bfcache-id/next.config.js b/test/e2e/app-dir/use-router-bfcache-id/next.config.js
new file mode 100644
index 000000000000..e64bae22d658
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/next.config.js
@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  cacheComponents: true,
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/use-router-bfcache-id/use-router-bfcache-id.test.ts b/test/e2e/app-dir/use-router-bfcache-id/use-router-bfcache-id.test.ts
new file mode 100644
index 000000000000..f82e478eda81
--- /dev/null
+++ b/test/e2e/app-dir/use-router-bfcache-id/use-router-bfcache-id.test.ts
@@ -0,0 +1,172 @@
+import { nextTestSetup } from 'e2e-utils'
+import type * as Playwright from 'playwright'
+import { createRouterAct } from 'router-act'
+
+describe('use-router-bfcache-id', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  async function setup(initialPath: string) {
+    let page: Playwright.Page
+    const browser = await next.browser(initialPath, {
+      beforePageLoad(p: Playwright.Page) {
+        page = p
+      },
+    })
+    const act = createRouterAct(page!)
+    return { browser, act }
+  }
+
+  it('preserves leaf form state on browser back navigation', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="leaf-input"]').type('hello')
+
+    await act(async () => {
+      await browser.elementByCss('input[data-link-accordion="/x/2"]').click()
+      await browser.elementByCss('a[href="/x/2"]').click()
+    })
+
+    await browser.back()
+    expect(await browser.elementByCss('[data-testid="pathname"]').text()).toBe(
+      '/x/1'
+    )
+    expect(
+      await browser.elementByCss('[data-testid="leaf-input"]').getValue()
+    ).toBe('hello')
+  })
+
+  it('resets leaf form state when re-entering a route via fresh push', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="leaf-input"]').type('hello')
+
+    await act(async () => {
+      await browser.elementByCss('input[data-link-accordion="/x/2"]').click()
+      await browser.elementByCss('a[href="/x/2"]').click()
+    })
+
+    // Navigate back to /x/1 via a fresh push (not the browser back button).
+    await act(async () => {
+      await browser.elementByCss('input[data-link-accordion="/x/1"]').click()
+      await browser.elementByCss('a[href="/x/1"]').click()
+    })
+
+    expect(
+      await browser.elementByCss('[data-testid="leaf-input"]').getValue()
+    ).toBe('')
+  })
+
+  it('preserves shared layout state across sibling leaf navigations', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="layout-input"]').type('layout')
+
+    await act(async () => {
+      await browser.elementByCss('input[data-link-accordion="/x/2"]').click()
+      await browser.elementByCss('a[href="/x/2"]').click()
+    })
+
+    // The [group] layout is shared across /x/1 and /x/2, so its form state
+    // survives the leaf navigation.
+    expect(
+      await browser.elementByCss('[data-testid="layout-input"]').getValue()
+    ).toBe('layout')
+  })
+
+  it('resets shared layout state when navigating across groups', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="layout-input"]').type('layout')
+
+    await act(async () => {
+      await browser.elementByCss('input[data-link-accordion="/y/1"]').click()
+      await browser.elementByCss('a[href="/y/1"]').click()
+    })
+
+    // /y/1 and /x/1 don't share the [group] layout — the form is mounted
+    // fresh and its state is reset.
+    expect(
+      await browser.elementByCss('[data-testid="layout-input"]').getValue()
+    ).toBe('')
+  })
+
+  it('preserves form state across search-param navigation', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="leaf-input"]').type('hello')
+
+    await act(async () => {
+      await browser
+        .elementByCss('input[data-link-accordion="/x/1?q=2"]')
+        .click()
+      await browser.elementByCss('a[href="/x/1?q=2"]').click()
+    })
+
+    expect(
+      await browser.elementByCss('[data-testid="search"][data-value="q=2"]')
+    ).toBeDefined()
+    expect(
+      await browser.elementByCss('[data-testid="leaf-input"]').getValue()
+    ).toBe('hello')
+  })
+
+  it('preserves form state across router.refresh()', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="leaf-input"]').type('hello')
+
+    await act(async () => {
+      await browser.elementByCss('[data-testid="refresh"]').click()
+    })
+
+    expect(
+      await browser.elementByCss('[data-testid="leaf-input"]').getValue()
+    ).toBe('hello')
+  })
+
+  it('preserves form state when returning to a search-param URL via browser back', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="leaf-input"]').type('hello')
+
+    await act(async () => {
+      await browser
+        .elementByCss('input[data-link-accordion="/x/1?q=2"]')
+        .click()
+      await browser.elementByCss('a[href="/x/1?q=2"]').click()
+    })
+
+    expect(
+      await browser.elementByCss('[data-testid="search"][data-value="q=2"]')
+    ).toBeDefined()
+    expect(
+      await browser.elementByCss('[data-testid="leaf-input"]').getValue()
+    ).toBe('hello')
+
+    await act(async () => {
+      await browser.elementByCss('input[data-link-accordion="/x/2"]').click()
+      await browser.elementByCss('a[href="/x/2"]').click()
+    })
+
+    await browser.back()
+    expect(await browser.elementByCss('[data-testid="pathname"]').text()).toBe(
+      '/x/1'
+    )
+    expect(
+      await browser.elementByCss('[data-testid="search"][data-value="q=2"]')
+    ).toBeDefined()
+    expect(
+      await browser.elementByCss('[data-testid="leaf-input"]').getValue()
+    ).toBe('hello')
+  })
+
+  it('preserves form state across a server action that calls refresh()', async () => {
+    const { browser, act } = await setup('/x/1')
+    await browser.elementByCss('[data-testid="leaf-input"]').type('hello')
+
+    await act(async () => {
+      await browser
+        .elementByCss('[data-testid="server-action-refresh"]')
+        .click()
+    })
+
+    expect(
+      await browser.elementByCss('[data-testid="leaf-input"]').getValue()
+    ).toBe('hello')
+  })
+})