如何获取数据和流式传输
本页将指导你如何在 Server Components 和 Client Components 中获取数据。以及如何对依赖数据的内容进行流式传输。
获取数据
Server Components
你可以在 Server Components 中通过以下方式获取数据:
使用 fetch
API
要使用 fetch
API 获取数据,将你的组件转换为异步函数,并等待 fetch
调用。例如:
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
使用 ORM 或数据库
你可以通过将组件转换为异步函数并等待调用,使用 ORM 或数据库获取数据:
import { db, posts } from '@/lib/db'
export default async function Page() {
const allPosts = await db.select().from(posts)
return (
<ul>
{allPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
Client Components
在 Client Components 中有两种获取数据的方式,使用:
- React 的
use
hook - 社区库,如 SWR 或 React Query
使用 use
hook
你可以使用 React 的 use
hook 从服务器向客户端流式传输数据。首先在你的 Server Component 中获取数据,并将 promise 作为 prop 传递给你的 Client Component:
import Posts from '@/app/ui/posts
import { Suspense } from 'react'
export default function Page() {
// 不要等待数据获取函数
const posts = getPosts()
return (
<Suspense fallback={<div>Loading...</div>}>
<Posts posts={posts} />
</Suspense>
)
}
然后,在你的 Client Component 中,使用 use
hook 读取 promise:
'use client'
import { use } from 'react'
export default function Posts({
posts,
}: {
posts: Promise<{ id: string; title: string }[]>
}) {
const allPosts = use(posts)
return (
<ul>
{allPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
在上面的例子中,你需要将 <Posts />
组件包裹在 <Suspense>
边界中。这意味着在 promise 解析过程中将显示 fallback。了解更多关于流式传输的信息。
社区库
你可以使用社区库如 SWR 或 React Query 在 Client Components 中获取数据。这些库有自己的缓存、流式传输和其他功能的语义。例如,使用 SWR:
'use client'
import useSWR from 'swr'
const fetcher = (url) => fetch(url).then((r) => r.json())
export default function BlogPage() {
const { data, error, isLoading } = useSWR(
'https://api.vercel.app/blog',
fetcher
)
if (isLoading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return (
<ul>
{data.map((post: { id: string; title: string }) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
流式传输
**注意:**以下内容假设在你的应用程序中启用了
dynamicIO
配置选项。该标志在 Next.js 15 canary 版本中引入。
在 Server Components 中使用 async/await
时,Next.js 将选择动态渲染。这意味着数据将在服务器上为每个用户请求获取和渲染。如果有任何慢速数据请求,整个路由将被阻止渲染。
为了改善初始加载时间和用户体验,你可以使用流式传输将页面的 HTML 分解成更小的块,并从服务器到客户端逐步发送这些块。
有两种方式可以在你的应用程序中实现流式传输:
- 使用
loading.js
文件 - 使用 React 的
<Suspense>
组件
使用 loading.js
你可以在与页面相同的文件夹中创建一个 loading.js
文件,以在获取数据时流式传输整个页面。例如,要流式传输 app/blog/page.js
,在 app/blog
文件夹中添加该文件。
export default function Loading() {
// 在这里定义 Loading UI
return <div>Loading...</div>
}
在导航时,用户将立即看到布局和加载状态,同时页面正在渲染。一旦渲染完成,新内容将自动替换。
在背后,loading.js
将嵌套在 layout.js
内部,并自动将 page.js
文件和下面的任何子内容包装在 <Suspense>
边界中。
这种方法适用于路由段(layouts 和 pages),但对于更精细的流式传输,你可以使用 <Suspense>
。
使用 <Suspense>
<Suspense>
允许你更精细地控制页面的哪些部分进行流式传输。例如,你可以立即显示 <Suspense>
边界外的任何页面内容,并在边界内流式传输博客文章列表。
import { Suspense } from 'react'
import BlogList from '@/components/BlogList'
import BlogListSkeleton from '@/components/BlogListSkeleton'
export default function BlogPage() {
return (
<div>
{/* 这些内容将立即发送到客户端 */}
<header>
<h1>欢迎访问博客</h1>
<p>阅读下面的最新文章。</p>
</header>
<main>
{/* 任何包裹在 <Suspense> 边界中的内容都将被流式传输 */}
<Suspense fallback={<BlogListSkeleton />}>
<BlogList />
</Suspense>
</main>
</div>
)
}
创建有意义的加载状态
即时加载状态是在导航后立即向用户显示的 fallback UI。为了获得最佳用户体验,我们建议设计有意义的加载状态,帮助用户理解应用程序正在响应。例如,你可以使用骨架屏和加载旋转器,或未来屏幕的一小部分但有意义的部分,如封面照片、标题等。
在开发中,你可以使用 React Devtools 预览和检查组件的加载状态。