nextjs - 💡(How to fix) Fix Docs: Usage of Cache Components with Page-Level Authorization [5 comments, 3 participants]

○ Compiling /test ... Error: Route "/test": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experience. Learn more: https://nextjs.org/docs/messages/blocking-route at ForgotPassword (src/app/test/page.tsx:20:19) 18 | 19 | export default async function ForgotPassword() {

20 | await connection(); | ^ 21 | await withGuest(); 22 | 23 | return <div>Forgot Password</div>; GET /test 200 in 4.0s (compile: 3.4s, render: 556ms)

TL;DR

Wrap the uncached data access in a Suspense component to prevent blocking the entire page from rendering.

Guidance

• The error occurs because await connection() and await withGuest() are accessing uncached data outside of a Suspense component, which delays the page rendering.
• To fix this, wrap the uncached data access in a Suspense component, like this: <Suspense fallback={<div>Loading...</div>}>...</Suspense>.
• Review the Next.js documentation on Suspense to understand how to properly use it with Server Components.
• Consider refactoring the withGuest function to use a more idiomatic approach, such as using a hook or a separate component, to handle the authentication logic.

Example

import { Suspense } from 'react';

export default async function ForgotPassword() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ForgotPasswordContent />
    </Suspense>
  );
}

async function ForgotPasswordContent() {
  await connection();
  await withGuest();

  return <div>Forgot Password</div>;
}

Notes

The provided example code is a simplified version of the actual issue, so the fix may need to be adapted to the specific use case. Additionally, the withGuest function seems to be using a redirect, which might not be the best approach when using Server Components.

Recommendation

Apply workaround: Wrap the uncached data access in a Suspense component to prevent blocking the entire page from rendering. This will allow the page to render while the uncached data is being fetched, improving the user experience.