React 19 use 与 Suspense 数据获取与错误边界实践

概览`use` 允许在服务器组件中直接消费 Promise，配合 Suspense 可在数据就绪前渲染占位并以流式填充。错误边界则保障失败时的可恢复性与清晰反馈。服务器组件数据获取// app/posts/[id]/Post.tsx

export default function Post({ id }: { id: string }) {

const p = fetch(`https://api.example.com/posts/${id}`, { next: { revalidate: 300, tags: ['posts'] } }).then(r => r.json())

const data = use(p)

return <article><h1>{data.title}</h1><p>{data.body}</p></article>

}

Suspense 包裹// app/posts/[id]/page.tsx

import { Suspense } from 'react'

export default function Page({ params }: { params: { id: string } }) {

return (

<Suspense fallback={<p>加载中…</p>}>

{/* @ts-expect-error RSC */}

<Post id={params.id} />

</Suspense>

)

}

错误边界// app/posts/[id]/error.tsx

'use client'

export default function Error({ error, reset }: { error: Error; reset: () => void }) {

return (

<div role="alert">

<p>加载失败：{error.message}</p>

<button onClick={reset}>重试</button>

</div>

)

}

治理要点在服务器组件中优先使用 `use` 简化数据获取；必要时在客户端组件中保留传统 `useEffect` 路径。使用 `tags/revalidate` 管理缓存与失效，避免重复渲染。将关键区块包裹在 Suspense，提供骨架与流式体验；错误边界保障失败可恢复。验证与指标React：19.0+；Next.js：15.0+首屏与数据区块流式填充稳定；失败场景可重试并恢复