错误：缺少 Suspense 边界。页面使用了流式渲染，但没有 Suspense 边界包裹异步组件。
Error: Missing Suspense boundary. The page uses streaming but no Suspense boundary wraps the async component.
ID: nextjs/suspense-boundary-missing-streaming
版本兼容性
| 版本 | 状态 | 引入 | 弃用 | 备注 |
|---|---|---|---|---|
| [email protected] | active | — | — | — |
| [email protected] | active | — | — | — |
根因分析
一个使用流式渲染的异步服务器组件（例如，通过等待一个 promise）没有被包裹在 Suspense 边界中，导致 Next.js 在流式渲染期间无法渲染回退 UI。
English
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.
官方文档
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming解决方案
-
Wrap the async component in a Suspense boundary in the parent layout or page.
-
Use the loading.js file at the same route segment level to provide a default Suspense boundary.
无效尝试
常见但无效的做法:
-
90% 失败
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).
-
60% 失败
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.