客户端数据获取

当您的页面不需要 SEO 索引、不需要预渲染数据，或者页面内容需要频繁更新时，客户端数据获取非常有用。与服务端渲染 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>Loading...</p>
  if (!data) return <p>No profile data</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>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

使用 useEffect 进行客户端数据获取

使用 SWR 进行客户端数据获取

On this page