Tweaks to blocking route error message (#85191)

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"
/>

Author: acdlite

packages/next/src/next-devtools/dev-overlay/container/errors.tsx

@@ -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);
+  }
 `

test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts

@@ -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",