客户端数据获取
当你的页面不需要搜索引擎索引,不需要预渲染数据,或者页面内容需要频繁更新时,客户端数据获取非常有用。与服务器端渲染 API 不同,你可以在组件级别使用客户端数据获取。
如果在页面级别进行,数据将在运行时获取,并且页面内容会随着数据变化而更新。在组件级别使用时,数据将在组件挂载时获取,并且组件内容会随着数据变化而更新。
需要注意的是,使用客户端数据获取可能会影响应用程序的性能和页面加载速度。这是因为数据获取是在组件或页面挂载时进行的,并且数据不会被缓存。
使用 useEffect 进行客户端数据获取
以下示例展示了如何使用 useEffect 钩子在客户端获取数据。
import { useState, useEffect } from 'react'
function Profile() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(true)
useEffect(() => {
fetch('/api/profile-data')
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])
if (isLoading) return <p>加载中...</p>
if (!data) return <p>没有个人资料数据</p>
return (
<div>
<h1>{data.name}</h1>
<p>{data.bio}</p>
</div>
)
}
使用 SWR 进行客户端数据获取
Next.js 团队创建了一个名为 SWR 的数据获取 React 钩子库。如果你在客户端获取数据,强烈推荐使用它。它可以处理缓存、重新验证、焦点跟踪、间隔重新获取等功能。
使用与上面相同的示例,我们现在可以使用 SWR 获取个人资料数据。SWR 将自动为我们缓存数据,并在数据过期时重新验证。
有关使用 SWR 的更多信息,请查看 SWR 文档。
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Profile() {
const { data, error } = useSWR('/api/profile-data', fetcher)
if (error) return <div>加载失败</div>
if (!data) return <div>加载中...</div>
return (
<div>
<h1>{data.name}</h1>
<p>{data.bio}</p>
</div>
)
}