Repository: vercel/next.js
Pull request: Tweaks to blocking route error message

Makes it more clear that `<Suspense>` and "use cache" are separate approaches for fixing the error, not requirements.

<img width="969" height="711" alt="Screenshot 2025-10-21 at 3 09 57 PM" src="https://github.com/user-attachments/assets/34bd2efc-9fee-4aba-82eb-6b395663d765" />


Changed files:
filename: packages/next/src/next-devtools/dev-overlay/container/errors.tsx
patch: @@ -67,22 +67,28 @@ function BlockingPageLoadErrorDescription() {
         experience. Next.js uses this error to ensure your app loads instantly
         on every navigation.
       </p>
-      <p>To fix this, you can:</p>
-      <ul>
-        <li>
-          Wrap the component in a {'<Suspense>'} boundary. This allows Next.js
-          to stream its contents to the user as soon as it's ready, without
-          blocking the rest of the app.
-        </li>
-        <li>
+      <h4>To fix this, you can either:</h4>
+      <p className="nextjs__blocking_page_load_error_fix_option">
+        <strong>Wrap the component in a {'<Suspense>'} boundary.</strong> 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>). This allows Next.js to statically prerender
-          the component as part of the HTML document, so it's instantly visible
-          to the user. Note that request-specific information &mdash; such as
-          params, cookies, and headers &mdash; is not available during static
-          prerendering.
-        </li>
-      </ul>
+          <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>
+        Note that request-specific information &mdash; such as params, cookies,
+        and headers &mdash; is not available during static prerendering, so must
+        be wrapped in {'<Suspense>'}.
+      </p>
       <p>
         Learn more:{' '}
         <a href="https://nextjs.org/docs/messages/blocking-route">
@@ -400,4 +406,10 @@ export const styles = `
   .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);
+  }
 `

filename: test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts
patch: @@ -103,10 +103,15 @@ describe('Cache Components Dev Errors', () => {
 
      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.
 
-     To fix this, you can:
+     To fix this, you can either:
 
      Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-     Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+     or
+
+     Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+     Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
      Learn more: https://nextjs.org/docs/messages/blocking-route",
        "environmentLabel": "Server",

filename: test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts
patch: @@ -56,10 +56,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -80,10 +85,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -107,10 +117,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -131,10 +146,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -158,10 +178,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -182,10 +207,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -213,10 +243,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -237,10 +272,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -264,10 +304,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -288,10 +333,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -315,10 +365,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -339,10 +394,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -366,10 +426,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -390,10 +455,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -417,10 +487,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -441,10 +516,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -468,10 +548,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",
@@ -492,10 +577,15 @@ describe('Cache Components Fallback Validation', () => {
 
        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.
 
-       To fix this, you can:
+       To fix this, you can either:
 
        Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+       or
+
+       Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+       Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
        Learn more: https://nextjs.org/docs/messages/blocking-route",
          "environmentLabel": "Server",

filename: test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts
patch: @@ -160,10 +160,15 @@ describe('Cache Components Errors', () => {
 
            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.
 
-           To fix this, you can:
+           To fix this, you can either:
 
            Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+           or
+
+           Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+           Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
            Learn more: https://nextjs.org/docs/messages/blocking-route",
              "environmentLabel": "Server",
@@ -564,10 +569,15 @@ describe('Cache Components Errors', () => {
 
              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.
 
-             To fix this, you can:
+             To fix this, you can either:
 
              Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+             or
+
+             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+             Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
              Learn more: https://nextjs.org/docs/messages/blocking-route",
                  "environmentLabel": "Server",
@@ -587,10 +597,15 @@ describe('Cache Components Errors', () => {
 
              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.
 
-             To fix this, you can:
+             To fix this, you can either:
 
              Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+             or
+
+             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+             Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
              Learn more: https://nextjs.org/docs/messages/blocking-route",
                  "environmentLabel": "Server",
@@ -615,10 +630,15 @@ describe('Cache Components Errors', () => {
 
              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.
 
-             To fix this, you can:
+             To fix this, you can either:
 
              Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+             or
+
+             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+             Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
              Learn more: https://nextjs.org/docs/messages/blocking-route",
                  "environmentLabel": "Server",
@@ -638,10 +658,15 @@ describe('Cache Components Errors', () => {
 
              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.
 
-             To fix this, you can:
+             To fix this, you can either:
 
              Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+             or
+
+             Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+             Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
              Learn more: https://nextjs.org/docs/messages/blocking-route",
                  "environmentLabel": "Server",
@@ -2068,10 +2093,15 @@ describe('Cache Components Errors', () => {
 
                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.
 
-               To fix this, you can:
+               To fix this, you can either:
 
                Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-               Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+               or
+
+               Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+               Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
                Learn more: https://nextjs.org/docs/messages/blocking-route",
                  "environmentLabel": "Server",
@@ -2093,10 +2123,15 @@ describe('Cache Components Errors', () => {
 
                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.
 
-               To fix this, you can:
+               To fix this, you can either:
 
                Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
-               Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
+
+               or
+
+               Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
+
+               Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
 
                Learn more: https://nextjs.org/docs/messages/blocking-route",
                  "environmentLabel": "Server",