nextjs runtime_error ai_generated true

Error: Missing Suspense boundary. The page uses streaming but no Suspense boundary wraps the async component.

ID: nextjs/suspense-boundary-missing-streaming

Also available as: JSON · Markdown · 中文
93%Fix Rate
87%Confidence
1Evidence
2024-01-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —

Root Cause

An async server component that uses streaming (e.g., by awaiting a promise) is not wrapped in a Suspense boundary, causing Next.js to fail to render the fallback UI during streaming.

generic

中文

一个使用流式渲染的异步服务器组件（例如，通过等待一个 promise）没有被包裹在 Suspense 边界中，导致 Next.js 在流式渲染期间无法渲染回退 UI。

Official Documentation

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

Workarounds

  1. 95% success Wrap the async component in a Suspense boundary in the parent layout or page. 
    Wrap the async component in a Suspense boundary in the parent layout or page.
  2. 90% success Use the loading.js file at the same route segment level to provide a default Suspense boundary. 
    Use the loading.js file at the same route segment level to provide a default Suspense boundary.

中文步骤

  1. Wrap the async component in a Suspense boundary in the parent layout or page.
  2. Use the loading.js file at the same route segment level to provide a default Suspense boundary.

Dead Ends

Common approaches that don't work:

  1. 90% fail

    This converts the component to a client component, which cannot use async/await at the top level, causing a different error (async/await not supported in Client Components).

  2. 60% fail

    This changes the data fetching pattern and may break server-side rendering benefits. It also requires converting to a client component, which may not be desired.